Ссылка на сайт.

Timepicker аддон добавляет к timepicker JQuery UI DatePicker, таким образом, DatePicker и slider компоненты (jQueryUI) требуются для использования любого из них. Кроме того, все варианты Datepicker все еще доступны через аддон timepicker.

Скачать

Скачать Timepicker Аддон и необходимый CSS.

Скачать / внести вклад на GitHub (нужен весь РЕПО? Нашли ошибку? Смотрите, если его зафиксировали здесь)

Если вы предпочитаете размещенный CDN есть несколько доступных: CDNJS, jsDelivr.

Собственно zip: jQuery-Timepicker-Addon-master.zip

 

Требования

Вы также должны включить jQuery и jQuery UI с виджетами datepicker и slider. Вы должны включить их в свою страницу в следующем порядке:

  1. jQuery
  2. jQueryUI (С DatePicker и slider виджетами)
  3. Timepicker

Версия

Version 1.6.3

Последнее обновление 2016-04-20

JQuery Timepicker Аддон в настоящее время доступен для использования во всех личных или коммерческих проектах по лицензии MIT.

MIT License

 

 

Опции

Timepicker  наследует все параметры от DatePicker. Тем не менее, есть много параметров, общих для обоих, и многие параметры только  для timepicker:

Варианты локализации

currentText
Default: "Now",  Настройка Локализации - Текст для кнопки "Сейчас".
closeText
Default: "Done",  Настройка Локализации - Текст для кнопки "Закрыть".
amNames
Default: ['AM', 'A'],  Настройка Локализации - Массив строк, чтобы попытаться проанализировать и определить AM.
pmNames
Default: ['PM', 'P'],  Настройка Локализации - Массив строк, чтобы попытаться проанализировать и определить PM.
timeFormat
Default: "HH:mm", Настройка Локализации - Строка токенов формата, которые будут заменены временем. См. Раздел Форматирование.
timeSuffix
Default: "", Настройка Локализации - Строка для размещения после отформатированного времени.
timeOnlyTitle
Default: "Choose Time", Настройка Локализации - Название виджета при использовании только timepicker.
timeText
Default: "Time", Настройка Локализации - Метка, используемая в timepicker для форматированного времени.
hourText
Default: "Hour", Настройка Локализации - Метка, используемая для идентификации часового ползунка.
minuteText
Default: "Minute", Настройка Локализации - Метка, используемая для идентификации минутного ползунка.
secondText
Default: "Second", Настройка Локализации - Метка, используемая для идентификации секундного ползунка.
millisecText
Default: "Millisecond", Настройка Локализации - Метка, используемая для идентификации миллисекундного ползунка.
microsecText
Default: "Microsecond", Настройка Локализации - Метка, используемая для идентификации микросекундного ползунка.
timezoneText
Default: "Timezone", Настройка Локализации - Метка, используемая для идентификации ползунка часового пояса.
isRTL
Default: false, Настройка Локализации - Справа налево поддержка.

Параметры Поля Alt

altFieldTimeOnly
Default: true - При использовании altField из datepicker altField будет получать только форматированное время, а исходное поле-только дату.
altSeparator
Default: (separator option) - Строка, помещенная между отформатированной датой и отформатированным временем в поле altField.
altTimeSuffix
Default: (timeSuffix option) - Строка всегда помещается после отформатированного времени в поле altField.
altTimeFormat
Default: (timeFormat option) - Формат времени для использования с полем altField.
altRedirectFocus
Default: true - Следует ли немедленно фокусировать основное поле всякий раз, когда altField получает фокус. Эффективен только во время создания виджета, изменение его позже не имеет никакого эффекта.

Параметры Часового Пояса

timezoneList
Default: [generated timezones] - Массив часовых поясов, используемых для заполнения выбранного часового пояса. Может быть массив значений или массив объектов: { label: "EDT", value: -240 }. Значение должно быть числом смещения в минутах. Таким образом, "-0400", который является форматом "-hhmm", будет приравниваться к -240 минутам.

Параметры Поля Времени

