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

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

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

В раздел HEAD понадобится подключить всего два файла: библиотеку jQuery – jquery-1.2.1.js и файл ui.datepicker.js

[/html]

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

[html]

В исходном коде примера Вы сможете посмотреть стилевую таблицу, отвечающую за отображение календаря и при необходимости отредактировать ее под свой дизайн. Эта часть кода выделена комментариями /* Стили для 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, в котором и содержится перевод.

Если найдете время оставить отзыв – спасибо!

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru