Меню

Datepicker jquery как настроить

Календарь UI

Материал из JQuery

Плагин Datepicker позволяет добавить на ваши страницы календарь, который может быть использован для выбора и отображения дат. Плагин обладает множеством настроек, позволяющих использовать календарь для широкого спектра целей (см. примеры использования выше).

Наиболее распространенным вариантом использования календаря является выбор даты. Поэтому, Datepicker обычно устанавливают на текстовое поле, задуманное для ввода дат. В таком случае, календарь будет появляться при получении фокуса этим текстовым полем, и исчезать, в случае потери им фокуса, либо при выборе конкретной даты на календаре (выбранная дата, при этом, будет оказываться в текстовом поле). При желании, можно превратить в календарь обычный div или span-элемент страницы. Для этого необходимо просто применить к нужному элементу плагин Datepicker (см. пример «Не временный календарь»).

Горячие клавиши Для работы с календарем можно использовать следующие «горячие клавиши»:

  • ctrl+left/right — следующий/предыдущий день.
  • page up/down — следующий/предыдущий месяц.
  • ctrl+page up/down — следующий/предыдущий год.
  • ctrl+home — текущая дата (если календарь закрыт, то он будет открыт).
  • ctrl+up/down — следующая/предыдущая неделя.
  • enter — выбор выделенной даты.
  • ctrl+end — закрыть календарь и обнулить текущее значение (если оно было).
  • ctrl+end — закрыть календарь без выбора даты.

Связанные утилиты UI

В процессе разбора строки с датой, могут произойти ошибки, которые вызовут следующие типы исключений:

‘Invalid arguments’ — неверно заданы параметры (format или val). Например равны null. ‘Missing number at position nn’ — в format указаны цифры, не найденные в строке val. ‘Unknown name at position nn’ — в format указан имя дня или месяца, не найденные в строке val. ‘Invalid date’ — val содержит невозможную дату (например ’31/02/2007′).

Примеры использования $.datepicker.parseDate():

Локализация (изменение языка)
Все текстовые элементы календаря могут быть изменены. В частности, можно заменить их на элементы на требуемом языке. Это можно сделать самостоятельно (изменяя соответствующие свойства календаря) или подключив один из языковых скриптов для календаря, который сделает это автоматически (библиотека доступных скриптов). Все подключенные таким образом языковые наборы, будут храниться в переменной $.datepicker.regional, например подключенный русский набор (ru.js) окажется в $.datepicker.regional.['ru'] и т.д. Первоначальный набор всегда можно найти в $.datepicker.regional.[""], Применить один из уже подключенных наборов можно с помощью $.datepicker.setDefaults:

В локализации участвуют следующие свойства: closeText, prevText, nextText, currentText, monthNames, monthNamesShort, dayNames, dayNamesShort, dayNamesMin, weekHeader, dateFormat, firstDay, isRTL, showMonthAfterYear и yearSuffix. Их описания можно найти на вкладке Свойства.

