Плагин DATETIMEPICKER для сайта — инструкция, настройка, инициализация
DateTimePicker – удобный и легкий в использовании плагин для быстрой подстановки даты и времени в поля ввода.
DateTimePicker — удобный и легкий в использовании плагин для быстрой подстановки даты и времени в поля ввода. Очень полезен при многократном заполнении контента, избавляет пользователя от рутины рукописного ввода дат и времени , предоставляя возможность осуществлять ввод времени в поля форм "в два клика" без переключения с клавиатуры.
Отличительные особенности и возможности плагина DateTimePicker:
- Простой и удобный интерфейс.
- Удобный и быстрый ввод времени "в два клика" (Использование клавиатуры не обязательно).
- Поддержка сенсорных экранов.
- Умное позиционирование на экране, не заслоняющее поле ввода.
Плагин DateTimePicker состоят из основных частей:
- Демонстрационная HTML разметка.
- JQuery скрипт с кодом плагина.
- Файл стилей.
Пример установки плагина DateTimePicker
Скачайте архив с плагином и скопируйте его содержимое в каталог вашего сайта. Для работы скрипта обязательно наличие подключенной библиотеки jQuery.
Инициализация и настройка плагина
Подключите к документу фреймворк jQuery и сам плагин
<link rel="stylesheet" href="/css/jquery.datetimepicker.css">
<script src="/js/jquery.js"></script>
<script src="/js/jquery.datetimepicker.js"></script>Для подключения плагина к полю ввода, достаточно прописать в нем селектор:
<form action="/">
<input class="date" type="text" name="name"><br>
<button type="submit" name="submitbtn" value="Отправить">Отправить</button>
</form>Пример инициализации плагина:
<script>
$('.date').datetimepicker({
lang:'de',
i18n:{de:{
months:['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
dayOfWeek:["So.", "Mo", "Di", "Mi", "Do", "Fr", "Sa."]
}},
timepicker:false,
format:'d.m.Y'
});
</script>DateTimePicker — мультиязычный плагин с поддержкой 3 языков: английского, русского и немецкого. Выбрать язык, а также другие настраиваемые параметры, можно при инициализации. Полный список доступных параметров представлен ниже.
Полный список параметров
|
Название |
default |
Назначение |
Пример использования |
|
value |
null |
Задает текущее значение datetimepicker. Если оно задано, то input.value игнорируется |
{ value: 12.03.2013, |
|
lang |
en |
Язык на котором отображаются дни недели и месяцы. В плагин встроены 3 языка: английский - en, немецкий - de и русский - ru |
{ lang: 'ru', 'de', 'en' } |
|
format |
Y/m/d H:i |
Основной формат времени. Используя этот параметр, плагин переводит дату указанную в value в свой формат, с которым в дальнейшем оперирует. Формат, идентичен тому, который использует php в функции date. Полный список можно посмотреть в документации. |
{ format: 'H' } // отображаем только часы |
|
formatDate |
Y/m/d |
Это служебный формат даты. Используется для того, чтобы плагин верно интерпретировал значения опций minDate и maxDate, о которых будет написано ниже |
{ formatDate: 'd.m.Y' } |
|
formatTime |
H:i |
Аналогично formatDate . Используется для того, чтобы плагин верно интерпретировал значения опций minTime и maxTime, о которых будет написано ниже |
{ formatTime: 'H' } // только час |
|
step |
60 |
В TimePicker'е список вариантов выбора времени выводится с определенным интервалом в минутах. По умолчанию - это 1 час (60 минут). |
{ step: 5 } |
|
closeOnDateSelect |
0 |
Если отображаются и DatePicker и TimePicker то, при выборе даты плагин не закрывается. Делает он это, только после выбора времени. Если задано true, то плагин будет закрыт при выборе даты. Если false, то даже если timepicker не отображается, плагин закрыт не будет. |
{ closeOnDateSelect: true } |
|
closeOnWithoutClick |
true |
Закрывать плагин если пользователь не выбрав дату, кликнул где-то вне плагина. |
{ closeOnWithoutClick: false } |
|
timepicker |
true |
Отображать TimePicker. Может принимать false, только если datepicker=true |
{ timepicker: false } |
|
datepicker |
true |
Отображать DatePicker. Может принимать false, только если timepicker=true |
{ datepicker: false } |
|
minDate |
false |
Опция, предназначенная для ограничения нижней границы выбора даты. К примеру, вы заказываете такси, и Вам необходимо выбрать дату. Очевидно, что дату можно выбирать только начиная с текущего дня. Если задать, как 0, то будет использована текущая дата. |
{ minDate: 0 } // текущая дата |
|
maxDate |
false |
Аналогично minDate, верхняя граница даты. 0 - текущая дата |
{ maxDate: 0 } // текущая дата |
|
minTime |
false |
Аналогично minDate, но для TimePicker'a |
{ minTime: 0 } // текущая дата |
|
maxTime |
false |
Аналогично maxDate, но для TimePicker'а |
{ maxTime: 0 } // текущая дата |
|
allowTimes |
[] |
Опция, которая задает доступное для выбора время. К примеру, выбор автобусного рейса может быть только в определенное время. При этом значения minTime и maxTime игнорируются. |
{ allowTimes: ['09:00','11:00','12:00','21:00'] } |
|
opened |
false |
При true плагин будет открыт сразу после загрузки страницы |
|
|
inline |
false |
При true плагин заменяет собой <input> |
|
|
onSelectDate |
function(){} |
Вызывается при выборе даты в DatePicker'е. Имеет 3 параметра. Сам плагин, текущее время, с которым плагин работает и ссылка на элемент input |
onSelectDate: function($dtp,current,input){ |
|
onSelectTime |
function(){} |
Аналогично onSelectDate для TimePicker |
|
|
onChangeMonth |
function(){} |
Вызывается при смене месяца в DatePicker |
|
|
onChangeTime |
function(){} |
При прокрутке времени |
|
|
onShow |
function(){} |
При показе плагина |
|
|
onClose |
function(){} |
Перед закрытием плагина |
|
|
withoutCopyright |
false |
Опция, для отключения пока ссылки на сайт плагина |
|
|
inverseButton |
false |
Инвертирует прокрутку |
|
|
hours12 |
false |
12-ти часовой формат времени |
|
|
dayOfWeekStart |
0 |
Начало недели в DatePicker. По умолчанию с Воскресения - 0. |
|