jQuery TimePicker

jQuery TimePicker

jQuery TimePicker is a plugin to help users easily input time entries. It works by allowing the user to type times in a free format or selecting them from a dropdown menu.

The plugin will automatically convert all time entries using a format that can be changed passing the timeFormat option; the default value is hh:mm p which will give something like 02:16 PM.

The following are a few examples of the strings an user can type and how the plugin understands them:

Input Output (using the default format)
123412:34 AM
1234p12:34 PM
45604:56 AM
165604:56 PM
1:1 P1:10 PM
1:9 A1:09 AM
8:598:59 AM
120301:20:30 AM
4605:00 AM (it's interpreted as 4 hours plus 60 minutes)

There are other supported formats, all inspired by the behavior of a similar timepicker used in Google Calendar. To see more, try the demos.

How to Use

To use jQuery TimePicker you'll need to include two files: jquery.timepicker.js and jquery.timepicker.css. Then, assuming you have an <input> element in your document, you can use the following code to initialize the plugin:

$(document).ready(function(){
    $('input.timepicker').timepicker({});
});

Refer to the options page for a detailed description about the available configuration.

Bugs Reports

Bugs reports, comments and feature suggestions are always welcome at GitHub, in jQuery TimePicker Google Group or sent directly to wvega@wvega.com.

Download

Latest version of jQuery TimePicker is available for download from GitHub. Download

jQuery TimePicker Options & Events

jQuery TimePicker options

timeFormat

The format of the time string displayed in the input and the menu items in the combobox. Available modifiers are:

h 12 hour without leading 0. hh 12 hour with leading 0.
H 24 hour without leadgin 0. HH 24 hour with leading 0.
m minutes without leading 0. mm minutes with leading 0.
s seconds without leading 0. ss seconds with leading 0.
p AM or PM 
$(document).ready(function(){
    $('input.timepicker').timepicker({ timeFormat: 'h:mm:ss p' });
});
minTime

A Date object or string. Only the time parts (getHours, getMinutes) of the object are important. Time entries before minTime won't be displayed/allowed.

minHour

int. Time entries with an 24-hour part before minHour won't be displayed/allowed. Ignored if minTime is set.

minMinutes

int Time entries with minutes part before minMinutes won't be displayed/allowed. Ignored if minTime is set.

maxTime

A Date object or string. Only the time parts (getHours, getMinutes) of the object are important. Time entries after minTime won't be displayed/allowed.

maxHour

int. Time entries with an 24-hour part after maxHour won't be displayed/allowed. Ignored if maxTime is set.

maxMinutes

int. Time entries with minutes part after maxHour won't be displayed/allowed. Ignored if maxTime is set.

startTime

A Date object or string. The time of the first item in the combobox when the input field is empty. If the input field is not empty the first item will be the next allowed time entry.

startHour

int. The 24-hour part of the first item in the combobox when the input field is emptye. If input field is not empty the first item will be the next allowed time entry. Ignored if startTime is set.

startMinutes

int. The minutes part of the first item in the combobox when the input field is emptye. If input field is not empty the first item will be the next allowed time entry. Ignored if startTime is set.

interval

int. Separation in minutes between time entries in the dropdown menu.

$(document).ready(function(){
    $('input.timepicker').timepicker({
        timeFormat: 'HH:mm:ss',
        minTime: '11:45:00' // 11:45:00 AM,
        maxHour: 20,
        maxMinutes: 30,
        startTime: new Date(0,0,0,15,0,0) // 3:00:00 PM - noon
        interval: 15 // 15 minutos
    });
});
dropdown

boolean. Whether the dropdown should be displayed or not.

scrollbar

boolean. Whether the scrollbars should be displayed or not.

jQuery TimePicker events

change

Event triggerd when the value of the input field changes. A Date object containing the selected time is passed as the first argument of the callback.

$(document).ready({
    $('input.timepicker').timepicker({
        change: function(time) {
            // the input field
            var element = $(this), text;
            // get access to this TimePicker instance
            var timepicker = element.timepicker();
            text = 'Selected time is: ' + timepicker.format(time);
            element.siblings('span.help-line').text(text);
        }
    });
});
Fork me on GitHub