Добавление datepicker — виджет календаря на jQuery
Доброго времени суток. На днях столкнулся с проблемой — пользователь в 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-разработки.
норм
Приветствую! урок интересный но воот интересует вопрос — а как сделать чтоб календарь всегда был виден то есть при загрузке страницы он сразу отображался а не при клике? Заранее благодарен.
Поместите datepicker в div, т.е. в статье мы делали так
, чтобы календарь сразу отображался сразу вместо input сделайте его в div
А как ограничить выбор дат когда этот виджет открывается в режиме диалог???
minDate: «0», //Минимальная дата которую можно выбрать, т.е. 0 дней от «сейчас»
maxDate: «+3m» //Максимальная дата которую можно выбрать, т.е. + 3 месяца от «сейчас»
такой вопрос — как добавить стрелки листания года?
У меня на странице два input поля и календарь в div.
Нужно чтобы при выборе даты в календаре в одном инпуте выводился день, в другом месяц.
Как это реализовать?
Подскажите, а как дальше получить выбранные пользователем дату и время и через form отправить на почту?
А можно ли этот календарь русифицировать? Чтобы месяца и дни недели были на русском языке!?
Можно
Спасибо, что то долго я не мог его верно сделать. Спасибо)