Добавление datepicker — виджет календаря на jQuery

20.08.2012 Ромчик

Доброго времени суток. На днях столкнулся с проблемой — пользователь в input должен указать дату в определенном формате. Не долго ломая голову решил сделать так, чтобы при нажатии на input появлялся календарь. Реализовать это не сложно, но зачем? Если есть замечательный виджет календаря на jQuery — datepicker. Дальше речь и пойдет об установке, настройке и подключения datepicker.

Для начала я приведу наглядный пример того, что я хочу сделать:

Ну, и понятно, что после выбора даты календарь исчезает, а в текстовом поле появляется выбранная дата.
Приступим к реализации.

Установка и подключение календаря — виджета Datepicker.

Заходим на официальный сайт jQueryUI. Чтобы ничего лишнего не качать — жмем “Deselect all components”

И выбираем “Core”:

Это сам jQuery. Дальше выбираем необходимый виджет, в нашем случае это “Datepicker”:

На этом в принципе все. Но у данного виджета есть предустановленные отображения (темы)
В правом верхнем углу Вы можете выбрать подходящую тему, выбрать версию виджета и нажать “Download”:

На следующем этапе распаковываем архив.
Давайте сразу договоримся о структуре нашей страницы:

Папка css — тут хранятся стили для страницы
Папка js — тут хранятся javascript для страницы
Файл index.php — файл нашей страницы

Теперь файлы jquery-1.8.0.min.js и jquery-ui-1.8.23.custom.min.js из скачанного архива помещаем в папку js. Теперь папку с названием темы для datepicker (в моем случае это ui-lightness) из папки css скачанного архива помещаем в папку css для нашей страницы. На этом установка календаря — виджета jQuery Datepicker закончена.
Давайте приступим к подключению Datepicker. Как я уже говорил, что я хочу вызывать календарь по клику на текстовом поле. Добавим к нашему input id=”datepicker” для того, чтобы мы могли с легкостью к нему обратиться.

<input type="text" id="datepicker" />

Теперь напишем небольшой скрипт на jQuery, который будет вызывать календарь при клике по данному тестовому полю:

<script type="text/javascript">
        $(function(){
            $("#datepicker").datepicker();
       });
    </script>

Сохраняем и проверяем.

Настройка календаря — виджета на jQuery Datepicker.

Первое, что настроим это тему для нашего календаря. Ниже я приведу таблицу с названием темы для Datepicker и ее отображение:

UI lightness
UI darkness
Smoothness
Start
Redmond
Sunny
Overcast
Le Frog
Flick
Pepper Grinder
Eggplant
Dark Hive
Cupertino
South Street
Blitzer
Humanity
Hot Sneaks
Excite Bike
Vader
Dot Luv
Mint Chock
Black Tea
Trontastic
Swanky Purse

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

Параметр	Описание	Пример
disable: true(false) По умолчанию: false	Включение или отключение datepicker	$( «.selector» ).datepicker({ disabled: true });
altField По умолчание: пусто	Указывается селектор элемента, который будет обновляться	$( «.selector» ).datepicker({ altField: «#actualDate» });
altFormat По умолчанию: пусто	dateFormat — формат даты, который будет использоваться для altField	$( «.selector» ).datepicker({ altFormat: «yy-mm-dd» });
appendTex По умолчанию: пусто	Текст, который будет отображен после каждого поля даты	$( «.selector» ).datepicker({ appendText: «(yyyy-mm-dd)» });
autoSize: true(false) По умолчанию: false	Авторазмер элемента	$( «.selector» ).datepicker({ autoSize: true });
dateFormat: По умолчанию: mm/dd/yy В таблице ниже я приведу какие значения может принимать.	Указывает формат даты	$( «.selector» ).datepicker({ dateFormat: «yy-mm-dd» });
dayNames По умолчанию [«Sunday», «Monday», «Tuesday», «Wednesday», «Thursday», «Friday», «Saturday»]	Полное название дней недели	$( «.selector» ).datepicker({ dayNames: [«Понедельник», «Вторник», «Среда», «Четверг», «Пятница», «Суббота», «Воскресенье»] });
dayNamesMin По умолчанию: [«Su», «Mo», «Tu», «We», «Th», «Fr», «Sa»]	Сокращенное название дней недели	$( «.selector» ).datepicker({ dayNamesMin: [“Пн”,”Вт”,”Ср”,”Чт”,”Пт”,”Сб”,”Вс”] });
dayNamesShort По умолчанию: [«Sun», «Mon», «Tue», «Wed», «Thu», «Fri», «Sat»]	Укороченноеназвание дней недели	$( «.selector» ).datepicker({ dayNamesShort: [«Пон», «Вто», «Сре», «Чет», «Пят», «Суб», «Вос»] });
defaultDate По умолчанию: пусто В качестве параметров использует параметры dateFormat	Указывает дату по умолчанию	$( «.selector» ).datepicker({ defaultDate: +7 });
monthNames По умолчанию: [«January», «February», «March», «April», «May», «June», «July», «August», «September», «October», «November», «December»]	Полное название месяцев	$( «.selector» ).datepicker({ monthNames: [«Январь»,»Февраль»,»Март»,»Апрель»,»Май»,»Июнь»,»Июль»,»Август»,»Сентябрьr»,»Октябрь»,»Ноябрь»,»Декабрь»] });
monthNamesShort По умолчанию [«Jan», «Feb», «Mar», «Apr», «May», «Jun», «Jul», «Aug», «Sep», «Oct», «Nov», «Dec»]	Сокращенное название месяцев	$( «.selector» ).datepicker({ monthNamesShort: [«Янв»,»Фев»,»Мар»,»Апр»,»Май»,»Июн»,»Июл»,»Авг»,»Сен»,»Окт»,»Ноя»,»Дек»] });

Тут я привел только основные параметры, которые могут Вам пригодиться. Если Вы хотите увидеть полный список параметров, то вперед к официальной документации
Теперь давайте остановимся на значениях, которые принимает параметр dateFormat

Параметр	Значение
d	день месяца
dd	день месяца — две цифры
o	номер дня в году
oo	номер дня в году — три цифры
D	короткое названия дня недели
DD	полное название дня недели
m	номер месяца в году
mm	номер месяца в году — две цифры
M	короткое название месяца
MM	полное название месяца
y	номер кода — две цифры
yy	номер года — четыре цифры
любое другое	тек

Вот теперь все.
Мы с Вами рассмотрели установку, подключение и настройку одного из замечательных виджетов jQuery — виджет календаря datepicker.
Надеюсь, что статья Вам понравилась. Если у Вас возникли вопросы, то пишите в комментариях.
А на этом я с Вами прощаюсь и удачной web-разработки.

Понравилась статья? Поделись с друзьями.

Основы

Fedor11111 - 30.08.2012 в 20:00

норм