Adding a Timepicker to jQuery UI Datepicker

Add a simple timepicker to jQuery UI's datepicker

$('#example1').datetimepicker();

Show time in AM/PM 12 hour format

$('#example2').datetimepicker({
	ampm: true
});

Show only the time picker without date picker

$('#example3').timepicker({});

Change the format (default is "hh:mm tt")

h

Hour with no leading 0

hh

Hour with leading 0

m

Minute with no leading 0

mm

Minute with leading 0

s

Second with no leading 0

ss

Second with leading 0

l

Milliseconds always with leading 0

t

a or p for AM/PM

T

A or P for AM/PM

tt

am or pm for AM/PM

TT

AM or PM for AM/PM

Also related to your timeFormat, but not required, is the separator option

separator

Place holder between date and time, default=" "

$('#example4').datetimepicker({
	timeFormat: 'h:m',
	separator: ' @ '
});

Show Seconds, Minutes, or Hours

showHour

Show the hour, default=true

showMinute

Show the minute, default=true

showSecond

Show the second, default=false

showMillisec

Show the millisecond, default=false

$('#example5').datetimepicker({
	showSecond: true,
	showMillisec: true,
	timeFormat: 'hh:mm:ss:l'
});

Hours, Minutes, Seconds in steps

stepHour

hour steps, default=0.05 (for smooth, 1 would jump to each hour)

stepMinute

minute steps, default=0.05

stepSecond

second steps, default=0.05

stepMillisec

second steps, default=0.5

$('#example6').datetimepicker({
	showSecond: true,
	timeFormat: 'hh:mm:ss',
	stepHour: 2,
	stepMinute: 10,
	stepSecond: 10
});

Default Hours, Minutes, Seconds

hour

default=0

minute

default=0

second

default=0

millisec

default=0

$('#example7').datetimepicker({
	hour: 13,
	minute: 15
});

Set the time range. For instance if you only want to allow the user to choose times between 8AM and 5PM.

hourMin

default=0

hourMax

default=23

minuteMin

default=0

minuteMax

default=59

secondMin

default=0

secondMax

default=59

millisecMin

default=0

millisecMax

default=999

$('#example8').timepicker({
	ampm: true,
	hourMin: 8,
	hourMax: 16
});

There is also localization support. Read up on localization for datepicker for adding support for more languages. There are a few new definitions you will need to add to your language file:

timeOnlyTitle

default="Choose Time"

timeText

default="Time"

hourText

default="Hour"

minuteText

default="Minute"

secondText

default="Second"

millisecText

default="Milliecond"

currentText

default="Now"

closeText

default="Done"

ampm

default=false (true/false, Some regions do use this, some don't)

Or optionally you may add them as options as shown below with Russian.

$('#example9').timepicker({
	timeOnlyTitle: 'Выберите время',
	timeText: 'Время',
	hourText: 'Часы',
	minuteText: 'Минуты',
	secondText: 'Секунды',
	currentText: 'Теперь',
	closeText: 'Закрыть'
});

$.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: 'миллисекунды',
	currentText: 'Теперь',
	closeText: 'Закрыть',
	ampm: false
};
$.timepicker.setDefaults($.timepicker.regional['ru']);

To show numbered grids under the sliders you may use the following options:

hourGrid

default=0

minuteGrid

default=0

secondGrid

default=0

millisecGrid

default=0

When using ampm option hours will be displayed with an "a" or "p": 04a, 12p, etc...

$('#example10').timepicker({
	hourGrid: 4,
	minuteGrid: 10
});

When showing more than one month:

$('#example11').datetimepicker({
	numberOfMonths: 3
});

With minDate and maxDate datepicker options:

$('#example12').datetimepicker({
	numberOfMonths: 2,
	minDate: 0,
	maxDate: 30
});

Get and Set Datetime:

var ex13 = $('#example13');

ex13.datetimepicker();

$('#example13_setdt').click(function(){
	ex13.datetimepicker('setDate', (new Date()) );
});

$('#example13_getdt').click(function(){
	alert(ex13.datetimepicker('getDate'));
});

Use the datepicker minDate/maxDate options: (note: these must use Date objects)

$('#example14').datetimepicker({
	minDate: new Date(2010, 11, 20, 8, 30),
	maxDate: new Date(2010, 11, 31, 17, 30)
});

Connect to the onSelect event (Use your browser's js console for this example).

$('#example15').datetimepicker({
	showSecond: true,
	showMillisec: true,
	timeFormat: 'hh:mm:ss:l',
	onSelect: function(dateText, inst){
		if(window.console)
			console.log(dateText);
	}
});

Create a datetime range with a start and end date.

$('#example16_start').datetimepicker({
    onClose: function(dateText, inst) {
        var endDateTextBox = $('#example16_end');
        if (endDateTextBox.val() != '') {
            var testStartDate = new Date(dateText);
            var testEndDate = new Date(endDateTextBox.val());
            if (testStartDate > testEndDate)
                endDateTextBox.val(dateText);
        }
        else {
            endDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        var start = $(this).datetimepicker('getDate');
        $('#example16_end').datetimepicker('option', 'minDate', new Date(start.getTime()));
    }
});
$('#example16_end').datetimepicker({
    onClose: function(dateText, inst) {
        var startDateTextBox = $('#example16_start');
        if (startDateTextBox.val() != '') {
            var testStartDate = new Date(startDateTextBox.val());
            var testEndDate = new Date(dateText);
            if (testStartDate > testEndDate)
                startDateTextBox.val(dateText);
        }
        else {
            startDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        var end = $(this).datetimepicker('getDate');
        $('#example16_start').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
    }
});

Use the sliderAccess addon to allow timepicker sliders to work on touch devices.

$('#example17').datetimepicker({
	addSliderAccess: true,
	sliderAccessArgs: { touchonly: false }
});

Use the utility function to format your own time. $.datepicker.formatTime(format, time, options)

format

required - string represenation of the time format to use

time

required - hash: { hour, minute, second, millisecond, timezone }

options

optional - hash of any options in regional translation (ampm, amNames, pmNames..)

$('#example18').text(
	$.datepicker.formatTime('hh:mm z', { hour: 14, minute: 36, timezone: '+2000' }, { ampm: false })
);