• jQuery
• jQuery UI
• DatePicker
• Timepicker

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

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

$('#example123').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: 'Миллисекунды',
	timezoneText: 'Часовой пояс',
	currentText: 'Сейчас',
	closeText: 'Закрыть',
	timeFormat: 'HH:mm',
	amNames: ['AM', 'A'],
	pmNames: ['PM', 'P'],
	isRTL: false
};
$.timepicker.setDefaults($.timepicker.regional['ru']);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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