jQuery UI календарь

Содержание материала:

Как сделать календарь с помощью jQuery UI

Для ввода даты в поле на сайте было бы удобно использовать календарь. Писать свой календарь на JavaScript было бы трудоемко и не разумно. Гораздо проще использовать уже готовое решение. В этой статье я и расскажу как сделать jQuery календарь быстро и с минимумом кода.

Для создания календаря нам понадобится:

  1. Библиотека jQuery, которую можно скачать к себе на сайт, либо подключить, например, c Google CDN В этой статье я использовал версию 2.2.4.
  2. Библиотека jQuery UI. Можете скачать полный набор, как предлагается по-умолчанию на странице, либо выбрать лишь нужные компоненты, в частности, нам нужен компонент Datepicker. Еще можно выбрать тему отличную от стандартной. Кроме того, библиотеку так же можно подключить с Google CDN
  3. Чтобы сделать календарь jQuery русским нам понадобится файл datepicker-ru.js который можно взять на GitHub или можете скачать готовый файл с нашего сайта.

Теперь всё необходимое есть, приведу код создания календаря Datepicker с помощью JQuery UI

Обратите внимание : файл русского языка datepicker-ru.js нужно подключать после jquery-ui.min.js

Исходник примера со всеми необходимыми файлами можете скачать с нашего сайта.

В результате, на экране мы увидим поле для ввода даты и при клике в это поле появляется календарь. Для стандартной темы оформления это выглядит так:

Datepicker обладает различными настройками и имеет несколько методов. Настройку календаря jQuery UI можно сделать 3 способами: либо перед инициализацией, во время или после инициализации.

Например, сделать чтобы месяц и год выбирались из выпадающего списка (указание опций до инициализации Datepicker):

Следующий пример: отобразить кнопку-картинку рядом с полем для ввода даты по нажатии на которую происходит открытие календаря (указание опций во время инициализации Datepicker)

Показать под календарем доп.панель кнопок (указание опций после инициализации Datepicker).

Посмотреть все опции и методы, которые есть у виджета Datepicker можно на сайте библиотеки jQuery UI.

Виджет выбора даты jQuery UI Datapicker

На одном из уроков мы научились как разными способами подключать библиотеку jQuery UI. Сегодня темой урока будет виджет выбора даты — jQuery UI Datapicker.

Зачем нужен этот виджет? Чтобы предоставить пользователю при вводе даты календарь, при заполнении формы ему не надо думать в каком формате вбивать даты. В свою очередь админ ресурса получает данные в одинаковом формате.

По этому адресу: https://jqueryui.com/datepicker/ вы увидите несколько вариантов виджета datapicker, мы рассмотрим только два основных.

jQuery UI Datepicker — Display month & year menus

Когда пользователь щёлкает мышкой в текстовое поле ввода input, появляется календарь с выбором даты и дополнительного меню с выбором месяца и года. Вариант с одной датой, подходит на сайтах, где клиент указывает, например дату своего визита.

HTML-код состоит из одиночного тега input с идентификатором «datapicker» обёрнутого в абзац — тег p. Вместо абзаца, этот input можно поместить в любой блочный элемент сайта.

Код jQuery необходимо скопировать (view source) и вставить на свой сайт, как в примере. После загрузки DOM дерева, будем получать элемент по идентификатору #datapicker в текстовое поле и вызывать метод .datepicker. Теперь надо в метод передать объект, в котором описать дополнительные настройки: changeMonth: true, changeYear: true. Теперь появилась возможность через выпадающий список выбрать месяц и год, это немного удобнее, чем делать аналогичный выбор через календарь.

$( function() <
$( «#datepicker» ).datepicker( <
changeMonth: true,
changeYear: true
>);
>);

jQuery UI Datepicker — Select a Date Range

Виджет Datapicker с выбором диапазона даты Date Range подходит сайтам с системой бронирования. Пользователь указывает в первом календаре начальную дату, а во втором календаре конечную. Создадим два текстовых поля input c идентификатором «from» и «to» и два label привязанные к своим текстовым полям.

Получаем элемент с идентификатором #from — первое текстовое поле, в нем вызываем метод datapicker.