controlType
Default: 'slider' - Следует ли использовать "slider" или "select". Если 'slider' недоступен через jQueryUI, будет использоваться 'select'. Для расширенного использования вы можете передать объект, который реализует методы" create"," options"," value " для использования элементов управления, отличных от ползунка или выбора. Дополнительные сведения см. в свойстве _controls в исходном коде.
{
	create: function(tp_inst, obj, unit, val, min, max, step){	
		// генерируйте любые элементы управления, которые вы хотите здесь, просто верните obj
	},
	options: function(tp_inst, obj, unit, opts, val){
		// если val==undefined вернуть значение, в противном случае возвращается объект obj
	},
	value: function(tp_inst, obj, unit, val){
		// если val==undefined вернуть значение, в противном случае возвращается объект obj
	}
}
showHour
Default: null - Нужно ли показывать управление часом. Значение по умолчанию null будет использовать обнаруженый в timeFormat.
showMinute
Default: null - Нужно ли показывать управление минутой. Значение по умолчанию null будет использовать обнаружение из timeFormat.
showSecond
Default: null - Нужно ли показывать управление секундой. Значение по умолчанию null будет использовать обнаружение из timeFormat.
showMillisec
Default: null - Показывать ли управление миллисекундой. Значение по умолчанию null будет использовать обнаружение из timeFormat.
showMicrosec
Default: null - Нужно ли показывать управление микросекундой. Значение по умолчанию null будет использовать обнаружение из timeFormat.
showTimezone
Default: null - Нужно ли показывать выбор часового пояса.
showTime
Default: true - Показывать ли время, выбранное в окне datetimepicker.
stepHour
Default: 1 - Количество часов на шаг, которое делает ползунок.
stepMinute
Default: 1 - Количество минут на шаг, которое делает ползунок.
stepSecond
Default: 1 - Число секунд на шаг, которое выполняет ползунок.
stepMillisec
Default: 1 - Миллисекунды на шаг, создаваемые ползунком.
stepMicrosec
Default: 1 - Микросекунды на шаг, которые делает ползунок.
hour
Default: 0 - Начальный выбор часа.
minute
Default: 0 - Начальный выбор минут.
second
Default: 0 - Начальный выбор секунд.
millisec
Default: 0 - Начальный выбор миллисекунд.
microsec
Default: 0 - Начальный выбор микросекунд. Примечание.Собственный объект Javascript Date не поддерживает микросекунды. Тимепикер добавляет способность только к Date.setMicroseconds (m) и Date.getMicroseconds (). Сравнение дат не будет подтверждать микросекунды. Используется только для просмотра.
timezone
Default: null - Установка начального часового пояса. Это смещение в минутах. Если значение null, будет использоваться локальный часовой пояс браузера. Если у вас часовой пояс "-0400", вы бы использовали -240. Для обратной совместимости можно пройти "-0400", однако часовой пояс хранится в минутах и надежнее.
hourMin
Default: 0 - Минимальный час, допустимый для всех дат.
minuteMin
Default: 0 - Минимальная минута, допустимая для всех дат.
secondMin
Default: 0 - Минимальная секунда, разрешенная для всех дат.
millisecMin
Default: 0 - Минимальная миллисекунда, допустимая для всех дат.
microsecMin
Default: 0 - Минимальная микросекунда, допустимая для всех дат.
hourMax
Default: 23 - Максимально допустимый час для всех дат.
minuteMax
Default: 59 - Максимально допустимая минута для всех дат.
secondMax
Default: 59 - Максимальное число секунд, разрешенное для всех дат.
millisecMax
Default: 999 - Максимальная миллисекунда, допустимая для всех дат.
microsecMax
Default: 999 - Максимально допустимая микросекунда для всех дат.
hourGrid
Default: 0 - Если значение больше 0, под ползуном создается сетка меток. Это число представляет единицы измерения (в часах) между метками.
minuteGrid
Default: 0 - Если значение больше 0, под ползуном создается сетка меток. Это число представляет единицы измерения (в минутах) между метками.
secondGrid
Default: 0 - Если значение больше 0, под ползуном будет создана сетка меток. Это число представляет единицы измерения (в секундах) между метками.
millisecGrid
Default: 0 - Если значение больше 0, под ползуном будет создана сетка меток. Это число представляет единицы измерения (в миллисекундах) между метками.
microsecGrid
Default: 0 - Если значение больше 0, под ползуном будет создана сетка меток. Это число представляет единицы измерения (в микросекундах) между метками.

Другие опции

