jQuery Timepicker Options & Events

The following is a list of all jQuery Timepicker options and events.

jQuery Timepicker Options

timeFormat

string 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 leading 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' });
});
defaultTime

A Date object, string or the word 'now'. Only the time parts (getHours, getMinutes) of the object are important. It must be a valid time, according to minTime, minHour, minMinutes, maxTime, maxHour and maxMinutes.

If 'now' is passed, the current time as returned by new Date() will be used as the default value.

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 minutes
    });
});
dropdown

boolean Whether the dropdown should be displayed or not.

dynamic

boolean If a date is already selected and dynamic is true, the items in the dropdown will be arranged so that the first item is chronologically right after the selected time entry.

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