jQuery: datepicker - календарь для выбора дат

Автор: Gennady
Источник: habrahabr

Автор: Gennady

Эту штуку можно часто встретить, когда сталкиваешься с заполнением форм, там где требуется ввести дату или диапазон дат в нужном формате. Пользователь, он же обязательно ошибется и введет дату не в том формате, потом будет соображать, где ошибка, а потом и вовсе уйдет, не заполнив форму... Вот для того, чтобы сделать выбор даты очень простым и удобным и предназначен этот UI jQuery. Календарь, или что точнее datepicker...

Как всегда для начала демонстрация примеров, а затем разберемся, как это использовать у себя. Клик по текстовому полю слева заставит работать календарь с выбором одной даты. Справа - календарь с выбором диапазона дат.



Demo

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

исходном коде примера Вы сможете посмотреть стилевую таблицу, отвечающую за отображение календаря и при необходимости отредактировать ее под свой дизайн. Эта часть кода выделена комментариями /* Стили для jQuery UI Datepicker */.

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

И наконец приведу очень простой код, который будет вызывать UI Datepicker:
<script type="text/javascript">
$(document).ready(function(){
// ---- Календарь -----
$("#example").attachDatepicker();
$("#exampleRange").attachDatepicker({
rangeSelect: true,
yearRange: "2000:2010",
firstDay: 1
});
// ---- Календарь -----
});
</script>

Элементу с идентификатором #example назначен простой календарь с выбором только одной даты, т.е. это настройки по умолчанию.
Для элемента #exampleRange заданы опции:
rangeSelect: true - как раз и задает возможность выбора диапазона дат.
yearRange: `2000:2010` - установка диапазона дат календаря.
firstDay: 1 - задает первый день недели, где 1 - это понедельник.
Вообще настроек масса. Это и установка начальной даты, которая будет выбрана при старте календаря, и возможность установки минимальной и максимальной разрешенной для выбора даты, и даже возможность через опции задать название дней и месяцев на родном языке и многое другое. Полный перечень можно найти здесь.

Но, честно говоря мне показалось более уместным задать некоторые настройки непосредственно в самом файле ui.datepicker.js, благо сделать это совсем несложно. Тем более, что оригинальный файл, который можно скачать на сайте разработчиков содержит все названия на английском языке, а мы будем использовать русский. Сделать это довольно просто. Надо открыть файл в текстовом редакторе и сделать совсем небольшой перевод функции Datepicker().
Кому это покажется сложным, может воспользоваться моим переводом. В архив примера включен файл datepicker.translate.js, в котором и содержится перевод.