Поиск

Выбор времени в UI Datepicker

Плагин Timepicker легко добавляет возможность выбора времени в UI Datepicker.
Сайт разработчика, GitHub.

Подключение

<link rel="stylesheet" href="/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="/jQuery-Timepicker-Addon/dist/jquery-ui-timepicker-addon.min.css">
<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/jQuery-Timepicker-Addon/dist/jquery-ui-timepicker-addon.min.js"></script>

<input type="text" id="datepicker" placeholder="Выберите дату и время">
HTML
/* Локализация 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 */
$.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']);

$(function(){
	$("#datepicker").datetimepicker();
});
JS

Результат

Только выбор времени

Плагин можно вывести без календаря, меняется только вызов плагина, но скрипт jquery-ui.min.js всё же нужен.

$(function(){
	$("#datepicker").timepicker();
});
JS
24.09.2019, обновлено 16.10.2019 400

Другие публикации

В данном примере описано как вывести многоуровневый список checkbox и radio button из БД с помощью PHP функций...
09.11.2017 3499
Сделать галерею которая заполнит все пространство фотографиями разного размера можно с помощью jQuery плагина...
04.04.2019 950
date($format, $timestamp) – форматирует дату/время по шаблону, где...
28.06.2019 1398
Smarty это компилирующий обработчик шаблонов для PHP позволяющий отделить логику и HTML-верстку веб-приложения.
12.07.2018 2955
Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит...
20.01.2017 20122
Fancybox 2 не только плагин галерей, но и модальных окон, рассмотрим подробнее.
19.09.2019 717