showButtonPanel
Default: true - Показывать ли панель кнопок внизу. Это, как правило, необходимо.
timeInput
Default: false - Разрешение прямого ввода в поле времени
timeOnly
Default: false - Скройте указатель даты и предоставьте только интерфейс времени.
timeOnlyShowDate
Default: false - Показать дату и время во входном потоке, но только позволить timepicker.
afterInject
Default: null - Функция, вызываемая при вводе или повторном отображении элемента управления timepicker или selection. Вызывается в контексте экземпляра timepicker.
onSelect
Default: null - Функция, вызываемая при выборе даты или изменении времени (параметры: datetimeText, datepickerInstance).
alwaysSetTime
Default: true - Всегда иметь внутренний набор времени, даже до того, как пользователь выберет его.
separator
Default: " " - При форматировании времени эта строка помещается между форматированной датой и форматированным временем.
pickerTimeFormat
Default: (timeFormat option) - Формат времени, отображаемого в таймере.
pickerTimeSuffix
Default: (timeSuffix option) - Строка для размещения после отформатированного времени в таймере.
showTimepicker
Default: true - Показывать ли указатель времени в этом указателе данных.
oneLine
Default: false - Попробовать показать выпадающие списки времени все на одной строке. Это должно использоваться с controlType 'select' и как можно меньшим количеством единиц.
addSliderAccess
Default: false - Добавляет плагин sliderAccess на ползунки в пределах элемента управления datepicker.
sliderAccessArgs
Default: null - Объект для передачи в sliderAccess при использовании.
defaultValue
Default: null - Строка значения времени по умолчанию, помещенного во входной сигнал при фокусировке, когда входной сигнал пуст.
minDateTime
Default: null - Объект Date минимального допустимого значения datetime. Также доступно как minDate.
maxDateTime
Default: null - Объект Date максимального допустимого значения datetime. Также доступен как maxDate.
minTime
Default: null - Строка минимально допустимого времени. "8:00 am" ограничится временем после 8 утра
maxTime
Default: null - Строка максимально допустимого времени. "8:00 pm" ограничится временем до 8 вечера
parse
Default: 'strict' - Как разобрать строку времени. Предусмотрены два метода: "strict", который должен точно соответствовать формату времени, и "loose", который использует новую дату javascript(timeString), чтобы угадать время. Вы также можете передать функцию (timeFormat, timeString, options) для обработки синтаксического анализа самостоятельно, возвращая простой объект:
{
	hour: 19,
	minute: 10,
	second: 23,
	millisec: 45,
	microsec: 23,
	timezone: '-0400'
}

Форматирование Вашего Времени

По умолчанию используется формат "HH: mm". Для использования 12-часового времени используйте что-то похожее на: "hh:mm tt". Когда и "t", и строчная" h " присутствуют в timeFormat, будет использоваться 12-часовое время.

H
Час без ведущего 0 (24 часа)
HH
Час с ведущим 0 (24 часа)
h
Час без ведущего 0 (12 час)
hh
Час с ведущим 0 (12 час)
m
Минуты без ведущего 0
mm
Минуты с ведущим 0
s
Секунды без ведущего 0
ss
Секунды с ведущим 0
l
Миллисекунды всегда с ведущим 0
c
Микросекунды всегда с ведущим 0
t
a или p для AM/PM
T
A или P для AM/PM
tt
am или pm для AM/PM
TT
AM или PM для AM/PM
z
Часовой пояс, определенный timezoneList
Z
Часовой пояс в формате Iso 8601 (+04: 45)
'...'
Буквальный текст (использует одинарные кавычки)

Форматы используются следующим образом:

  • опция timeFormat
  • опция altTimeFormat
  • опция pickerTimeFormat
  • $.datepicker.formatTime(format, timeObj, options) служебный метод
  • $.datepicker.parseTime(format, timeStr, options) служебный метод

Для получения справки по форматированию части даты посетите документацию datepicker для форматирования дат.

Работа с локализациями

Timepicker поставляется с большим количеством переводов и локализаций, благодаря всем участникам. Их можно найти в папке i18n в репозитории git.

Быстрый и дешевый способ использования локализаций-это передача параметров экземпляру timepicker:

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

Однако, если вы планируете широко использовать timepicker, вам нужно будет включить (построить свою собственную) локализацию. Это просто присвоение тех же переменных объекту.

Как вы видите в примере ниже, мы поддерживаем отдельный объект для timepicker. Таким образом, мы не связаны с какими-либо будущими изменениями в 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']);

Теперь все, что вам нужно сделать, это позвонить timepicker и использовать русскую локализацию. Как правило, вам нужно только включить файл локализации, он будет setDefaults () для вас.

Начиная с версии 1.4.5 включен объединенный файл всех доступных локализаций. Этот файл не вызывает setDefaults (), поэтому вам нужно будет передать или объединить с вашими опциями.

$('#example123').timepicker($.timepicker.regional['ru']);

Файлы локализации для datepicker обычно доступны в Ваших загрузках jQueryUI.

 

Основные Настройки

Добавить простой datetimepicker, чтобы элемент управления datepicker в jQuery пользовательского интерфейса

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

Добавить только элемента управления datepicker:

$('#basic_example_2').timepicker();

Формат времени:

$('#basic_example_3').datetimepicker({
	timeFormat: "hh:mm tt"
});

Timepicker поставляется с коллекцией файлов локализации и одним комбинированным файлом со всеми доступными локализациями. $.элемента управления datepicker.regional ["ваш код локализации здесь"] - это простой объект с предустановленными опциями:

$('#basic_example_4').timepicker(
	$.timepicker.regional['es']
);

Использование Часовых Поясов

Самое простое использование часового пояса:

$('#timezone_example_1').datetimepicker({
	timeFormat: 'hh:mm tt z'
});

Определите собственные опции часового пояса:

