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

Ромчик
11

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

 

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

Пример работы datepicker

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

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

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

Снимаем выделение со всех виджетов

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

Выбор ядра jQuery

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

Выбор виджета datapicker

 

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

Выбор темы и версии виджета

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

  1. Папка css — тут хранятся  стили для страницы
  2. Папка js — тут хранятся  javascript для страницы
  3. Файл 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 Тема для datepicker - UI lightness
UI darkness Тема для datepicker - UI darkness
Smoothness Тема для datepicker - Smoothness
Start Тема для datepicker - Start
Redmond Тема для datepicker - Redmond
Sunny Тема для datepicker - Sunny
Overcast Тема для datepicker - Overcast
Le Frog Тема для datepicker - Le Frog
Flick Тема для datepicker - Flick
Pepper Grinder Тема для datepicker - Pepper Grinder
Eggplant Тема для datepicker - Eggplant
Dark Hive Тема для datepicker - Dark Hive
Cupertino Тема для datepicker - Cupertino
South Street Тема для datepicker - South Street
Blitzer Тема для datepicker - Blitzer
Humanity Тема для datepicker - Humanity
Hot Sneaks Тема для datepicker - Hot Sneaks
Excite Bike Тема для datepicker - Excite Bike
Vader Тема для datepicker - Vader
Dot Luv Тема для datepicker - Dot Luv
Mint Chock Тема для datepicker - Mint Chock
Black Tea Тема для datepicker - Black Tea
Trontastic Тема для datepicker - Trontastic
Swanky Purse Тема для datepicker - 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-разработки.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • Fedor11111 - 30.08.2012 в 20:00

    норм

  • ditoglez - 20.09.2012 в 14:14

    Приветствую! урок интересный но воот интересует вопрос — а как сделать чтоб календарь всегда был виден то есть при загрузке страницы он сразу отображался а не при клике? Заранее благодарен.

    • Roman - 20.09.2012 в 20:50

       Поместите datepicker в div, т.е. в статье мы делали так
      , чтобы календарь сразу отображался сразу вместо input сделайте его в div

  • Irinakotipalo - 06.11.2012 в 19:04

    А как ограничить выбор дат когда этот виджет открывается в режиме диалог???

    • Константин - 18.08.2013 в 22:13

      minDate: «0», //Минимальная дата которую можно выбрать, т.е. 0 дней от «сейчас»
      maxDate: «+3m» //Максимальная дата которую можно выбрать, т.е. + 3 месяца от «сейчас»

  • иван - 23.12.2013 в 20:56

    такой вопрос — как добавить стрелки листания года?

  • Виктор_Орен - 02.07.2014 в 13:52

    У меня на странице два input поля и календарь в div.
    Нужно чтобы при выборе даты в календаре в одном инпуте выводился день, в другом месяц.
    Как это реализовать?

  • Илья - 11.08.2014 в 16:22

    Подскажите, а как дальше получить выбранные пользователем дату и время и через form отправить на почту?

  • Станислав - 27.10.2015 в 15:37

    А можно ли этот календарь русифицировать? Чтобы месяца и дни недели были на русском языке!?

  • Ромчик - 27.10.2015 в 15:38

    Можно

  • Максим - 02.02.2016 в 17:10

    Спасибо, что то долго я не мог его верно сделать. Спасибо)

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика