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.

Usage:

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)");
            });
        });

Settings

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.