Источник

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 поле так:

    Источник

    Как сделать календарь с помощью 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

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

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

    Читайте также:  Инструкция как настроить iptv

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

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

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

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

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

    Источник

    Используем datepicker из jquery ui

    Более удобный DateTimePicker разработка автора xdan.ru

    JQuery UI — это набор пользовательских интерфейс виджетов, компонентов и эффектов. Datepicker — это небольшой виджет календарик, удобный прежде всего тем, что пользователь может легко выбрать нужную дату, при этом дата запишется в требуемом формате, и не будет требовать стандартизации.

    Вот так виджет Datepicker выглядит из под коробки в стандартном jQuery UI

    Все лаконично и просто. Но есть один большой минус. В нем нет редактирования времени. Собственно потому виджет и называется DatePicker, аналогичный виджет со временем должен был бы называться DateTimePicker) К сожалению такого виджета в библиотеке нет. Для простоты Datepicker,TimePicker и dateTimePicker обычно обобщают в одно понятие DatePicker.

    К слову в html5 появились новые элементы ввода, в том числе Date и DateTime Picker’ы. Но мало того, что поддерживаются они не во всех браузерах, так еще и эта самая поддержка оставляет желать лучшего. Приведу пример, как выглядит html5 datepicker в разных браузерах

    Посмотрите, как оно будет выглядеть у вас в браузере

    datepicker timepicker datetimepicker

    Флагман тут Opera, в ней виджет выглядит примерно так, как и должен.

    Браузер DatePicker TimePicker DateTimePicker
    Опера 11.1
    Chrome 10.0

    Еще в таблице я привел Chrome, так как он в отличии от FireFox и IE хоть, как-то отображает новые input’ы. Выглядит это очень по спартански, Единственный плюс это стандартизованный ввод.

    Как я уже сказал не так давно вышедшие Firexox 4 и IE9, вообще никак не обрабатывают новые теги.

    Из всего вышесказанного можно сделать вывод, что нативный input type=date. нам не подходит. Также нам не подходит DatePicker из JQuery UI, в том случае если нам необходима работа не только с датой, но и со временем.

    Есть еще одна не плохая разработка JSCal2. Он кросс браузерный и не требует ни каких дополнительных библиотек. Проще говоря, у вас не возникнет проблем с ним, какой бы библиотекой вы не пользовались (Prototype, mootools, jQuery)

    Разработка довольно таки интересная. Множество скинов на любой вкус, интернационализация, независимость от библиотек. Из минусов хочу отметить громоздкость, излишняя кастомизация, иногда бывает лишней. Я пытался поставить ее на один сайт и у меня ничего не вышло. В Опере все было замечательно, а вот в других браузерах календарь открывался то вверх, то вниз, то вовсе не открывался. Эта разработка не для любителей простых решений.

    Хотя если сравнить jQuery UI DatePicker и JsCal2, то второй менее громоздок. Однако он не идет ни в какое сравнение с нативным .

    Лично я люблю скрипты, которые для своей работы требуют подключения только одного скрипта.

    Когда-то меня этим покорил nicedit. Всего две строчки в html коде и любой textarea на странице превращается в wysiwyg редактор

    Взгляните на форму для добавления комментария)

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

    Мне удалось найти такую разработку. Создана она на основе jQuery UI Datepicke r. Но в отличии от оригинала, ядро jQuery UI, а также файлы эффектов зашиты в один файл. Поэтому процесс внедрения не вызывает неудобство.

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

    Источник

    

    Datepicker jquery как настроить

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

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

    Установка и подключение

    Перед непосредственным использованием необходимо скачать jQuery UI (http://jqueryui.com/download) . Предположим, мы скачали бибилиотеку, и разместили ее в папку js/jquery-ui-1.8.17.custom. Теперь нужно сделать следующие включения (желательно в ) в таком порядке:

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

    Где скачать файлы локализации?

    Нужный вам файл локализации можно скачать с SVN репозитория. Для начала перейдите по ссылке http://jquery-ui.googlecode.com/svn/tags/, зайдите в подпапку соответствующую вашей версии плагина DatePicker (в нашем примере это 1.8.17), далее в папку «ui», а в ней в подпапку «i18n». Вот тут то и выбираем нужный файл локализации. Таким образом, полная ссылка на файл русской локализации использованный в нашем примере можно скачать тут: http://jquery-ui.googlecode.com/svn/tags/1.8.17/ui/i18n/jquery.ui.datepicker-ru.js.

    Привязка к текстовому полю

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

    Если необходимо просто прикрутить стандартный datepicker к одному полю, то делаем это так:

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

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

    Согласование двух дат

    Теперь хочу остановиться на одном интересном и часто используемом варианте использования datepicker, а именно когда надо обпеспечить то, что выбрав две даты, одна из них будет точно меньше другой. Это может понадобится , например, в форме бронирования номера в отеле, где пользователь выбирает дату заезда и дату выезда. Само собой, что первая дата должна быть раньше, или по крайней мере совпадать со второй. Делается это так:

    Как вы наверно догадались, #date_from, #date_to — это ID полей соответствующих меньшей и большей дате соответственно.

    Также обратите внимание на ID date_from в функции, привязанной к событию onSelect — это ID меньшей даты. Если внимательно посмотрите скрипт, то поймете зачем это нужно. Хотя вам достаточно полностью скопировать этот скрипт, заменить элементы, выделенные жирным, на свои ID, и все заработает!

    Источник