8-800-550-67-94

jQuery UI Datepicker

jQuery UI Datepicker

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

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

Работа с клавиатурой

Пока функция datepicker открыта, доступны следующие команды клавиш:

  • PAGE UP: Переход к предыдущему месяцу.
  • PAGE DOWN: Переход к следующему месяцу.
  • CTRL + PAGE UP: Переход к предыдущему году.
  • CTRL + PAGE DOWN: Переход к следующему году.
  • CTRL + HOME: Открыть календарь для выбора даты, если он закрыт.
  • CTRL/COMMAND + HOME: Переместиться к текущему месяцу.
  • CTRL/COMMAND + LEFT: Переход к предыдущему дню.
  • CTRL/COMMAND + RIGHT: Переход к следующему дню.
  • CTRL/COMMAND + UP: Переместиться к предыдущей неделе.
  • CTRL/COMMAND + DOWN: Переместиться к следующей неделе.
  • ENTER: Выбрать дату.
  • CTRL/COMMAND + END: Закрыть календарь и удалить дату.
  • ESCAPE: Закрыть календрь без выбора.

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

$.datepicker.setDefaults( options )

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

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

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

Установите все календари, с функцией открытия при фокусе в текстовом поле или при клике по иконке.

$.datepicker.setDefaults({
  showOn: "both",
  buttonImageOnly: true,
  buttonImage: "calendar.gif",
  buttonText: "Calendar"
});

Установка французского текста.

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

$.datepicker.formatDate( format, date, options )

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

Для выбора доступны следующие форматы:

  • d - День месяца (без начального нуля) от 1 до 31
  • dd - День месяца (две цифры) от 01 до 31
  • o - День года (без начальных нулей) от 1 до 365
  • oo - День года (три цифры) от 001 до 365
  • D - Короткая запись дня недели - Sun, Mon, Tue, Wed, Thu, Fri, Sat
  • DD - Длинная запись дня недели - Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday.
  • m - Номер месяца от 1 до 12
  • mm - Номер месяца от 01 до 12
  • M - Краткое название месяца - Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec.
  • MM - Полное название месяца - January, February, March, April, May, June, July, August, September, October, November, December.
  • y - Последние две цифры года - например 17
  • yy - Год полностью - пример 2017
  • @ - Временная метка Unix (мс от 01.01.1970)
  • ! - Windows ticks - число тактов, которое представляет дату и время. (кол-во 100 нано-секундных интервалов, которые прошли с полуночи в 12:00:00, 1.01.0001 года (0: 00:00 UTC 1.01.0001 по григорианскому календарю))
  • '...' - В кавычках может быть любой текст
  • '' - пустая строка

 Существует также ряд предопределенных стандартных форматов даты, доступных из $.datepicker:

  • ATOM - 'yy-mm-dd' (То же, что и RFC 3339/ISO 8601)
  • COOKIE - 'D, dd M yy'
  • ISO_8601 - 'yy-mm-dd'
  • RFC_822 - 'D, d M y' (Смотри RFC 822)
  • RFC_850 - 'DD, dd-M-y' (Смотри RFC 850)
  • RFC_1036 - 'D, d M y' (Смотри RFC 1036)
  • RFC_1123 - 'D, d M yy' (Смотри RFC 1123)
  • RFC_2822 - 'D, d M yy' (Смотри RFC 2822)
  • RSS - 'D, d M y' (То же, что и RFC 822)
  • TICKS - '!'
  • TIMESTAMP - '@'
  • W3C - 'yy-mm-dd' (То же, что и ISO 8601)

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

Отображение даты в формате ISO. Производит «2007-01-26».

$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) );

Показывать дату в расширенном французском формате. Производит "Samedi, Juillet 14, 2007".

$.datepicker.formatDate( "DD, MM d, yy", new Date( 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( format, value, options )

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

Может быть следующий формат:

  • d - День месяца (без начального нуля) от 1 до 31
  • dd - День месяца (две цифры) от 01 до 31
  • o - День года (без начальных нулей) от 1 до 365
  • oo - День года (три цифры) от 001 до 365
  • D - Короткая запись дня недели - Sun, Mon, Tue, Wed, Thu, Fri, Sat
  • DD - Длинная запись дня недели - Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday.
  • m - Номер месяца от 1 до 12
  • mm - Номер месяца от 01 до 12
  • M - Краткое название месяца - Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec.
  • MM - Полное название месяца - January, February, March, April, May, June, July, August, September, October, November, December.
  • y - Последние две цифры года - например 17
  • yy - Год полностью - пример 2017
  • @ - Временная метка Unix (мс от 01.01.1970)
  • ! - Windows ticks - число тактов, которое представляет дату и время. (кол-во 100 нано-секундных интервалов, которые прошли с полуночи в 12:00:00, 1.01.0001 года (0: 00:00 UTC 1.01.0001 по григорианскому календарю))
  • '...' - В кавычках может быть любой текст
  • '' - пустая строка
Цена на 23 сентября 2018 г.
  • Москва - 30 000 р.
  • Несколько регионов - 50 000 р.