jQuery time input plugin

After looking for ages for a  nice client side time entry  plugin, but without any result, I decided to write my own jQuery plugin.

My requirements:

  • Enter any amount of hours.
  • Be able to enter 12 hours and 30 minutes and display it like “12:30”.
  • Allow user to enter hours in two formats:  12:30 and 12,5 both meaning twelve hours and thirty minutes.
  • Easy retrieval of the entered value.

If you want to find out quickly if this plugin is what you are looking for, go to the demo page.


1. Download the library from Github and add a reference to jQuery and the plugin script. In this example I use the Google CDN version of jQuery:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="jquery.timeinput-0.1.min.js"></script>

2. Create an input field in your html document:

<input id="timeInput" />

3. Call the plugin and attach a change eventhandler to have access to the total minutes entered by the user.

     $(document).ready(function () {
            var ti = $("#timeInput").timeInput();
            ti.on("change", function () {
                console.log("New input value: '" + ti.val() + "'. Minutes: " + ti.getTotalMinutes() + " (" + ti.getTotalHours() + " hours)");


The plugin accepts a settings object in the constructor. The available options are listed below.

Option Type Default value Description
maxMinutes Number 24 * 60 (one day) The maximum amount of minutes to enter.
minMinutes Number 0 The mimumum amount of minutes to enter.
defaultMinutes Number null If set to a numeric value, it will be displayed in the input field initially.
decimalSeparator String “,” The character used to enter values like “3,5”.
hourMinuteSeparator String “:” The character used to enter values like “3:30”.
roundToNearest Number 15 Round to the nearest 15, 30 or 60 minutes. Any other value will be ignored.


Here are some controls and plugins I checked out and why they don’t fit my needs:

  • Kendo timepicker: allows you to select a moment in time, but it’s not possible to select an amount of hours and minutes.
  • Kendo masked textbox: enables me to specify a format like HH:mm, but I cannot apply multiple masks.
  • Kendo numeric textbox: this one came close, but it is not possible to have a value of 3,75 but display 3:45 to the user.
  • jQuery time entry: great plugin, but only one input format accepted at a time.

One thought on “jQuery time input plugin

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s