Использование плагина DatePicker библиотеки jQuery UI

datepicker

DatePicker — это мощный и простой в использовании  jQuery плагин, который позволяет добавлять к простому  текстовому полю виджет — календарь для выбора даты.

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

Установка и подключение

Перед непосредственным использованием необходимо скачать jQuery UI (http://jqueryui.com/download) . Предположим, мы скачали бибилиотеку, и разместили ее в папку  js/jquery-ui-1.8.17.custom. Теперь нужно сделать следующие включения (желательно в <head>) в таком порядке:

<!-- Стили datepicker -->
<link type="text/css" href="js/jquery-ui-1.8.17.custom/css/redmond/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<!-- Скрипт datepicker -->
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom/js/jquery-ui-1.8.17.custom.min.js"></script>

Если нужен язык, отличный от английского, вставляем ссылку на скрипт локализации:

<script type="text/javascript" src="js/jquery-ui-1.8.17.custom/js/jquery.ui.datepicker-ru.js"></script>

Где скачать файлы локализации?

Нужный вам файл локализации можно скачать с SVN репозитория. Для начала перейдите по ссылке http://jquery-ui.googlecode.com/svn/tags/, зайдите в подпапку соответствующую вашей версии плагина DatePicker (в нашем примере это 1.8.17), далее в папку «ui», а в ней в подпапку «i18n». Вот тут то и выбираем нужный файл локализации. Таким образом, полная ссылка на файл русской локализации использованный в нашем примере можно скачать тут: http://jquery-ui.googlecode.com/svn/tags/1.8.17/ui/i18n/jquery.ui.datepicker-ru.js.

Привязка  к текстовому полю

После включений, пишем скрипт привязки datepicker-а к текстовому полю. Перед прикреплением скрипта, необходимо сконфигурировать параметры локализации:

$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
$.datepicker.setDefaults( $.datepicker.regional[ "ru" ] ); // Тут индекс соответствует необходимому языку.

Если необходимо просто прикрутить стандартный datepicker к одному полю, то делаем это так:

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

Дальше занимаемся тем, что конфигурируем datepicker под наши нужды с помощью опций, которые можно задавать при создании. Например, можем поменять формат даты и задать минимальную дату:

$(function() {
    $( "#datepicker" ).datepicker({
        dateFormat: 'dd.mm.yy',
	minDate: new Date()
    })
});

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

Согласование двух дат

Теперь хочу остановиться на одном интересном и часто используемом варианте использования datepicker, а именно когда надо обпеспечить то, что выбрав две даты, одна из них будет точно меньше другой. Это может понадобится , например, в форме бронирования номера в отеле, где пользователь выбирает дату заезда и дату выезда. Само собой, что первая дата должна быть раньше, или по крайней мере совпадать со второй. Делается это так:

var dates = $( "#date_from, #date_to" ).datepicker({
			minDate: new Date(),
			onSelect: function( selectedDate ) {
				var option = this.id == "date_from" ? "minDate" : "maxDate",
					instance = $( this ).data( "datepicker" ),
					date = $.datepicker.parseDate(
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings );
				dates.not( this ).datepicker( "option", option, date );
			}

});

Как вы наверно догадались, #date_from, #date_to — это ID полей соответствующих меньшей и большей дате соответственно.

Также обратите внимание на ID date_from в функции, привязанной к событию onSelect — это ID меньшей даты. Если внимательно посмотрите скрипт, то поймете зачем это нужно. Хотя вам достаточно полностью скопировать этот скрипт, заменить элементы, выделенные жирным, на свои ID, и все заработает!

4 комментариев

  1. Murad:

    Добрый день, а где можно скачать файл локализации? пожалуйста, дайте ссылку

    • Алексей Ярощук:

      Спасибо что заметили не работающую ссылку. Обновил статью, добавив раздел «Где скачать файлы локализации?», в котором все подробно объяснил.

  2. Александр:

    Подскажите пожалуйста, где можно скачать файл локализации для Datepicker 1.11.0 ?

  3. Евгений:

    Непонятно, где задаётся значение «maxDate» в скрипте согласования двух дат.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>