jQuery: datepicker - календарь для выбора дат
Эту штуку можно часто встретить, когда сталкиваешься с заполнением форм, там где требуется ввести дату или диапазон дат в нужном формате. Пользователь, он же обязательно ошибется и введет дату не в том формате, потом будет соображать, где ошибка, а потом и вовсе уйдет, не заполнив форму... Вот для того, чтобы сделать выбор даты очень простым и удобным и предназначен этот UI jQuery. Календарь, или что точнее 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, в котором и содержится перевод.
Рекомендуем почитать
- jQuery для JavaScript-программистов
- jQuery Autocomplete: автозаполнение
- Делаем автозаполнение на JavaScript
- Создание изображений средствами PHP
- ExtJS 2.2 - полная поддержка Firefox 3, новые виджеты и другие нововведения
- Google создал интерфейс для AJAX-библиотек
- Быстрая форма обратной связи на PHP и jQuery