DateTimePicker – удобный и легкий в использовании плагин для быстрой подстановки даты и времени в поля ввода. Очень полезен при многократном заполнении контента, избавляет пользователя от рутины рукописного ввода дат и времени , предоставляя возможность осуществлять ввод времени в поля форм "в два клика" без переключения с клавиатуры.

Отличительные особенности и возможности плагина DateTimePicker:

Плагин DateTimePicker состоят из основных частей:

Пример установки плагина 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

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

 

Лучший способ сказать автору «СПАСИБО»рассказать друзьям или поделиться ссылкой!
Другие статьи:
Плагин маски ввода для input - jquery maskedinput - инструкция, настройка, инициализация

23/01/2019

В этой статье будет рассмотрено решение этой задачи с использованием плагина Masked Input, который отличается простотой и удобством в использовании.

Плагин маски ввода для input - jquery maskedinput - инструкция, настройка, инициализация
Публикация на стене Вконтакте средствами API - кросспостинг

24/03/2017

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

Публикация на стене Вконтакте средствами API - кросспостинг
Чтение excel на PHP - основные методы класса PHPExcel

03/11/2016

С помощью PHPExcel можно производить чтение и запись информации в файлы, форматировать их содержимое, выполнять операции с формулами, стилями и т.д.

Чтение excel на PHP - основные методы класса PHPExcel
TinyMCE вырезает теги - исключения для тегов TinyMCE

21/09/2016

Текстовый редактор TinyMCE в визуальном режиме при стандартной конфигурации обрезает некоторый теги и свойства.

TinyMCE вырезает теги - исключения для тегов TinyMCE
Cвойства и методы TinyMCE - вставка тегов, вывод значений

21/09/2016

Научимся вставлять теги в выделенный фрагмент текста, вставлять теги на место селектора в тексте и получать средствами JS HTML код отредактированного текста и текст без HTML сущностей.

Cвойства и методы TinyMCE - вставка тегов, вывод значений
Установка и настройка TinyMCE - инициализация и параметры

21/09/2016

Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений. Разработчиком этого полезного продукта является компания Moxiecode Systems AB.

Установка и настройка TinyMCE - инициализация и параметры
Установка и настройка jCarousel - параметры и методы

20/09/2016

В статье мы: познакомимся с каруселью; научимся интегрировать ее на свой сайт; познакомимся с основными параметрами инициализации; рассмотрим самые популярные свойства и методы классов jCarousel

Установка и настройка jCarousel - параметры и методы
Инструкция SMTP PHPMailer - свойства и методы класса

20/09/2016

Любой backend программист php сталкивается с задачей автоматизации почтовой рассылки на веб сайтах и многие, кто сталкивался с данной задачей впервые, вставали перед ключевым вопросом: "Писать или не писать smtp клиент с нуля?".

Инструкция SMTP PHPMailer - свойства и методы класса