JQuery UI API - элемент выбора даты (Datepicker Widget)

Предыдущий: Jquery UI API - Button компонента (кнопка Widget)

Далее: Jquery UI API - диалог компонент (Dialog Widget)

категория

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

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

Новая версия: 1.0

JQuery UI дата подборщика (Datepicker) Выберите дату, чтобы добавить высоту страницы, чтобы настроить плагин. Вы можете настроить формат даты и язык, ограничить выбираемый диапазон дат, добавить кнопки и другие параметры навигации.

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

взаимодействие клавиатуры

Когда дата выбирающий открыт, следующие команды клавиатуры:

PAGE UP: переход к предыдущему месяцу.
PAGE DOWN: Переход к следующему месяцу.
CTRL + PAGE UP: Перемещение в предыдущем году.
CTRL + PAGE DOWN: Переход к следующему году.
CTRL + HOME: Переместить текущий месяц. Если выбора даты закрыта открыта.
CTRL + ЛЕВЫЙ: перейти на день.
CTRL + ПРАВЫЙ: перейти на следующий день.
CTRL + UP: переход к предыдущей неделе.
CTRL + DOWN: Переход к следующей неделе.
ENTER: Выберите дату фокусировки.
CTRL + END: Закрыть выбора даты и очистить дату.
ПОБЕГ: Дата закрытия сборщика, без какого-либо выбора.

Полезные функции

$ .datepicker.setDefaults (Настройки)

Изменение параметров по умолчанию для всех выбора даты.

Используйте option() метод , чтобы изменить настройки для отдельных экземпляров.

Примеры кода:

Установите все выбора даты или нажмите на иконку открывается, когда фокус.

$ .datepicker.setDefaults ({
  showOn: "как",
  buttonImageOnly: правда,
  buttonImage: "calendar.gif",
  ButtonText: "календарь"
});

Установить все выбора даты имеет французский текст.

$ .datepicker.setDefaults ($ .datepicker.regional [ "Fr"]);

$ .datepicker.formatDate (Формат, дата, настройки)

Форматирование даты в значение строки с указанным форматом.

Формат может быть следующие комбинации:

d - день месяца (без ведущих нулей)
дд - день месяца (две цифры)
о - день года (без ведущих нулей)
оо - день года (три цифры)
Краткое название дня - D
Длинный день название - DD
м - первые несколько месяцев года (без ведущих нулей)
мм - первые несколько месяцев года (две цифры)
Сокращенное название месяца - М
Месяц длинное название - М.М.
у - год (две цифры)
уу - год (четыре цифры)
@ - Unix метка времени (мс) начиная с 01/01/1970
! - Windows Watch (100ns, начиная с 01/01/0001)
'...' - Текст
'' - Одиночные кавычки
Другое - текст

Есть также некоторые $.datepicker предопределенный формат даты стандарт:

ATOM - 'уу-мм-дд' (и RFC 3339 / ISO 8601 же)
COOKIE - 'D, дд M уу'
ISO_8601 - 'уу-мм-дд'
RFC_822 - 'D, d M у' (см RFC 822)
RFC_850 - 'ДД, дд-My' (см RFC 850)
RFC_1036 - 'D, d M у' (см RFC 1036)
RFC_1123 - 'D, d M уу' (см RFC 1123)
RFC_2822 - 'D, d M уу' (см RFC 2822)
RSS - 'D, D М у' (такой же, как в RFC 822)
КЛЕЩИ - '!'
TIMESTAMP - '@'
W3C - "YY-мм-дд '(такой же, как ISO 8601)

Примеры кода:

Формат ISO для отображения даты. Продукция "2007-01-26".

$ .datepicker.formatDate ( "YY-мм-дд", новые Дата (2007, 1 - 1, 26));

Французский расширить формат для отображения даты. Продукция "Samedi, Juillet 14, 2007".

$ .datepicker.formatDate ( "ДД, ММ d, уу", новые Дата (2007, 7 - 1, 14), {
  dayNamesShort: $ .datepicker.regional [ "FR"] .dayNamesShort,
  dayNames: $ .datepicker.regional [ "FR"] .dayNames,
  monthNamesShort: $ .datepicker.regional [ "FR"] .monthNamesShort,
  MONTHNAMES: $ .datepicker.regional [ "FR"] .monthNames
});

$ .datepicker.parseDate (Формат, значение, настройки)

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

Формат может быть следующие комбинации:

d - день месяца (без ведущих нулей)
дд - день месяца (две цифры)
о - день года (без ведущих нулей)
оо - день года (три цифры)
D - сокращенное наименование недели
DD - неделю назвать несколько
м - первые несколько месяцев года (без ведущих нулей)
мм - первые несколько месяцев года (две цифры)
Сокращенное название месяца - М
Месяц длинное название - М.М.
у - год (две цифры)
уу - год (четыре цифры)
@ - Unix метка времени (мс) начиная с 01/01/1970
! - Windows Watch (100ns, начиная с 01/01/0001)
'...' - Текст
'' - Одиночные кавычки
Другое - текст

Некоторые исключения могут быть сгенерированы:

"Недопустимые аргументы" - или, если формат является недействительным данное исключение.
"Недостающее количество в позиции пп '- если формат для отображения значения не найден Это исключение.
"Неизвестное имя в позиции пп '- если формат не найден через несколько недель или названия месяцев имена Это исключение.
"Неожиданный буквальным в положении пп '- если значение текстового формата не найден Это исключение.
'Неверная дата' - дата не является действительным, если это исключение, например, '31 / 02/2007 '.

Примеры кода:

Извлечение даты в формате ISO.

$ .datepicker.parseDate ( "YY-мм-дд", "2007-01-26");

Распаковка формат даты, что расширенный по-французски.

$ .datepicker.parseDate ( "ДД, ММ d, уу", "Samedi, Juillet 14, 2007", {
  shortYearCuroff: 20,
  dayNamesShort: $ .datepicker.regional [ "FR"] .dayNamesShort,
  dayNames: $ .datepicker.regional [ "FR"] .dayNames,
  monthNamesShort: $ .datepicker.regional [ "FR"] .monthNamesShort,
  MONTHNAMES: $ .datepicker.regional [ "FR"] .monthNames
});

$ .datepicker.iso8601Week (Дата)

Определение заданной даты первых нескольких недель года: 1-53.

Эта функция использует определение одной недели ISO 8601: за одну неделю, начиная с понедельника, в первую неделю каждого года содержит 4 января. Это означает, что в прошлом году, может включать в себя до трех дней в первую неделю года, год может содержать до трех дней в течение последней недели предыдущего года.

Эта функция calculateWeek реализация по умолчанию.

Примеры кода:

Найти дату первых нескольких недель года.

$ .datepicker.iso8601Week (New Date (2007, 1 - 1, 26));

$ .datepicker.noWeekends

Установка такой функции beforeShowDay, предотвращая выбор уик-энда.

Мы можем beforeShowDay предоставить варианты noWeekends() функция используется для расчета всех работающих , чтобы обеспечить true / false массив значений , используемых для обозначения даты можно выбрать.

Примеры кода:

Набор DatePicker, пусть выходные по желанию.

$ ( "#datepicker") .datepicker ({
  beforeShowDay: $ .datepicker.noWeekends
});

предел

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

$.datepicker.regional Свойство содержит массив локализуется кода языка в качестве предварительного, предварительно по умолчанию "" , выраженное в английском языке. Каждая запись представляет собой объект со следующими свойствами: closeText , prevText , nextText , currentText , monthNames , monthNamesShort , dayNames , dayNamesShort , dayNamesMin , weekHeader , dateFormat , firstDay , isRTL , showMonthAfterYear и yearSuffix .

Вы можете восстановить код по локализации по умолчанию ниже:

$.datepicker.setDefaults( $.datepicker.regional[ "" ] );

Вы можете переопределить выбора даты в определенном месте, выполнив следующие коды:

$( selector ).datepicker( $.datepicker.regional[ "fr" ] );

Тематизация

член Дата подборщика (Datepicker Widget) с помощью рамки JQuery UI CSS , чтобы определить внешний вид и его стиль. Если вам необходимо использовать указанный элемент выбора даты стиль, вы можете использовать следующее имя класса CSS:

ui-datepicker : Date Picker внешнего контейнера. Если выбора даты рядный, элементы дополнительно снабжены ui-datepicker-inline , класс. Если isRTL опций, то этот элемент будет дополнительно с ui-datepicker-rtl , класса.
- ui-datepicker-header : Date Picker головки контейнера.
  - ui-datepicker-prev : управления используется для выбора предыдущего месяца.
  - ui-datepicker-next : управления используется для выбора следующего месяца.
  - ui-datepicker-title : дате названию захватывающего содержит месяц и год контейнера.
    - ui-datepicker-month : отображения текста месяца, если вы установите changeMonth опций , то <select> элемент.
    - ui-datepicker-year : Текст на дисплее, если вы установите changeYear опций , то <select> элемент.
- ui-datepicker-calendar , ui-datepicker-calendar : содержать календарь форму.
  - ui-datepicker-week-end : уикэнда клетки. Клетки, содержащие выходные дни.
  - ui-datepicker-other-month : место в течение месяца, но не в текущем месяце количество дней клетки.
  - ui-datepicker-unselectable : пользователь не может выбрать ячейку.
  - ui-datepicker-current-day : выбранная дата ячейки.
  - ui-datepicker-today : сегодняшней даты ячейки.
- ui-datepicker-buttonpane : При установке showButtonPanel с помощью кнопки панели (buttonpane) , когда параметр.
  - ui-datepicker-current , ui-datepicker-current : выбрать кнопку для текущей даты.

Если numberOfMonths опция для отображения нескольких месяцев, использовать некоторые дополнительные занятия:

ui-datepicker-multi : месяц выбора даты части внешнего слоя контейнера. Этот элемент будет отображаться в зависимости от числа месяца , с дополнительными ui-datepicker-multi-2 , ui-datepicker-multi-3 или ui-datepicker-multi-4 , имени класса.
- ui-datepicker-group : группировка в пределах одного селектора. Этот элемент на основе его позиции в пакете с дополнительным ui-datepicker-group-first , ui-datepicker-group-middle или ui-datepicker-group-last , имя класса.

полагаться

Ядро пользовательского интерфейса (UI ядра)
Эффекты Ядро (Core Effects) ( по желанию, когда и showAnim при использовании с опциями)

дополнительная информация

Часть требует некоторой функциональной CSS, в противном случае она не будет работать. Если вы создаете собственную тему, используйте виджет указанный файл CSS в качестве отправной точки.
Компоненты , чтобы программно манипулировать значением элемента, так что , когда значение элемента изменяется не вызывают нативные change события.
Он не поддерживает <input type="date"> Создание выбора даты на, потому что это вызовет конфликт с местным подборщика UI.

примеров

Простой выбор даты JQuery UI (Datepicker).

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> член выбора даты (Datepicker Widget) Demo </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.10.2.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
</ Head>
<Body>
 
<Div ID = "DatePicker"> </ DIV>
 
<Script>
$ ( "#datepicker") .datepicker ();
</ Script>
 
</ Body>
</ HTML>

Предыдущий: Jquery UI API - Button компонента (кнопка Widget)

Далее: Jquery UI API - диалог компонент (Dialog Widget)

jQuery UI курс

jQuery UI тема

jQuery UI Библиотека компонентов

jQuery UI справочное руководство

jQuery UI примеров

JQuery UI API - элемент выбора даты (Datepicker Widget)

категория

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

взаимодействие клавиатуры

Полезные функции

$ .datepicker.setDefaults (Настройки)

$ .datepicker.formatDate (Формат, дата, настройки)

$ .datepicker.parseDate (Формат, значение, настройки)

$ .datepicker.iso8601Week (Дата)

$ .datepicker.noWeekends

предел

Тематизация

полагаться

дополнительная информация

примеров