Другой город
Начать проект

Плагин 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,
format: 'd.m.Y' }

lang

en

Язык на котором отображаются дни недели и месяцы. В плагин встроены 3 языка: английский - en, немецкий - de и русский - ru

{ lang: 'ru', 'de', 'en' }

format

Y/m/d H:i

Основной формат времени. Используя этот параметр, плагин переводит дату указанную в value в свой формат, с которым в дальнейшем оперирует. Формат, идентичен тому, который использует php в функции date. Полный список можно посмотреть в документации.

{ format: 'H' } // отображаем только часы
{ format: 'Y' } // год

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 } // текущая дата
{ minDate: '2013/12/03' }
{ minDate:'05.12.2013', formatDate:'d.m.Y' }

maxDate

false

Аналогично minDate, верхняя граница даты. 0 - текущая дата

{ maxDate: 0 } // текущая дата
{ maxDate: '2013/12/03' }
{ maxDate: '05.12.2013', formatDate: 'd.m.Y' }

minTime

false

Аналогично minDate, но для TimePicker'a

{ minTime: 0 } // текущая дата
{ minTime: '12:00' }
{ minTime: '13:45:34', formatTime: 'H:i:s' }

maxTime

false

Аналогично maxDate, но для TimePicker'а

{ maxTime: 0 } // текущая дата
{ maxTime: '12:00' }
{ maxTime: '13:45:34', formatTime: 'H:i:s' }

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){
alert(current.dateFormat('d/m/Y'));
}

onSelectTime

function(){}

Аналогично onSelectDate для TimePicker

 

onChangeMonth

function(){}

Вызывается при смене месяца в DatePicker

 

onChangeTime

function(){}

При прокрутке времени

 

onShow

function(){}

При показе плагина

 

onClose

function(){}

Перед закрытием плагина

 

withoutCopyright

false

Опция, для отключения пока ссылки на сайт плагина

 

inverseButton

false

Инвертирует прокрутку

 

hours12

false

12-ти часовой формат времени

 

dayOfWeekStart

0 

Начало недели в DatePicker. По умолчанию с Воскресения - 0.

 

Выберите город