$( function() <
var dateFormat = «mm/dd/yy»,
from = $( «#from» )
.datepicker(<

Зададим дату по умолчанию плюс одну неделю.

Возможность менять месяц с помощью выпадающего списка.

changeMonth: true,
numberOfMonths: 3 >)

Когда произойдет событие on, то есть пользователь что-нибудь выберет из выпадающего списка, то при смене выбранной даты находим второй datepicker и устанавливаем минимальную дату, равную выбранной.

.on( «change», function() <
to.datepicker( «option», «minDate», getDate( this ) );
>),
to = $( «#to» ).datepicker

При смене выбранной даты находим первый datepicker и устанавливаем максимальную дату, равную выбранной.

.on( «change», function() <
from.datepicker( «option», «maxDate», getDate( this ) );
>);

Весь код и визуальные примеры всех вариантов с разными параметрами виджета jQuery Datapicker, есть на сайте jqueryui.com.

jQuery UI Datepicker — Localize calendar

По умолчанию календарь отображается на английском языке, но это можно изменить, библиотека jQuery UI поддерживает мультиязычность.

Скачиваем нужный языковой файл на Github

Подключаем нужный языковой модуль в тег head.

Создаем текстовое поле для календаря и выпадающий список с id «locale» c перечислением нужных языков.

После загрузки DOM дерева, ищем объект datapicker. Меняем настройки для всех datepicker.

$( function() <
$( «#datepicker» ).datepicker( $.datepicker.regional[ «ru» ] );

Смена локализации для «datepicker».

$( «#locale» ).on( «change», function() <

Смена локализации при выборе нового значения в выпадающем списке.

$( «#datepicker» ).datepicker( «option»,
$.datepicker.regional[ $( this ).val() ] );
>);
> );

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Ion.Calendar 2.0.2
    jQuery-календарь и датапикер,
    основанный на библиотеке работы со временем — Moment.js

    Обратная связь и поддержка

    В случае обнаружения багов или недочетов в плагинах, воспользуйтесь разделом Issues в репозитории на GitHub

    Контакты

    Поддержать

    Реклама

    Описание

    • Ion.Calendar основан на мощной библиотеке для работы со временем — Moment.js.
    • Поддерживает все языки, форматы дат и возможности парсинга, что и Moment.js.
    • Календарь и датапикер в одном.
    • Может быть полностью видоизменен через CSS.
    • Календарь резиновый, может быть растянут под любой контейнер.
    • Поддерживает несколько независимо работающих календарей на одной странице.
    • Кроссбраузерная поддержка: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
    • Плагин поддерживает устройства с touch-экраном (iPhone, iPad, etc.).
    • Репозиторий на GitHub.
    • Плагин свободно распространяется на условиях лицензии MIT.

    Календарь на русском. Первый день недели — понедельник. Возвращает дату в принятом в России формате даты: День.Месяц.Год. Доступный дипазон лет: текущий год минус 80 лет.

    Календарь на английском. Первый день недели — воскресенье. Возвращает дату в формате ISO8601. Доступный диапазон лет: 1915-1995

    Календарь на японском. Первый день недели — воскресенье. Возвращает дату в локализованом формате. Доступный диапазон лет: текущий год минус 20 лет.

    Календарь на русском. Первый день недели — понедельник. Стрелочки спрятаны. Выполняет функцию при инициализации. Возвращает дату в локализованном формате. Доступный дипазон лет: текущий год минус 30 лет.

    Датапикер. Все поля имеют разные языки и настройки, установленные с помощью атрибутов data-*

    Зависимости

    Подключение

    • jQuery
    • moment-with-locales.min.js
    • ion.calendar.min.js
    • normalize.min.css — желательно, если он у вас еще не подключен
    • ion.calendar.css

    Создаем базовый контейнер:

    Или инициализируем календарь с параметрами:

    Календарь для выбора даты js: datepicker jquery UI

    В данной статье рассмотрим, как к простому полю в форме, привязать календарь для выбора даты (input type=»text») с помощью библиотеки jquery UI.

    Тут всё просто, подключим сначала библиотеку js и его стили css

    Далее, нам нужно будет создать текстовое поле с уникальным id, для привязки (можно и класс).

    Теперь вызываем небольший скрипт, для включения выбора даты данного поля.

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

    Чтобы поставить русский язык, скачайте следующий скрипт и подключите его. Скачать

    Подключить его нужно будет ниже подключаемого самого скрипта библиотеки, затем измените сам вызов для формы на следующий.

    Лучшая дюжина jQuery календарей и jQuery datepicker’ов

    02 марта 2010 42 Рубрика: AJAX, jQuery

    « Предыдущая запись
    Как выделить все чекбоксы одним кликом? JavaScript способ, и три способа на jQuery
    Следующая запись »
    Как оптимизировать SQL запросы с целью уменьшения нагрузки на сервер? 15 советов

    Календарь для движка сайта — вещь не только нужная, но и полезная. Помимо того, что они позволяют смотреть календарь (неужели?! — прим.ред.), они носят массу полезных функций (не может быть! — прим.ред.), начиная от обычной «пробы пипеткой» до составления календаря событий (да что вы говорите! — прим.ред.).

    В данной статье будет рассмотрено большинство плагинов календарей и datepicker’ов для jQuery. Однако в конце статьи вас будет ждать один плагин, не на jQuery, который я для себя отметил уже давно, и который проходить мимо мне не позволяет совесть. Итак…

    jQuery Date Pickers

    jQuery UI Datepicker. Пожалуй для jQuery это передовой календарь, а точнее datepicker. Работает везде и безоговорочно. Правда замечено в Опере 9.26 (в 10 нормально всё) и в ишаках ниже 7 включительно некоторая тормознутость. Однако это не меняет того, что работает он более чем исправно. Есть поддержка скинов. И, что немаловажно, поддержка кучи различных языков. Чтобы вы не искали, даю сразу линк .

    jQuery Datepicker. Основан на jQuery UI Datepicker, но отделён от него в связи с тем, что разработчики jQuery UI Datepicker захотели более простой функционал. То есть данный плагин обладает дополнительными функциями, которых у первого нет. Перечислять их нет смысла, нужно смотреть. Пробегитесь по ссылке с примерами по различным вкладкам и сами поймёте. Его возможности очень и очень радуют.

    Топ-пост этого месяца:  Как изучать и использовать JavaScript с удовольствием нюансы разработки

    jQuery date picker plug-in. Очень похож на предыдущего собрата, только функционал может быть чутка поменьше. Хотя не уверен в этом.

    Date Picker — jQuery plugin. Хотел бы я назвать этот плагин лучшим, но не могу, так как кроссбраузерность у него хромает. В Опере 9.26 календарь напрочь не откликается на воздействия, в Опере 10 у него проблемы с отображением (правда небольшие), в IE6 отображается криво насколько это возможно. Если вас всё это не смущает, то использовать крайне рекомендуется! Возможностей у него уйма, можете посмотреть по ссылке примера.

    dynDateTime. Простой datepicker, особенностью которого является работа ещё и со временем.

    AIR DATEPICKER легкий кроссбраузерный jQuery календарь

    Описание

    36kb минифицированный js файл и

    9kb gziped), кастомизируемый, кроссбраузерный календарь, написан с использованием es5 и css flexbox . Работает во всех современных браузерах: IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.

    Установка

    Либо можно скачать файлы напрямую с GitHub

    Использование

    Подключите стили и скрипты из папки /dist :

    Календарь автоматически проинициализируется на элементах с классом .datepicker-here , при этом опции можно передать через data атрибуты.

    Ручная инициализация

    Примеры

    Инициализация с опциями по умолчанию

    Выбор нескольких дат

    Передайте параметр для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число .

    Постоянно видимый календарь

    Проинициализируйте плагин на элементе, который не является текстовым полем, например на

    Выбор месяца

    Минимальная и максимальные даты

    Чтобы ограничить выбор даты, используйте minDate и maxDate , которым нужно передать объект даты.

    Диапозон дат

    Используйте парамтер для выбора диапазона. В качестве разделителя дат будет использован multipleDatesSeparator

    Для того, чтобы иметь возомжность выбрать одну и ту же дату, необходимо установить .

    Неактивные дни недели

    Для того, чтобы сделать невозмножным выбрать конкретные дни недели, можно воспользоваться методом onRenderCell .

    Кастомное содержимое ячеек

    Air Datepicker позволяет менять содержимое ячеек как угодно. Для этого можно также воспользоваться методом onRenderCell . Давайте добавим вспомогательные элементы к нескольким датам и покажем случайный текст при выборе этих дат:

    Появление и скрытие календаря

    Для добавления каких-либо действий с начала анимации или по ее окончанию, используйте опции onShow и onHide

    Выбор времени

    Для выбора времени используйте опцию — она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.

    По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметром startDate .

    Подробнее о параметрах выбора времени можно почитать в Опциях.

    Формат времени

    Формат времени задается в объекте локализации, либо в парамтре timeFormat . По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в timeFormat нужно добавить символ aa или AA . После чего в виджете появятся обозочения ‘AM’ или ‘PM’, в зависимости от выбранного периода времени.

    Действия со временем

    Для задания максимально/минимально возможных значений часов или минут используйте параметры maxHours , minHours , maxMinutes , minMinutes . Также время можно указывать в парамтерах minDate и maxDate

    Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.

    Локализация

    Вы можете добавить свою локализацию в объект $.fn.datepicker.language[«my-lang»] и при вызове календаря передать название языка в параметр language

    Также объект локализации можно передавать непосредственно в language

    Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию (русский язык).

    Пример объекта локализации

    Опции

    > Тип string

    Значение по умолчанию «»

    Дополнительные классы для календаря.

    inline

    Значение по умолчанию false

    Если true, то календарь будет виден постоянно.

    language

    Значение по умолчанию «ru»

    Язык календаря. Если передается строка, то поиск языка будет осуществляться в объекте Datepicker.language Если передан объект, то данные будут браться из него.

    Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию.

    startDate

    Значение по умолчанию new Date()

    Дата, которая будет отображаться при инициализации календаря.

    firstDay

    Значение по умолчанию «»

    Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 — воскресенье и 6 — суббота. По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.

    weekends

    Значение по умолчанию [6, 0]

    Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс .-weekend- . По умолчанию это суббота и воскресенье.

    dateFormat

    Значение по умолчанию «»

    Желаемый формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.

    • @ — время в миллесекундах
    • d — дата
    • dd — дата с лидирующем нулем
    • D — сокращенное наименование дня
    • DD — полное наименование дня
    • m — номер мясяца
    • mm — номер месяца с лидирующем нулем
    • M — сокращенное наименовение месяца
    • MM — полное наименовение месяца
    • yy — сокращенный номер года
    • yyyy — полный номер года
    • yyyy1 — первый год декады, в которую входит текущий год
    • yyyy2 — последний год декады, в которую входит текущий год

    altField

    Значение по умолчанию «»

    Альтернативное поле воода в значение которого будут попадать выбранные даты с форматом altFieldDateFormat .

    altFieldDateFormat

    Значение по умолчанию «@»

    Формат даты для альтернативного поля.

    toggleSelected

    Значение по умолчанию true

    Если true, то клик на выделенной дате снимет выделение.

    keyboardNav

    Значение по умолчанию true

    Если true, то по календарю можно будет осуществлять навигацию с помощью клавиатуры.

    • Ctrl + → | ↑ — переход на месяц вперед
    • Ctrl + ← | ↓ — переход на месяц назад
    • Shift + → | ↑ — переход на год вперед
    • Shift + ← | ↓ — переход на год назад
    • Alt + → | ↑ — переход на 10 лет вперед
    • Alt + ← | ↓ — переход на 10 лет назад
    • Ctrl + Shift + ↑ — переход на следующий вид
    • Esc — закрывает календарь

    position

    Значение по умолчанию «bottom left»

    Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования, воторым — положение на этой оси. Например — утсановит позицию клаендаря справа вверху от текстового поля.

    offset

    Значение по умолчанию 12

    Отступ от основной оси позиционирования.

    Значение по умолчанию «days»

    Начальный вид календаря. Возможноые значения:

    • days — отображение дней месяца
    • months — отображение месяцев одного года
    • years — отображение годов одной декады

    minView

    Значение по умолчанию «days»

    Минимальное представление календаря, по наступлению которого, выбор ячейки приведет к ее активации, а не переходу к следующему виду. Возможные значения такие же как и у параметра view .

    showOtherMonths

    Значение по умолчанию true

    Если true, то будут отображаться дни других месяцев.

    selectOtherMonths

    Значение по умолчанию true

    Если true, то можно будет выбрать дни из других месяцев.

    moveToOtherMonthsOnSelect

    Значение по умолчанию true

    Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу.

    showOtherYears

    Значение по умолчанию true

    Если true, то при отображении декады, будут показаны годы из других декад.

    selectOtherYears

    Значение по умолчанию true

    Если true, то можно будет выбрать года из других декад

    moveToOtherYearsOnSelect

    Значение по умолчанию true

    Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде.

    minDate

    Значение по умолчанию «»

    Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать.

    maxDate

    Значение по умолчанию «»

    Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать.

    disableNavWhenOutOfRange

    Значение по умолчанию true

    Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации ‘вперед’, ‘назад’

    multipleDates

    Значение по умолчанию false

    Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом.

    multipleDatesSeparator

    Значение по умолчанию «,»

    Разделитель дат, который будет использован при объеденения нескольких дат в одну строку.

    range

    Значение по умолчанию false

    Если true, то будет включен режим выбора диапазона дат. В качестве разделителя будет использован multipleDatesSeparator

    todayButton

    Значение по умолчанию false

    Если true, то будет отображена кнопка «Сегодня». Если передать объект даты, то при клике по кнопке будет осуществлен переход и последующий выбор этой даты.

    clearButton

    Значение по умолчанию false

    Если true, то будет отображена кнопка «Очистить».

    showEvent

    Значение по умолчанию «focus»

    Тип события, по наступлению которого будет показан календарь.

    autoClose

    Значение по умолчанию false

    Если true, то при активации даты, календарь закроется.

    prevHtml

    Значение по умолчанию

    Контент кнопки ‘предыдущий месяц|год|декада’.

    nextHtml

    Значение по умолчанию

    Контент кнопки ‘следующий месяц|год|декада’.

    navTitles

    Значение по умолчанию

    Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозначения что и в dateFormat . Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги.

    monthsField

    Значение по умолчанию «monthsShort»

    Какое поле из объекта локализации использовать в качестве названий месяцев, когда view = «months» .

    timepicker

    Значение по умолчанию false

    Если true , то будет добавлена возомжность выбора времени.

    dateTimeSeparator

    Значение по умолчанию » «

    Разделитель между датой и временем.

    timeFormat

    Значение по умолчанию null

    Формат времени. По умолчанию берется из локализации. Если передать значение сюда, то оно будет иметь больший приоритет. Для включения 12-ти часового режима добавьте ‘aa’ или ‘AA’ в параметр timeFormat , например Возможные варианты:

    • h — часы
    • hh — часы, с лидирующим нулем
    • i — минуты
    • ii — минуты, с лидирующим нулем
    • aa — период дня — ‘am’ или ‘pm’
    • AA — период дня заглавными буквами

    minHours

    Значение по умолчанию 0

    Минимальное значение часов от 0 до 23. Нельзя выбрать час меньше, чем переданное значение.

    maxHours

    Значение по умолчанию 23

    Максимальное значение часов от 0 до 23. Нельзя выбрать час больше, чем переданное значение.

    minMinutes

    Значение по умолчанию 0

    Минимальное значение часов от 0 до 59. Нельзя вустановить значение минут меньше, чем переданное значение.

    maxMinutes

    Значение по умолчанию 59

    Максимальное значение минут от 0 до 59. Нельзя вустановить значение минут больше, чем переданное значение.

    hoursStep

    Значение по умолчанию 1

    Шаг выбора часов.

    minutesStep

    Значение по умолчанию 1

    Шаг выбора минут.

    События

    onSelect(formattedDate, date, inst)

    Значение по умолчанию null

    Функция обратного вызова при выборе даты.

    • formattedDatestring — отформатированная дата.
    • dateDate|array — объект Date выбранной даты, если , то будет передан массив таких объектов.
    • instobject — экземпляр плагина.

    onShow(inst, animationCompleted)

    Значение по умолчанию null

    Функция обратного вызова при появлении календаря.

    • instObject — экземпляр календаря.
    • animationCompletedboolean — индикатор состояния анимации. если false , то анимация только началась, если true — уже закончилась.

    onH > Тип function

    Значение по умолчанию null

    Функция обратного вызова при скрытии календаря.

    • instObject — экземпляр календаря.
    • animationCompletedboolean — индикатор состояния анимации. если false , то анимация только началась, если true — уже закончилась.

    onChangeMonth(month, year)

    Значение по умолчанию null

    Функция обратного вызова при изменении месяца.

    • monthnumber — номер месяца (от 0 до 12), к которому осуществлен переход.
    • yearnumber — номер года, к которому осуществлен переход.

    onChangeYear(year)

    Значение по умолчанию null

    Функция обратного вызова при изменении года.

    • yearnumber — номер года, к которому осуществлен переход

    onChangeDecade(decade)

    Значение по умолчанию null

    Функция обратного вызова при изменении декады.

    • decadearray — массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается.

    onChangeView(view)

    Значение по умолчанию null

    Функция обратного вызова при изменении вида календаря

    • viewstring — вид, к которому осуществлен переход (days, months, years).

    onRenderCell(date, cellType)

    Значение по умолчанию null

    Функция обратного вызова при отрисовке ячейки календаря.

    • dateDate — объект даты текущей ячейки
    • cellTypestring — тип текущей ячейки (day, month, year).

    Функция должна возвращать объект, которой может состоять из трех полей:

    Пример

    Досутп к экземпляру плагина осуществляется через data атрибут.

    jQuery Datepicker: выбор даты для поля input в WordPress

    Подключить скрипт для быстрой установки даты в поле не сложно и JS скриптов для этого в сети хватает. А в этой статье я выложу готовый код для WordPress.

    Задача такая: у нас есть input поле и нам нужно сделать так, чтобы при установке курсора в это поле появлялся календарь, где бы можно было выбрать дату (день месяца) и поле автоматически заполнилось выбранным числом в нужном формате. Календарь должен быть с русской локализацией. Такая задача встречается часто и я подумал будет удобно иметь под рукой готовый код.

    Но для начала ссылки, которые могут пригодится для изменения кода под свои нужды:

    Главная страница jQuery плагина Datepicker: https://jqueryui.com/datepicker/ — здесь вы найдете разные пример использования Datepicker;

  • Страница подбора css тем под jQuery UI — http://jqueryui.com/themeroller/ — здесь вы можете выбрать готовую тему jQuery UI или во вкладке Roll Your Own — настроить дефолтную тему под себя: цвета, фоны, закругление углов и т.д.;
  • Чтобы добавить поддержку часов/минут/секунд, используйте дополнение timepicker.

    Готовый код Datepicker для WordPress

    В WordPress подключать именно jQuery Datepicker удобно, потому что он идет в комплекте с WordPress и для его подключения нужно вставить всего две строки: подключение самого скрипта и подключения стилей CSS. А дальше нужно просто запустить js функцию datepicker() на нужном .

    Этот код можно вставлять в любое место php файла, не обязательно до вывода шапки get_header(), можно прямо в тело HTML документа — код будет работать:

    Небольшой разбор кода:

    Эта строка подключает все необходимые скрипты с помощью wp_enqueue_script(), включая сам jQuery. Если jQuery уже подключен, то он подключаться не будет.

    Эта строка подключает css стили с помощью wp_enqueue_style(). Стили jquery ui в комплект WordPress не входят, поэтому подключаем их отдельно (с библиотеки скриптов от Google). smoothness в этой строке это название jquery ui темы и её можно заменить, например на redmond или ui-lightness — полный список тем (для вставки в строку, в названии темы нужно заменить заглавные буквы на строчные, а пробелы на дефис).

    Эти строки подключают функцию init_datepicker() в подвал сайта. Функция выводит скрипт, который запускает datepicker для указанных input полей. К какому полю примерить datepicker определяется в строке:

    Эта строка запустит выбор даты для всех input полей в атрибуте name которых есть подстрока ‘ date ‘ или если input поле имеет класс datepicker . Т.е. этому коду будут соответствовать любые из таких полей:

    input[name*=»date»], .datepicker — это селекторы, вы можете установить свои, подробнее о селекторах я писал в статье CSS селекторы, 90% из них работают и для jQuery.

    Коротко об использовании timepicker

    Когда нужно добавить поддержку часов/минут/секунд используйте дополнение timepicker

    Использовать это дополнение не сложно, порядок действий таков:

    Скачиваете скрипт и стили дополнения.

    Подключите скрипты в следующем порядке:

    1. jQuery
    2. jQueryUI: datepicker и slider
    3. Timepicker

    Также не забудьте подключить ccs стили.

    Инициализируйте timepicker на input поле так:

    30 Best Free Calendar & Datepicker jQuery Plugins

    Some might assume that an Internet loaded with the free code would breed indolence. Yet it seems developers are willing to contribute their help to projects more than ever before. JavaScript libraries are a microcosm of the larger open source community – specifically jQuery with its ever-growing popularity and easy learning curve.

    One such area of broadened potential would be jQuery-based calendars for websites. Although date & calendar interfaces have sparse usage, they come in handy for very specific circumstances. And when building a site that requires this type of interface you’ll be happy to know there are dozens of open source plugins available.

    I’ve cataloged the 30 best free jQuery plugins that offer datetime functionality. Some are more developed than others and each plugin has its own set of benefits. The best part about using open source code is that it’s easy to customize for your own purpose. So peruse through this collection and take a look at any plugins which pique your curiosity. jQuery makes it really easy to create datepickers and you can make them fully functional and customizable by adding just a few extra lines of code. You can use jQuery plugins to create custom datepicker according to your need and choice. The datepickers are essential for many businesses and they can also be used to track time for any specified purpse.

    All of these jQuery calendars and datepickers have been created using simple coding and the tutorials revolve around creating and managing different date and time interface customizations. You can also craft such interface by imagining and mapping different interface customizations in your mind and then putting them into work. Few of them are damn simple and easy-to-code while few of them offer advanced options to the users to customize according to their preference. Nearly all of these datepicker calendars are similar to each other and they have similar options of customizations and enhancing the user experience.

    For more jQuery plugins – check out our post on free gallery sliders.

    The Problems with JS Calendars & Datepickers

    Anything related to date/time for the web is usually built on a backend language. From Ruby to Python or PHP there are plenty of choices. But some modern websites tend to behave like web applications: snappy, responsive, and quick to react. jQuery has the capability of tying into a backend language through AJAX, but it’s not always the best solution.

    Calendar plugins are often completely useless because they’re not interactive or just feel too clunky. It’s a good idea to map out your concept for how the final layout should behave. Bloat is another issue which can be difficult to avoid. Just be sure to use minified versions of all plugins and resource files to reduce the length of HTTP requests.

    Date pickers tend to be smaller and more compact in relation to full calendar interfaces. The biggest problem with date pickers is the interface itself. Many will focus on a simpler UI with dropdown menus or input fields. Others will incorporate a more traditional calendar-style picker with an interface that’s much too small.

    The design network Dribbble has lots of datepicker interfaces you could check out. Granted these are just designed mockups but the best ones should capture your attention immediately. It should become natural to feel how an interface ought to behave just through the design.

    User interface design and user experience design tend to go hand-in-hand. If a plugin can’t balance these ideas properly it will often lead to frustration for both the developer and the user.

    What Makes a Great Plugin?

    It should be noted there is rarely an empirical list of rules that everyone agrees would denote great plugin design. I have my own opinions about best practices for jQuery plugins based on my own experiences. No single plugin should be considered ideal since each project is subjective and requires its own solution.

    With that said, here are a few things to look out for when selecting a plugin for your project:

    • Balanced Documentation. The key to a great plugin is ease-of-use from a user’s standpoint and a developer’s standpoint. Well-documented code is like the blueprint of a house; It’s vital in order to learn how to build or reconstruct whatever you’re using.
    • Easy & Open Customization. For the most part, developers want to append generic functionality with a few tweaks and changes based on the situation. A great plugin should come with options that can be updated to add or remove certain functionality. The best plugins will offer callback methods for developers to write their own functions.
    • Broad Compatibility. Who wants to visit a site with a datepicker that only works in recent versions of Chrome and Webkit browsers? Certainly not Firefox or Opera users, let alone IE users(assuming they still exist). Double-check compatibility with each plugin to be sure it’ll reach your intended audience.
    • Practical UX. If the plugin has some type of interactive component you really want it to be pragmatic and straightforward. Ask yourself, does the plugin behave exactly like you would expect? Are there ways to change the functionality to operate more suitably? Plugins are meant to enhance a website design, however poor UX does nothing but drags it down.

    Calendar Plugins

    1. CLNDR.js

    Why it’s brilliant:

    • Easy to style and scale to fit any website.
    • Responsive for every screen size.
    • Dynamic event viewer with specific details and dates.
    • Dates for each specific event are highlighted or underlined.
    • DemoDownload

    2. FullCalendar

    Why it’s brilliant:

    • Drag & Drop functionality offers an interactive atmosphere.
    • Sortable views for days, weeks, or months.
    • Optional connectivity with Google Calendar.
    • Insanely detailed documentation for developers.
    • Simple and flexible user interface.
    • DemoDownload

    3. Zabuto Calendar

    Why it’s brilliant:

    • External data may be pulled via AJAX/JSON.
    • Runs on top of Bootstrap with traditional CSS classes.
    • Optional multi-language settings.
    • A unique way of highlighting special and regular intervals.
    • DemoDownload

    4. Verbose Calendar

    Why it’s brilliant:

    • The fullscreen minimalist interface is well-designed and full of ingenuity.
    • Verbose Calendar is laid out horizontally instead of vertically. Dates and months are easier to access.
    • All click events are handled through a callback method. This requires some knowledge of jQuery but offers a lot more control over the functionality.
    • Professional user-interface with a unique outlook.
    • DemoDownload

    5. e-Calendar

    Why it’s brilliant:

    • Calendar content is managed through JSON.
    • Date & time info for individual events.
    • Easy to limit navigation of previous or future months.
    • Easy to write and implement the code.
    • DemoDownload

    6. jQM Calendar

    Why it’s brilliant:

    • The most convenient fullscreen calendar for jQuery Mobile.
    • Customizable theme and content for calendar events.
    • Lightweight! JS+CSS files come out to

    14KB.

  • Easily customizable with a lot of different choices for the users.
  • DemoDownload
  • 7. GoogleCalReader

    Why it’s brilliant:

    • API connection with Google Calendar is quick & painless.
    • Almost no CSS; a completely blank template for custom styling.
    • Data is appended right into HTML with pre-built structural elements.
    • Light-weight and simple datepicker( more like a calendar in your personal diary)
    • DemoDownload

    Datepicker Plugins

    8. glDatePicker

    Why it’s brilliant:

    • Navigation limits to specific months or weeks.
    • Setup details on special days or events.
    • 7kb compressed with plenty of custom options.
    • Colorful user-interface with super-easy navigation and each and everything in your own control.
    • DemoDownload

    9. Multiple Dates Picker

    Why it’s brilliant:

    • Allows multiple consecutive dates and non-sequential dates.
    • Runs as a standalone widget or attached to an input field.
    • Great online documentation and live sample demos.
    • Simple and easy to implement the code.
    • DemoDownload

    10. DateTimePicker

    Why it’s brilliant:

    • Offers many different formats for date & time selection.
    • Requires just a single line of JS code to operate.
    • Themeable CSS file with documentation.
    • Offers sidebar time selection alongwith the date selection at the same time.
    • DemoDownload

    11. Datepair.js

    Why it’s brilliant:

    • Documented options and methods for the hand-written code.
    • Specifically built for range selection between two datetime periods.
    • No dependencies but can optionally work with jQuery, Zepto, or Bootstrap.
    • Range selection suitable to be used in travel and booking sites.
    • DemoDownload

    12. Timepicker

    Why it’s brilliant:

    • More focused on time with features like duration.
    • Various time formatting styles to choose from.
    • Works on any HTML element, input field or otherwise.\
    • Learn to design and customize the date and time range selection of all kinds.
    • DemoDownload

    13. jQuery UI Datepicker

    Why it’s brilliant:

    • The most common datepicker plugin with the greatest amount of support.
    • Easy to customize and restyle for your own website.
    • Has a library of animations and extra effects attached to the datepicker.
    • A drop-down calendar with advanced options.
    • DemoDownload

    14. Rome

    Why it’s brilliant:

    • No immediate jQuery dependency.
    • Supports all major browsers even dating back to IE7.
    • Offers both a date and time picker in the same window.
    • Greatly customizable user-interface to quizzes, applications, and software.
    • DemoDownload

    15. jCal

    Why it’s brilliant:

    • Customizable multi-month datepicker interface.
    • Allows multi-date selection over a period of weeks or months.
    • Set a limited number of days for one selection(ex: only 7-day periods).
    • Displays two months consecutively at a time.
    • DemoDownload

    16. Zebra Datepicker

    Why it’s brilliant:

    • Allows date ranges connected with multiple input fields.
    • Two default themes with accessible customization features.
    • Supports all major browsers including legacy versions like IE6+.
    • You can jump from one month to the other and supports all the date formats.
    • DemoDownload

    17. jQM DateBox

    Why it’s brilliant:

    • Works perfectly with all versions of jQuery Mobile.
    • Comprehensive API documentation for further development.
    • Built-in theme designer with customizable inputs and features.
    • Includes many different interfaces like the square calendar, iOS flipbox, or +/- incremental boxes.
    • DemoDownload

    18. Filthypillow

    Why it’s brilliant:

    • Options for pulling the current time.
    • Keyboard shortcuts are built into the plugin code.
    • Easy to save and pass dates into backend functions.
    • DemoDownload

    19. PickMeUp

    Why it’s brilliant:

    • Select multiple dates as a range or as separate entities.
    • Multi-month interface to display more than one month at a time.
    • Plenty of configuration options for the interface and user experience.
    • Dark background
    • DemoDownload

    20. DatePicker

    Why it’s brilliant:

    • Mark holidays or special days/weekends using CSS.
    • International localization for different languages.
    • Flat-mode selection for individual date pieces(select year, then the month, then day).
    • DemoDownload

    21. Simple DateTimePicker

    Why it’s brilliant:

    • Customizable languages and date/time formatting options.
    • Both date and time selection are located in the same place.
    • Date/time picker can be displayed inline or attached to an input field.
    • Contains almost each and every option that can help or entertain the user.
    • DemoDownload

    22. jQuery Mobile Date Nav

    Why it’s brilliant:

    • Runs a simpler Mobile theme compared to jQM DateBox.
    • Default content is built using HTML5 data-attributes.
    • Arrow navigation is more straightforward but offers less control.
    • DemoDownload

    23. Flat DateTime Picker

    Why it’s brilliant:

    • Completely responsive interface.
    • Handles date, time, or date/time in a single box.
    • Flat & clean UI is perfect for any website or mobile webapp.
    • Huge table of parameters documented with example code snippets.
    • DemoDownload

    24. Pikaday

    Why it’s brilliant:

      Extremely lightweight(minified source is

    5kb).

  • Modular cascading styles for easy customization.
  • No immediate dependencies with optional jQuery support.
  • DemoDownload
  • 25. ClockPicker

    Why it’s brilliant:

    • Circular analog clock interface is a unique method for time selection.
    • Supports both web & mobile devices. Fantastic touchscreen support.
    • The library is designed to run over Bootstrap using the default styles.
    • DemoDownload

    26. jQuery UI DateRangePicker

    Why it’s brilliant:

    • Detailed API with a full list of options and methods.
    • Runs on top of jQuery UI with the same theme customization benefits.
    • Range can be expanded to showcase multiple months in the same window.
    • Offers preset date ranges based on the current day(ex: last 7 days, month to date, next 30 days).
    • DemoDownload

    27. Ion Calendar

    Why it’s brilliant:

    • All touchscreen devices are fully supported.
    • Works as both a regular calendar and datepicker.
    • Supports all international languages and date formats.
    • The click event callback allows you to write a custom method for handling interactions.
    • DemoDownload

    Tutorials for Building Your Own Calendar/Datepicker

    If you’re someone who likes to get under the hood and customize from scratch then you may prefer to start with a tutorial. jQuery plugins are easy to customize once you learn the code structure. But there’s nothing like the feeling of starting and completing a brand new plugin. Each of these tutorials will teach you to build each section of the date picker calendar separately and also teach you to add additional features that will enhance the user experience multiple times.

    Each of these tutorials place a focus on building a calendar or datepicker interfaces through jQuery. If you have the patience and time then it may be worth building something from scratch. Not every tutorial goes in-depth about the plugin side of coding, which may require a bit more research. But once you understand the core concepts everything else should fall right into place.

    Unfortunately, there aren’t many tutorials related to datepickers and calendars because they’re much less common than slideshows or drop-down menus. But this collection should be perfect to satiate the appetite of anyone thirsting for greater knowledge.

    1. CSS3/jQuery UI Calendar

    Why it’s brilliant:

    Perhaps the most popular Calendar library is jQuery UI. It can be expanded, customized, and restyled using a little jQuery and CSS. Valeriu Timbuc wrote this tutorial expounding on how to build a dynamic calendar interface. It covers the general setup of jQuery along with the custom CSS3 properties used to design and restyle everything.

    2. Calendario

    Why it’s brilliant:

    The Codrops blog is perhaps one of my absolute favorites in the realm of web development. Their tutorials are concise, well-designed, and work exactly as featured.

    Mary Lou is the author and developer for this jQuery plugin tutorial named Calendario. It’s a fully-responsive flexible plugin for creating a calendar interface with any style you please. The tutorial is super easy to follow and the plugin code is 100% free to download. Anyone who’s primarily interested in frontend development with jQuery should really go through this tutorial.

    3. jQuery/AJAX Calendar

    Why it’s brilliant:

    As I mentioned before, most web calendars are built using some type of backend language. Although jQuery can be great for dynamic features, it can be dramatically improved with some backend programming.

    This tutorial written by Josh Lockhart does everything right. You’ll be introduced to the jQuery AJAX API for connecting into a PHP backend. It also covers the initiation of a MySQL database used to store the datetime information. I’ll admit this is definitely a tutorial for more advanced developers – but if you’re curious to learn about PHP this may be perfect introductory material.

    4. Custom jQuery UI Calendar

    Why it’s brilliant:

    The default jQuery UI theme is rather straightforward and rarely match existing websites. In this tutorial, you’ll learn how to customize the UI Calendar/Datepicker theme from scratch. It does not specifically rely on ThemeRoller, instead opting towards a more customized approach. Although the final demo is a little bare, it grants you much more control to restyle the interface in any direction you please.

    5. jQuery UI Datepicker in WordPress

    Why it’s brilliant:

    Adding the jQuery UI library to your static HTML page is a breeze. However getting it to run in WordPress is a whole separate topic – not to mention the code required for appending a specific widget into a page is often quite tedious.

    But thanks to this Datepicker tutorial you should have no problem incorporating the jQuery UI component into any WordPress theme. It goes into great detail about the proper way to include the jQuery UI file through WordPress’ wp_enqueue_script function. Any WP developers out there who need to incorporate a frontend datepicker will take away reliable information from this post.

    6. HTML5 Datepicker with Fallback

    Why it’s brilliant:

    Few developers are willing to push new standards because browser technology is often lacking in support. But HTML5 has been growing rapidly and seen a tremendous increase in general browser acceptance.

    This tutorial written by TJ VanToll explains how to build an HTML5 type=” date” input field using jQuery as a fallback. It offers the best of both worlds incorporating a newer HTML5 input with a more trustworthy jQuery UI alternative. Each step is easy to follow and there are plenty of live demos throughout the article.

    7. WP Post Editor Datepicker

    Why it’s brilliant:

    Tuts+ does a lot of multi-post tutorials which are broken up into series. This series is one such example written by Tom McFarlin who outlines the process of adding a datepicker into the WordPress post editor. All of the code is phenomenal and it’s very easy to understand. Although not everyone likes to use WordPress, it is a popular CMS for both personal and professional web projects.

    Final Ideas

    As the years pass I’m constantly bumping into new libraries and plugins for enhanced web development. When a talented developer needs some functionality that can’t be found elsewhere, they’ll often build it themselves. Many plugins have been created through this origin story and have since been released into the public.

    I certainly hope these calendar and datepicker plugins will offer some value to web designers and developers. The beauty of jQuery is that it’s cross-platform and supported in almost every browser with JavaScript. You have your pick of the litter when it comes to plugins and there’s bound to be even more released over the next few years. If you have questions or suggestions for other related plugins let us know your thoughts in the post comments below.

    For More on jQuery Plugins, Check Out These Articles:

    Start Your Own Freelance Business!

    Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

    Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

    Jake Rocheleau

    Jake is a writer and user experience designer on the web. He currently publishes articles related to user experience and user interface design. Find out more on his website or you can follow his updates on Twitter @jakerocheleau

    Как использовать jQuery UI Calendar/Date PIcker для недели, а не дня?

    Я использую jQuery UI Calendar/Date Picker с большим успехом за последние пару месяцев. Мне было дано новое требование, чтобы можно было выбрать неделю (Sun — Sat), а не один день.

    Кто-нибудь сделал это раньше?

    • выделение по неделям, а не день
    • показать дату начала и дату окончания, а не одну дату в текстовом поле/ярлыках

    Встроенный выбор недели с использованием jQuery UI DataPicker (требуется jQuery UI 1.8 +):

    Вот еще один способ пойти на это. -Открыть неделю с помощью showWeek. — Определите beforeShow для присоединения обработчика событий, используя live(), чтобы подсвечивалась строка недели (включая номер недели). — Отсоедините обработчик события с кнопкой die(). Это особенно удобно, если вы используете обычных дампикеров в другом месте вашего кода.

    Я создал плагин jQuery на основе принятого ответа. Получите его https://github.com/Prezent/jquery-weekpicker или через Bower. Пример использования:

    Вам понадобятся следующие зависимости:

    Я изменил jqueryui-1.10.2.js в строке 8123:

    (Я не помню, где я это видел)

    Затем вы можете выбрать неделю с W в формате даты == > dateFormat: ‘yy-W’

    Если у вас есть предыдущая версия jqueryui, найдите «@» (ищите кавычки) в файле и добавьте эти 3 строки.

    Я использовал некоторые из приведенных выше примеров, но использовал другой подход, потому что мне нужно поддерживать выбор недели, но неделя может начинаться в любой день недели и должна изменяться в зависимости от переменной. Я настраивал классы для группировки каждого td с недельным классом, поэтому я могу легко выделить неделю, которая перекрывает tr. В этом примере datepickerStartWeekDay может быть от 0 до 6, представляя неделю, начиная с воскресенья по субботу.

    6.2. Смена языка календаря Datepicker

    По умолчанию язык календаря – английский. Однако можно настроить какой угодно язык. Для этого необходимо изменить некоторые параметры календаря. Добавление, изменение параметнов можно осуществлять внутри метода .datepicker() (листинг 6.3).

    Листинг 6.3. Файл myscript.js – Смена языка

    1. $(document).ready(function() <
    2. $(«#calendar»).datepicker( <
    3. monthNames: [‘Январь’, ‘Февраль’, ‘Март’, ‘Апрель’,
    4. ‘Май’, ‘Июнь’, ‘Июль’, ‘Август’, ‘Сентябрь’,
    5. ‘Октябрь’, ‘Ноябрь’, ‘Декабрь’],
    6. dayNamesMin: [‘Вс’,’Пн’,’Вт’,’Ср’,’Чт’,’Пт’,’Сб’],
    7. firstDay: 1,
    8. >);
    9. >);

    В листинге 6.3 была произведена настройка отображения имен месяцев (monthNames), краткого описания дня (dayNamesMin) и был указан день, который считается первым (1 – понедельник).

    Календарь принял вид, представленный на рис. 6.2.

    Рис. 6.2. Русифицированный календарь

    Для управления языками можно создавать отдельные файлы и подключать их при необходимости.

    Например, можно было подключить к веб-странице дополнительный файл jQuery.ui.datepicker-ru.js (листинг 6.4) и прописать в нем настройки (листинг 6.5).

    Листинг 6.4. Файл 1.html – Подключение библиотек

    Топ-пост этого месяца:  Как загрузить файл на сайт и сделать его доступным для скачивания
    Добавить комментарий