Adding a Timepicker to jQuery UI Datepicker

Add a simple timepicker to jQuery UI's datepicker

$('#example1').datetimepicker(
{
    changeYear: true,
    dayNames:['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
    dayNamesShort:['日','一','二','三','四','五','六'],
});

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

t

a or p for AM/PM

tt

A or P for AM/PM

T

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

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

Hours, Minutes, Seconds in steps

stepHour

hour steps, default=1

stepMinute

minute steps, default=1

stepSecond

second steps, default=1

$('#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

$('#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

$('#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"

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: 'Секунды',
	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

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, 12, 20, 8, 30),
	maxDate: new Date(2010, 12, 31, 17, 30)
});