Автор: Gennady
Эту штуку можно часто встретить, когда сталкиваешься с заполнением форм, там где требуется ввести дату или диапазон дат в нужном формате. Пользователь, он же обязательно ошибется и введет дату не в том формате, потом будет соображать, где ошибка, а потом и вовсе уйдет, не заполнив форму… Вот для того, чтобы сделать выбор даты очень простым и удобным и предназначен этот UI jQuery. Календарь, или что точнее datepicker…
Как всегда для начала демонстрация примеров, а затем разберемся, как это использовать у себя. Клик по текстовому полю слева заставит работать календарь с выбором одной даты. Справа — календарь с выбором диапазона дат.
Demo
исходном коде примера Вы сможете посмотреть стилевую таблицу, отвечающую за отображение календаря и при необходимости отредактировать ее под свой дизайн. Эта часть кода выделена комментариями /* Стили для jQuery UI Datepicker */.
HTML-код не представляет собой ничего интересного — это простые текстовые поля ввода. Не забудьте только, что наш скрипт будет обращаться к этим элементам по их идентификаторам.
И наконец приведу очень простой код, который будет вызывать UI Datepicker:
Элементу с идентификатором #example назначен простой календарь с выбором только одной даты, т.е. это настройки по умолчанию.
Для элемента #exampleRange заданы опции:
rangeSelect: true — как раз и задает возможность выбора диапазона дат.
yearRange: '2000:2010' — установка диапазона дат календаря.
firstDay: 1 — задает первый день недели, где 1 — это понедельник.
Вообще настроек масса. Это и установка начальной даты, которая будет выбрана при старте календаря, и возможность установки минимальной и максимальной разрешенной для выбора даты, и даже возможность через опции задать название дней и месяцев на родном языке и многое другое. Полный перечень можно найти здесь.
Но, честно говоря мне показалось более уместным задать некоторые настройки непосредственно в самом файле ui.datepicker.js, благо сделать это совсем несложно. Тем более, что оригинальный файл, который можно скачать на сайте разработчиков содержит все названия на английском языке, а мы будем использовать русский. Сделать это довольно просто. Надо открыть файл в текстовом редакторе и сделать совсем небольшой перевод функции Datepicker().
Кому это покажется сложным, может воспользоваться моим переводом. В архив примера включен файл datepicker.translate.js, в котором и содержится перевод.
Эту штуку можно часто встретить, когда сталкиваешься с заполнением форм, там где требуется ввести дату или диапазон дат в нужном формате. Пользователь, он же обязательно ошибется и введет дату не в том формате, потом будет соображать, где ошибка, а потом и вовсе уйдет, не заполнив форму… Вот для того, чтобы сделать выбор даты очень простым и удобным и предназначен этот UI jQuery. Календарь, или что точнее datepicker…
Как всегда для начала демонстрация примеров, а затем разберемся, как это использовать у себя. Клик по текстовому полю слева заставит работать календарь с выбором одной даты. Справа — календарь с выбором диапазона дат.
Demo
Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.
исходном коде примера Вы сможете посмотреть стилевую таблицу, отвечающую за отображение календаря и при необходимости отредактировать ее под свой дизайн. Эта часть кода выделена комментариями /* Стили для jQuery UI Datepicker */.
HTML-код не представляет собой ничего интересного — это простые текстовые поля ввода. Не забудьте только, что наш скрипт будет обращаться к этим элементам по их идентификаторам.
И наконец приведу очень простой код, который будет вызывать UI Datepicker:
Элементу с идентификатором #example назначен простой календарь с выбором только одной даты, т.е. это настройки по умолчанию.
Для элемента #exampleRange заданы опции:
rangeSelect: true — как раз и задает возможность выбора диапазона дат.
yearRange: '2000:2010' — установка диапазона дат календаря.
firstDay: 1 — задает первый день недели, где 1 — это понедельник.
Вообще настроек масса. Это и установка начальной даты, которая будет выбрана при старте календаря, и возможность установки минимальной и максимальной разрешенной для выбора даты, и даже возможность через опции задать название дней и месяцев на родном языке и многое другое. Полный перечень можно найти здесь.
Но, честно говоря мне показалось более уместным задать некоторые настройки непосредственно в самом файле ui.datepicker.js, благо сделать это совсем несложно. Тем более, что оригинальный файл, который можно скачать на сайте разработчиков содержит все названия на английском языке, а мы будем использовать русский. Сделать это довольно просто. Надо открыть файл в текстовом редакторе и сделать совсем небольшой перевод функции Datepicker().
Кому это покажется сложным, может воспользоваться моим переводом. В архив примера включен файл datepicker.translate.js, в котором и содержится перевод.
| Ist. |