$('#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' } 
		]
});

Модификации ползунка

Добавить сетку к каждому ползунку:

$('#slider_example_1').timepicker({
	hourGrid: 4,
	minuteGrid: 10,
	timeFormat: 'hh:mm tt'
});

Задать шаг интервала ползунков:

$('#slider_example_2').datetimepicker({
	timeFormat: 'HH:mm:ss',
	stepHour: 2,
	stepMinute: 10,
	stepSecond: 10
});

Добавить подключаемый модуль sliderAccess для сенсорных устройств:

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

Использовать выпадающие списки вместо ползунков. По умолчанию, если ползунок недоступен, будет использоваться раскрывающийся список.

$('#slider_example_4').datetimepicker({
	controlType: 'select',
	timeFormat: 'hh:mm tt'
});

Использует один раскрывающийся список вместо ползунков.

$('#slider_example_4andHalf').datetimepicker({
	controlType: 'select',
	oneLine: true,
	timeFormat: 'hh:mm tt'
});

Создать собственный элемент управления, реализуя методы создания, опции и значения. Если требуется использовать новый элемент управления для всех экземпляров, используйте файл $.timepicker.setDefaults ({controlType: myControl}). Здесь мы реализуем элемент управления spinner (jQuateUI 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
						// Не вызывать при использовании API и не нажимать клавишу
						if(e.originalEvent !== undefined)
							tp_inst._onTimeChange();
						tp_inst._onSelectHandler();
					},
				spin: function(e,ui){ // события вращения
						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_example_1').datetimepicker({
	altField: "#alt_example_1_alt"
});

С датой и временем в обоих случаях:

$('#alt_example_2').datetimepicker({
	altField: "#alt_example_2_alt",
	altFieldTimeOnly: false
});

Отформатировать поле altField по-другому:

$('#alt_example_3').datetimepicker({
	altField: "#alt_example_3_alt",
	altFieldTimeOnly: false,
	altFormat: "yy-mm-dd",
	altTimeFormat: "h:m t",
	altSeparator: " @ "
});

С встроенным режимом с использованием altField:

$('#alt_example_4').datetimepicker({
	altField: "#alt_example_4_alt",
	altFieldTimeOnly: false
});

Ввод Времени

Позволяет ввести время, отображаемое внутри средства выбора.

$('#input_example_1').datetimepicker({
	timeInput: true,
	timeFormat: "hh:mm tt"
});

Не показывайте никаких ползунков, только ввод времени.

$('#input_example_2').datetimepicker({
	timeInput: true,
	timeFormat: "hh:mm tt",
	showHour: false,
	showMinute: false
});

Временные Ограничения

Установите минимальный / максимальный час каждой даты:

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

Задать минимальную/максимальную дату в числовом выражении:

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

Задать минимальную/максимальную дату и время с помощью объекта Date:

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

Диапазоны времени

Ограничить дату начала и окончания с помощью событий onSelect и onClose для получения дополнительных возможностей управления функциями:

Для получения дополнительных примеров и дополнительных сведений об использовании воспользуйтесь электронной книгой Handling Time.

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 также включает в себя некоторые методы ярлыков для диапазонов:

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

Чтобы использовать только время для временного диапазона, используйте $.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
	}
);

Даже несмотря на то, что этот плагин фокусируется на datetime, он также предоставляет функцию dateRange:

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

Утилиты

Получить и задать Datetime с помощью методов getDate и setDate. В этом примере часовой пояс используется для демонстрации восстановления часового пояса и вычисления смещений при получении и установке.

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

Используйте функцию утилиты для форматирования собственного времени. $.datepicker.formatTime (format, time, options)

format
Обязательно - перестановка строк используемого формата времени
time
Обязательно - hash: {Час, минута, секунда, миллисекунда, часовой пояс}
options
Необязательный - хэш любых вариантов в региональном переводе (ampm, amNames, pmNames..)

Возвращает строку времени в указанном формате.

$('#utility_example_2').text(
	$.datepicker.formatTime('HH:mm z', { hour: 14, minute: 36, timezone: '+2000' }, {})
);

Используйте функцию утилиты для синтаксического анализа форматированного времени. $.datepicker.parseTime (format, timeString, options)

format
Обязательно - перестановка строк используемого формата времени
time
Обязательно - строка времени, соответствующая формату, заданному в параметре 1
options
Необязательный - хэш любых вариантов в региональном переводе (ampm, amNames, pmNames..)

Возвращает объект с часами, минутами, секундами, миллисекундами, часовым поясом.

$('#utility_example_3').text(JSON.stringify( 
	$.datepicker.parseTime('HH:mm:ss:l z', "14:36:21:765 +2000", {}) 
));

Никаких мыслей по поводу “Добавление Timepicker к JQuery UI DatePicker”