The timepicker addon adds a timepicker to jQuery UI Datepicker, thus the datepicker and slider components (jQueryUI) are required for using any of these. In addition all datepicker options are still available through the timepicker addon.
If you are interested in contributing to Timepicker Addon please check it out on GitHub. If you do make additions please keep in mind I enjoy tabs over spaces,.. But contributions are welcome in any form.
Back to Blog or Follow on Twitter
Subscribe to my blog via email and follow @PracticalWeb on Twitter. I post for nearly every new version, so you know about updates.
Download Timepicker Addon and the required CSS.
Download/Contribute on GitHub (Need the entire repo? Find a bug? See if its fixed here)
If you prefer a hosted CDN there are a couple available: CDNJS, jsDelivr.
You also need to include jQuery and jQuery UI with datepicker and slider wigits. You should include them in your page in the following order:
Version 1.6.3
Last updated on 2016-04-20
jQuery Timepicker Addon is currently available for use in all personal or commercial projects under the MIT license.
The timepicker does inherit all options from datepicker. However, there are many options that are shared by them both, and many timepicker only options:
{
create: function(tp_inst, obj, unit, val, min, max, step){
// generate whatever controls you want here, just return obj
},
options: function(tp_inst, obj, unit, opts, val){
// if val==undefined return the value, else return obj
},
value: function(tp_inst, obj, unit, val){
// if val==undefined return the value, else return obj
}
}
{
hour: 19,
minute: 10,
second: 23,
millisec: 45,
microsec: 23,
timezone: '-0400'
}
The default format is "HH:mm". To use 12 hour time use something similar to: "hh:mm tt". When both "t" and lower case "h" are present in the timeFormat, 12 hour time will be used.
Formats are used in the following ways:
For help with formatting the date portion, visit the datepicker documentation for formatting dates.
Timepicker comes with many translations and localizations, thanks to all the contributors. They can be found in the i18n folder in the git repo.
The quick and cheap way to use localizations is to pass in options to a timepicker instance:
$('#example123').timepicker({
timeOnlyTitle: 'Выберите время',
timeText: 'Время',
hourText: 'Часы',
minuteText: 'Минуты',
secondText: 'Секунды',
currentText: 'Сейчас',
closeText: 'Закрыть'
});
However, if you plan to use timepicker extensively you will need to include (build your own) localization. It is simply assigning those same variables to an object.
As you see in the example below we maintain a separate object for timepicker. This way we aren't bound to any future changes within datepicker.
$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: '<Пред',
nextText: 'След>',
currentText: 'Сегодня',
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь',
'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн',
'Июл','Авг','Сен','Окт','Ноя','Дек'],
dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
weekHeader: 'Не',
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['ru']);
$.timepicker.regional['ru'] = {
timeOnlyTitle: 'Выберите время',
timeText: 'Время',
hourText: 'Часы',
minuteText: 'Минуты',
secondText: 'Секунды',
millisecText: 'Миллисекунды',
timezoneText: 'Часовой пояс',
currentText: 'Сейчас',
closeText: 'Закрыть',
timeFormat: 'HH:mm',
amNames: ['AM', 'A'],
pmNames: ['PM', 'P'],
isRTL: false
};
$.timepicker.setDefaults($.timepicker.regional['ru']);
Now all you have to do is call timepicker and the Russian localization is used. Generally you only need to include the localization file, it will setDefaults() for you.
As of version 1.4.5 a combined file of all localizations available is included. This file DOES NOT call setDefaults(), so you will need to pass, or merge with your options.
$('#example123').timepicker($.timepicker.regional['ru']);
Localization files for datepicker are typically available in your jQueryUI downloads.
Add a simple datetimepicker to jQuery UI's datepicker
$('#basic_example_1').datetimepicker();
Add only a timepicker:
$('#basic_example_2').timepicker();
Format the time:
$('#basic_example_3').datetimepicker({
timeFormat: "hh:mm tt"
});
Timepicker comes with a collection of localization files and one combined file with all available localizations. $.timepicker.regional["your localization code here"] is a simple object with preset options:
$('#basic_example_4').timepicker(
$.timepicker.regional['es']
);
Simplest timezone usage:
$('#timezone_example_1').datetimepicker({
timeFormat: 'hh:mm tt z'
});
Define your own timezone options:
$('#timezone_example_2').datetimepicker({
timeFormat: 'HH:mm z',
timezoneList: [
{ value: -300, label: 'Eastern'},
{ value: -360, label: 'Central' },
{ value: -420, label: 'Mountain' },
{ value: -480, label: 'Pacific' }
]
});
Add a grid to each slider:
$('#slider_example_1').timepicker({
hourGrid: 4,
minuteGrid: 10,
timeFormat: 'hh:mm tt'
});
Set the interval step of sliders:
$('#slider_example_2').datetimepicker({
timeFormat: 'HH:mm:ss',
stepHour: 2,
stepMinute: 10,
stepSecond: 10
});
Add sliderAccess plugin for touch devices:
$('#slider_example_3').datetimepicker({
addSliderAccess: true,
sliderAccessArgs: { touchonly: false }
});
Use dropdowns instead of sliders. By default if slider is not available dropdowns will be used.
$('#slider_example_4').datetimepicker({
controlType: 'select',
timeFormat: 'hh:mm tt'
});
Uses one line dropdowns instead of sliders.
$('#slider_example_4andHalf').datetimepicker({
controlType: 'select',
oneLine: true,
timeFormat: 'hh:mm tt'
});
Create your own control by implementing the create, options, and value methods. If you want to use your new control for all instances use the $.timepicker.setDefaults({controlType:myControl}). Here we implement jQueryUI's spinner control (jQueryUI 1.9+).
var myControl= {
create: function(tp_inst, obj, unit, val, min, max, step){
$('<input class="ui-timepicker-input" value="'+val+'" style="width:50%">')
.appendTo(obj)
.spinner({
min: min,
max: max,
step: step,
change: function(e,ui){ // key events
// don't call if api was used and not key press
if(e.originalEvent !== undefined)
tp_inst._onTimeChange();
tp_inst._onSelectHandler();
},
spin: function(e,ui){ // spin events
tp_inst.control.value(tp_inst, obj, unit, ui.value);
tp_inst._onTimeChange();
tp_inst._onSelectHandler();
}
});
return obj;
},
options: function(tp_inst, obj, unit, opts, val){
if(typeof(opts) == 'string' && val !== undefined)
return obj.find('.ui-timepicker-input').spinner(opts, val);
return obj.find('.ui-timepicker-input').spinner(opts);
},
value: function(tp_inst, obj, unit, val){
if(val !== undefined)
return obj.find('.ui-timepicker-input').spinner('value', val);
return obj.find('.ui-timepicker-input').spinner('value');
}
};
$('#slider_example_5').datetimepicker({
controlType: myControl
});
Alt field in the simplest form:
$('#alt_example_1').datetimepicker({
altField: "#alt_example_1_alt"
});
With datetime in both:
$('#alt_example_2').datetimepicker({
altField: "#alt_example_2_alt",
altFieldTimeOnly: false
});
Format the altField differently:
$('#alt_example_3').datetimepicker({
altField: "#alt_example_3_alt",
altFieldTimeOnly: false,
altFormat: "yy-mm-dd",
altTimeFormat: "h:m t",
altSeparator: " @ "
});
With inline mode using altField:
$('#alt_example_4').datetimepicker({
altField: "#alt_example_4_alt",
altFieldTimeOnly: false
});
Allows time displayed inside the picker to allow being typed in.
$('#input_example_1').datetimepicker({
timeInput: true,
timeFormat: "hh:mm tt"
});
Don't show any sliders, only the time input.
$('#input_example_2').datetimepicker({
timeInput: true,
timeFormat: "hh:mm tt",
showHour: false,
showMinute: false
});
Set the min/max hour of every date:
$('#rest_example_1').timepicker({
hourMin: 8,
hourMax: 16
});
Set the min/max date numerically:
$('#rest_example_2').datetimepicker({
numberOfMonths: 2,
minDate: 0,
maxDate: 30
});
Set the min/max date and time with a Date object:
$('#rest_example_3').datetimepicker({
minDate: new Date(2010, 11, 20, 8, 30),
maxDate: new Date(2010, 11, 31, 17, 30)
});
Restrict a start and end date by using onSelect and onClose events for more control over functionality:
For more examples and advanced usage grab the Handling Time eBook.
var startDateTextBox = $('#range_example_1_start');
var endDateTextBox = $('#range_example_1_end');
startDateTextBox.datetimepicker({
timeFormat: 'HH:mm z',
onClose: function(dateText, inst) {
if (endDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
endDateTextBox.datetimepicker('setDate', testStartDate);
}
else {
endDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
}
});
endDateTextBox.datetimepicker({
timeFormat: 'HH:mm z',
onClose: function(dateText, inst) {
if (startDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
startDateTextBox.datetimepicker('setDate', testEndDate);
}
else {
startDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
}
});
Timepicker also includes some shortcut methods for ranges:
var startDateTextBox = $('#range_example_2_start');
var endDateTextBox = $('#range_example_2_end');
$.timepicker.datetimeRange(
startDateTextBox,
endDateTextBox,
{
minInterval: (1000*60*60), // 1hr
dateFormat: 'dd M yy',
timeFormat: 'HH:mm',
start: {}, // start picker options
end: {} // end picker options
}
);
To use only times for a time range use $.timepicker.timeRange():
var startTimeTextBox = $('#range_example_3_start');
var endTimeTextBox = $('#range_example_3_end');
$.timepicker.timeRange(
startTimeTextBox,
endTimeTextBox,
{
minInterval: (1000*60*60), // 1hr
timeFormat: 'HH:mm',
start: {}, // start picker options
end: {} // end picker options
}
);
Even though this plugin focuses on datetime, it also provides a dateRange function:
var startDateTextBox = $('#range_example_4_start');
var endDateTextBox = $('#range_example_4_end');
$.timepicker.dateRange(
startDateTextBox,
endDateTextBox,
{
minInterval: (1000*60*60*24*4), // 4 days
maxInterval: (1000*60*60*24*8), // 8 days
start: {}, // start picker options
end: {} // end picker options
}
);
Get and Set Datetime with the getDate and setDate methods. This example uses timezone to demonstrate the timepicker regonizes the timezones and computes the offsets when getting and setting.
var ex13 = $('#utility_example_1');
ex13.datetimepicker({
timeFormat: 'hh:mm tt z',
separator: ' @ ',
showTimezone: true
});
$('#utility_example_1_setdt').click(function(){
ex13.datetimepicker('setDate', (new Date()) );
});
$('#utility_example_1_getdt').click(function(){
alert(ex13.datetimepicker('getDate'));
});
Use the utility function to format your own time. $.datepicker.formatTime(format, time, options)
Returns a time string in the specified format.
$('#utility_example_2').text(
$.datepicker.formatTime('HH:mm z', { hour: 14, minute: 36, timezone: '+2000' }, {})
);
Use the utility function to parses a formatted time. $.datepicker.parseTime(format, timeString, options)
Returns an object with hours, minutes, seconds, milliseconds, timezone.
$('#utility_example_3').text(JSON.stringify(
$.datepicker.parseTime('HH:mm:ss:l z', "14:36:21:765 +2000", {})
));