Виджет Датапикер

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

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

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

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

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

Вспомогательные функции

$.datepicker.setDefaults( options )

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

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

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

Установите все datepicker, чтобы они открывались при получении фокуса или нажатии на значок.

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

Установите все datepicker, чтобы они имели французский текст.

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

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

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

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

d - день месяца (без ведущего нуля)
dd - день месяца (двузначный)
o - день года (без ведущих нулей)
oo - день года (трехзначный)
D - сокращенное имя дня
DD - полное имя дня
m - месяц года (без ведущего нуля)
mm - месяц года (двузначный)
M - сокращенное имя месяца
MM - полное имя месяца
y - год (двузначный)
yy - год (четырехзначный)
@ - метка времени Unix (мс с 01.01.1970)
! - метка времени Windows (100 нс с 01.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 - день месяца (без ведущего нуля)
dd - день месяца (двузначный)
o - день года (без ведущих нулей)
oo - день года (трехзначный)
D - сокращенное имя дня
DD - полное имя дня
m - месяц года (без ведущего нуля)
mm - месяц года (двузначный)
M - сокращенное имя месяца
MM - полное имя месяца
y - год (двузначный)
yy - год (четырехзначный)
@ - метка времени Unix (мс с 01.01.1970)
! - метка времени Windows (100 нс с 01.01.0001)
'...' - буквальный текст
'' - одинарная кавычка
любое другое - буквальный текст

Может быть выброшено несколько исключений:

'Неверные аргументы', если format или value равны null
'Отсутствующее число в позиции nn', если формат указал числовое значение, которого затем не найдено
'Неизвестное имя в позиции nn', если формат указал имя дня или месяца, которого затем не найдено
'Ожидаемый буквальный текст в позиции nn', если формат указал буквальное значение, которого затем не найдено
'Неверная дата', если дата неверна, например, '31/02/2007'

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

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

$.datepicker.parseDate( "yy-mm-dd", "2007-01-26" );

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

$.datepicker.parseDate( "DD, MM d, yy", "Samedi, Juillet 14, 2007", {
  shortYearCutoff: 20,
  dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort,
  dayNames: $.datepicker.regional[ "fr" ].dayNames,
  monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort,
  monthNames: $.datepicker.regional[ "fr" ].monthNames
});

$.datepicker.iso8601Week( date )

Определение недели года для заданной даты: от 1 до 53.

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

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

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

Поиск недели года для даты.

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

$.datepicker.noWeekends

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

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

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

Установите DatePicker так, чтобы выходные дни не выбирались

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

Локализация

Datepicker поддерживает локализацию своего содержимого для разных языков и форматов дат. Каждая локализация содержится в собственном файле с кодом языка, добавленным к имени, например, jquery.ui.datepicker-fr.js для французского языка. Требуемый файл локализации должен быть включен после основного кода datepicker. Каждый файл локализации добавляет свои опции к набору доступных локализаций и автоматически применяет их в качестве параметров по умолчанию для всех экземпляров. Файлы локализаций находятся по адресу https://github.com/jquery/jquery-ui/tree/master/ui/i18n.

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

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

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

Затем вы можете переопределить отдельный datepicker для определённого региона:

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

Стилистика

Виджет datepicker использует фреймворк CSS фреймворк jQuery UI для стилизации своего внешнего вида. Если требуются специфические стили datepicker, для переопределений или в качестве ключей опции classes можно использовать следующие имена классов:

ui-datepicker: Внешний контейнер datepicker. Если datepicker встроенный, этот элемент дополнительно будет иметь класс ui-datepicker-inline. Если опция isRTL установлена, к этому элементу дополнительно будет добавлен класс ui-datepicker-rtl.
- ui-datepicker-header: Контейнер для заголовка datepicker.
  - ui-datepicker-prev: Элемент управления для выбора предыдущих месяцев.
  - ui-datepicker-next: Элемент управления для выбора последующих месяцев.
  - ui-datepicker-title: Контейнер для заголовка datepicker, содержащий месяц и год.
    - ui-datepicker-month: Текстовое отображение месяца или элемент <select>, если установлена опция changeMonth.
    - ui-datepicker-year: Текстовое отображение года или элемент <select>, если установлена опция changeYear.
- 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.
  - ui-datepicker-current: Кнопка для выбора текущей даты.

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

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

Зависимости

UI Core
Effects Core (необязательно; для использования с опцией showAnim)

Дополнительные примечания:

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

Параметры

altField

Тип: Selector или jQuery или Element

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

Элемент ввода, который должен обновляться выбранной датой из средства выбора даты. Используйте параметр altFormat для изменения формата даты в этом поле. Оставьте пустым, если альтернативное поле не требуется.

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

Инициализация средства выбора даты с указанным параметром altField:

$( ".selector" ).datepicker({
  altField: "#actualDate"
});

Получение или установка параметра altField после инициализации:

// Getter
var altField = $( ".selector" ).datepicker( "option", "altField" );
 
// Setter
$( ".selector" ).datepicker( "option", "altField", "#actualDate" );

altFormat

Тип: String

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

Формат dateFormat, который будет использоваться для параметра altField. Это позволяет отображать пользователю один формат даты для выбора, в то время как за кулисами используется другой формат. Полный список возможных форматов см. в функции formatDate

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

Инициализация средства выбора даты с указанным параметром altFormat:

$( ".selector" ).datepicker({
  altFormat: "yy-mm-dd"
});

Получение или установка параметра altFormat после инициализации:

// Getter
var altFormat = $( ".selector" ).datepicker( "option", "altFormat" );
 
// Setter
$( ".selector" ).datepicker( "option", "altFormat", "yy-mm-dd" );

appendText

Тип: String

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

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

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

Инициализация средства выбора даты с указанным параметром appendText:

$( ".selector" ).datepicker({
  appendText: "(yyyy-mm-dd)"
});

Получение или установка параметра appendText после инициализации:

// Getter
var appendText = $( ".selector" ).datepicker( "option", "appendText" );
 
// Setter
$( ".selector" ).datepicker( "option", "appendText", "(yyyy-mm-dd)" );

autoSize

Тип: Boolean

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

Установите в true для автоматического изменения размера поля ввода, чтобы разместить даты в текущем формате dateFormat.

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

Инициализация средства выбора даты с указанным параметром autoSize:

$( ".selector" ).datepicker({
  autoSize: true
});

Получение или установка параметра autoSize после инициализации:

// Getter
var autoSize = $( ".selector" ).datepicker( "option", "autoSize" );
 
// Setter
$( ".selector" ).datepicker( "option", "autoSize", true );

beforeShow

Тип: Function( Element input, Object inst )

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

Функция, которая принимает поле ввода и текущий экземпляр средства выбора даты и возвращает объект параметров для обновления средства выбора даты. Она вызывается непосредственно перед отображением средства выбора даты.

beforeShowDay

Тип: Function( Date date )

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

Функция, которая принимает дату в качестве параметра и должна возвращать массив со следующими элементами:

[0]: true/false, указывающее, можно ли выбрать эту дату или нет
[1]: имя класса CSS, которое нужно добавить в ячейку даты, или "" для представления по умолчанию
[2]: необязательная всплывающая подсказка для этой даты

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

buttonImage

Тип: String

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

URL изображения, которое будет использоваться для отображения средства выбора даты, когда параметр showOn установлен в "button" или "both". Если указано, параметр buttonText становится значением alt и не отображается напрямую.

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

Инициализация средства выбора даты с указанным параметром buttonImage:

$( ".selector" ).datepicker({
  buttonImage: "/images/datepicker.gif"
});

Получение или установка параметра buttonImage после инициализации:

// Getter
var buttonImage = $( ".selector" ).datepicker( "option", "buttonImage" );
 
// Setter
$( ".selector" ).datepicker( "option", "buttonImage", "/images/datepicker.gif" );

buttonImageOnly

Тип: Boolean

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

Определяет, следует ли отображать изображение кнопки отдельно, а не внутри элемента кнопки. Этот параметр актуален только в том случае, если параметр buttonImage также установлен.

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

Инициализация средства выбора даты с указанным параметром buttonImageOnly:

$( ".selector" ).datepicker({
  buttonImageOnly: true
});

Получение или установка параметра buttonImageOnly после инициализации:

// Getter
var buttonImageOnly = $( ".selector" ).datepicker( "option", "buttonImageOnly" );
 
// Setter
$( ".selector" ).datepicker( "option", "buttonImageOnly", true );

buttonText

Тип: String

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

Текст для отображения на кнопке триггера. Используйте вместе с параметром showOn, установленным в "button" или "both".

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

Инициализация средства выбора даты с указанным параметром buttonText:

$( ".selector" ).datepicker({
  buttonText: "Choose"
});

Получение или установка параметра buttonText после инициализации:

// Getter
var buttonText = $( ".selector" ).datepicker( "option", "buttonText" );
 
// Setter
$( ".selector" ).datepicker( "option", "buttonText", "Choose" );

calculateWeek

Тип: Function()

Значение по умолчанию: jQuery.datepicker.iso8601Week

Функция для вычисления номера недели года для заданной даты. Реализация по умолчанию использует определение ISO 8601: недели начинаются с понедельника; первая неделя года содержит первый четверг года.

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

Инициализация средства выбора даты с указанным параметром calculateWeek:

$( ".selector" ).datepicker({
  calculateWeek: myWeekCalc
});

Получение или установка параметра calculateWeek после инициализации:

// Getter
var calculateWeek = $( ".selector" ).datepicker( "option", "calculateWeek" );
 
// Setter
$( ".selector" ).datepicker( "option", "calculateWeek", myWeekCalc );

changeMonth

Тип: Boolean

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

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

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

Инициализация средства выбора даты с указанным параметром changeMonth:

$( ".selector" ).datepicker({
  changeMonth: true
});

Получение или установка параметра changeMonth после инициализации:

// Getter
var changeMonth = $( ".selector" ).datepicker( "option", "changeMonth" );
 
// Setter
$( ".selector" ).datepicker( "option", "changeMonth", true );

changeYear

Тип: Boolean

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

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

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

Инициализация средства выбора даты с указанным параметром changeYear:

$( ".selector" ).datepicker({
  changeYear: true
});

Получение или установка параметра changeYear после инициализации:

// Getter
var changeYear = $( ".selector" ).datepicker( "option", "changeYear" );
 
// Setter
$( ".selector" ).datepicker( "option", "changeYear", true );

closeText

Тип: String

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

Текст для отображения для ссылки закрытия. Используйте параметр showButtonPanel для отображения этой кнопки.

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

Инициализация средства выбора даты с указанным параметром closeText:

$( ".selector" ).datepicker({
  closeText: "Close"
});

Получение или установка параметра closeText после инициализации:

// Getter
var closeText = $( ".selector" ).datepicker( "option", "closeText" );
 
// Setter
$( ".selector" ).datepicker( "option", "closeText", "Close" );

constrainInput

Тип: Boolean

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

Когда true, ввод в поле ввода ограничивается теми символами, которые разрешены текущим параметром dateFormat.

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

Инициализация средства выбора даты с указанным параметром constrainInput:

$( ".selector" ).datepicker({
  constrainInput: false
});

Получение или установка параметра constrainInput после инициализации:

// Getter
var constrainInput = $( ".selector" ).datepicker( "option", "constrainInput" );
 
// Setter
$( ".selector" ).datepicker( "option", "constrainInput", false );

currentText

Тип: String

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

Текст для отображения для ссылки текущего дня. Используйте параметр showButtonPanel для отображения этой кнопки.

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

Инициализация средства выбора даты с указанным параметром currentText:

$( ".selector" ).datepicker({
  currentText: "Now"
});

Получение или установка параметра currentText после инициализации:

// Getter
var currentText = $( ".selector" ).datepicker( "option", "currentText" );
 
// Setter
$( ".selector" ).datepicker( "option", "currentText", "Now" );

Формат даты

Тип: Строка

По умолчанию: "mm/dd/yy"

Формат парсируемых и отображаемых дат. Полный список возможных форматов см. в функции formatDate.

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

Инициализируйте datepicker с указанным параметром dateFormat:

$( ".selector" ).datepicker({
  dateFormat: "yy-mm-dd"
});

Получите или установите параметр dateFormat после инициализации:

// Getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
 
// Setter
$( ".selector" ).datepicker( "option", "dateFormat", "yy-mm-dd" );

Дни недели (полные)

Тип: Массив

По умолчанию: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]

Список полных названий дней недели, начиная с воскресенья, для использования в параметре dateFormat.

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

Инициализируйте datepicker с указанным параметром dayNames:

$( ".selector" ).datepicker({
  dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ]
});

Получите или установите параметр dayNames после инициализации:

// Getter
var dayNames = $( ".selector" ).datepicker( "option", "dayNames" );
 
// Setter
$( ".selector" ).datepicker( "option", "dayNames", [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ] );

Дни недели (краткие)

Тип: Массив

По умолчанию: [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]

Список сокращенных названий дней недели, начиная с воскресенья, для использования в качестве заголовков столбцов в datepicker.

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

Инициализируйте datepicker с указанным параметром dayNamesMin:

$( ".selector" ).datepicker({
  dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ]
});

Получите или установите параметр dayNamesMin после инициализации:

// Getter
var dayNamesMin = $( ".selector" ).datepicker( "option", "dayNamesMin" );
 
// Setter
$( ".selector" ).datepicker( "option", "dayNamesMin", [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ] );

Дни недели (сокращенные)

Тип: Массив

По умолчанию: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]

Список сокращенных названий дней недели, начиная с воскресенья, для использования в параметре dateFormat.

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

Инициализируйте datepicker с указанным параметром dayNamesShort:

$( ".selector" ).datepicker({
  dayNamesShort: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ]
});

Получите или установите параметр dayNamesShort после инициализации:

// Getter
var dayNamesShort = $( ".selector" ).datepicker( "option", "dayNamesShort" );
 
// Setter
$( ".selector" ).datepicker( "option", "dayNamesShort", [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ] );

Дата по умолчанию

Тип: Дата или Число или Строка

По умолчанию: null

Устанавливает дату, которая будет выделена при первом открытии поля, если поле пустое. Укажите дату через объект Date или строку в текущем формате dateFormat, или число дней от сегодня (например, +7) или строку со значениями и периодами ('y' — годы, 'm' — месяцы, 'w' — недели, 'd' — дни, например '+1m +7d'), или null для текущей даты.

Поддерживаются несколько типов:

Дата: Объект даты, содержащий дату по умолчанию.
Число: Количество дней от сегодняшнего дня. Например, 2 — две даты от сегодня, а -1 — вчерашняя дата.
Строка: Строка в формате, определённом параметром dateFormat, или относительная дата. Относительные даты должны содержать пары значение-период; допустимые периоды — "y" для лет, "m" для месяцев, "w" для недель и "d" для дней. Например, "+1m +7d" — один месяц и семь дней от сегодня.

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

Инициализируйте datepicker с указанным параметром defaultDate:

$( ".selector" ).datepicker({
  defaultDate: +7
});

Получите или установите параметр defaultDate после инициализации:

// Getter
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
 
// Setter
$( ".selector" ).datepicker( "option", "defaultDate", +7 );

Длительность

Тип: или Строка

По умолчанию: "normal"

Управление скоростью появления datepicker, может быть временем в миллисекундах или строкой, представляющей одну из трех предопределённых скоростей ("медленно", "нормально", "быстро").

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

Инициализируйте datepicker с указанным параметром duration:

$( ".selector" ).datepicker({
  duration: "slow"
});

Получите или установите параметр duration после инициализации:

// Getter
var duration = $( ".selector" ).datepicker( "option", "duration" );
 
// Setter
$( ".selector" ).datepicker( "option", "duration", "slow" );

Первый день недели

Тип: Целое число

По умолчанию: 0

Установите первый день недели: воскресенье — 0, понедельник — 1 и т. д.

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

Инициализируйте datepicker с указанным параметром firstDay:

$( ".selector" ).datepicker({
  firstDay: 1
});

Получите или установите параметр firstDay после инициализации:

// Getter
var firstDay = $( ".selector" ).datepicker( "option", "firstDay" );
 
// Setter
$( ".selector" ).datepicker( "option", "firstDay", 1 );

Перейти к текущей дате

Тип: Булево

По умолчанию: false

Когда true, ссылка текущей даты переходит к выбранной дате, а не к сегодняшней.

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

Инициализируйте datepicker с указанным параметром gotoCurrent:

$( ".selector" ).datepicker({
  gotoCurrent: true
});

Получите или установите параметр gotoCurrent после инициализации:

// Getter
var gotoCurrent = $( ".selector" ).datepicker( "option", "gotoCurrent" );
 
// Setter
$( ".selector" ).datepicker( "option", "gotoCurrent", true );

Скрыть, если нет предыдущей/следующей даты

Тип: Булево

По умолчанию: false

Обычно ссылки "предыдущая" и "следующая" отключаются, когда они не применимы (см. параметры minDate и maxDate). Вы можете скрыть их полностью, установив этот атрибут в true.

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

Инициализируйте datepicker с указанным параметром hideIfNoPrevNext:

$( ".selector" ).datepicker({
  hideIfNoPrevNext: true
});

Получите или установите параметр hideIfNoPrevNext после инициализации:

// Getter
var hideIfNoPrevNext = $( ".selector" ).datepicker( "option", "hideIfNoPrevNext" );
 
// Setter
$( ".selector" ).datepicker( "option", "hideIfNoPrevNext", true );

Направление текста

Тип: Булево

По умолчанию: false

Указывает, отображается ли текст справа налево.

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

Инициализируйте datepicker с указанным параметром isRTL:

$( ".selector" ).datepicker({
  isRTL: true
});

Получите или установите параметр isRTL после инициализации:

// Getter
var isRTL = $( ".selector" ).datepicker( "option", "isRTL" );
 
// Setter
$( ".selector" ).datepicker( "option", "isRTL", true );

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

Тип: Дата или Число или Строка

По умолчанию: null

Максимальная дата для выбора. При значении null максимальной даты нет.

Поддерживаются несколько типов:

Дата: Объект даты, содержащий максимальную дату.
Число: Количество дней от сегодняшнего дня. Например, 2 — две даты от сегодня, а -1 — вчерашняя дата.
Строка: Строка в формате, определённом параметром dateFormat, или относительная дата. Относительные даты должны содержать пары значение-период; допустимые периоды — "y" для лет, "m" для месяцев, "w" для недель и "d" для дней. Например, "+1m +7d" — один месяц и семь дней от сегодня.

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

Инициализируйте datepicker с указанным параметром maxDate:

$( ".selector" ).datepicker({
  maxDate: "+1m +1w"
});

Получите или установите параметр maxDate после инициализации:

// Getter
var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
 
// Setter
$( ".selector" ).datepicker( "option", "maxDate", "+1m +1w" );

Минимальная дата

Тип: Дата или Число или Строка

По умолчанию: null

Минимальная дата для выбора. При значении null минимальной даты нет.

Поддерживаются несколько типов:

Дата: Объект даты, содержащий минимальную дату.
Число: Количество дней от сегодняшнего дня. Например, 2 — две даты от сегодня, а -1 — вчерашняя дата.
Строка: Строка в формате, определённом параметром dateFormat, или относительная дата. Относительные даты должны содержать пары значение-период; допустимые периоды — "y" для лет, "m" для месяцев, "w" для недель и "d" для дней. Например, "+1m +7d" — один месяц и семь дней от сегодня.

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

Инициализируйте datepicker с указанным параметром minDate:

$( ".selector" ).datepicker({
  minDate: new Date(2007, 1 - 1, 1)
});

Получите или установите параметр minDate после инициализации:

// Getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
 
// Setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );

Месяцы (полные)

Тип: Массив

По умолчанию:

[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]

Список полных названий месяцев для использования в параметре dateFormat.

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

Инициализируйте datepicker с указанным параметром monthNames:

$( ".selector" ).datepicker({
  monthNames: [ "Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December" ]
});

Получите или установите параметр monthNames после инициализации:

// Getter
var monthNames = $( ".selector" ).datepicker( "option", "monthNames" );
 
// Setter
$( ".selector" ).datepicker( "option", "monthNames", [ "Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December" ] );

monthNamesShort

Type: Array

Default: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]

Список сокращенных названий месяцев, используемых в заголовке месяца каждого элемента datepicker и запрашиваемых через параметр dateFormat.

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

Инициализация datepicker с указанным параметром monthNamesShort:

$( ".selector" ).datepicker({
  monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec" ]
});

Получение или установка параметра monthNamesShort после инициализации:

// Getter
var monthNamesShort = $( ".selector" ).datepicker( "option", "monthNamesShort" );
 
// Setter
$( ".selector" ).datepicker( "option", "monthNamesShort", [ "Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec" ] );

navigationAsDateFormat

Type: Boolean

Default: false

Определяет, следует ли интерпретировать параметры currentText, prevText и nextText как даты с помощью функции formatDate, что позволяет отображать, например, названия целевых месяцев.

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

Инициализация datepicker с указанным параметром navigationAsDateFormat:

$( ".selector" ).datepicker({
  navigationAsDateFormat: true
});

Получение или установка параметра navigationAsDateFormat после инициализации:

// Getter
var navigationAsDateFormat = $( ".selector" ).datepicker( "option", "navigationAsDateFormat" );
 
// Setter
$( ".selector" ).datepicker( "option", "navigationAsDateFormat", true );

nextText

Type: String

Default: "Next"

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

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

Инициализация datepicker с указанным параметром nextText:

$( ".selector" ).datepicker({
  nextText: "Later"
});

Получение или установка параметра nextText после инициализации:

// Getter
var nextText = $( ".selector" ).datepicker( "option", "nextText" );
 
// Setter
$( ".selector" ).datepicker( "option", "nextText", "Later" );

numberOfMonths

Type: Number or Array

Default: 1

Количество месяцев, отображаемых одновременно.

Поддерживается несколько типов:

Number: Количество месяцев для отображения в одной строке.
Array: Массив, определяющий количество строк и столбцов для отображения.

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

Инициализация datepicker с указанным параметром numberOfMonths:

$( ".selector" ).datepicker({
  numberOfMonths: [ 2, 3 ]
});

Получение или установка параметра numberOfMonths после инициализации:

// Getter
var numberOfMonths = $( ".selector" ).datepicker( "option", "numberOfMonths" );
 
// Setter
$( ".selector" ).datepicker( "option", "numberOfMonths", [ 2, 3 ] );

onChangeMonthYear

Type: Function( Integer year, Integer month, Object inst )

Default: null

Вызывается, когда datepicker переходит к новому месяцу и/или году. Функция получает в качестве параметров выбранный год, месяц (1-12) и экземпляр datepicker. this относится к связанному полю ввода.

onClose

Type: Function( String dateText, Object inst )

Default: null

Вызывается при закрытии datepicker, независимо от того, выбрана дата или нет. Функция получает в качестве параметров выбранную дату в виде текста ("", если ни одна не выбрана) и экземпляр datepicker. this относится к связанному полю ввода.

onSelect

Type: Function( String dateText, Object inst )

Default: null

Вызывается при выборе даты в datepicker. Функция получает в качестве параметров выбранную дату в виде текста и экземпляр datepicker. this относится к связанному полю ввода.

onUpdateDatepicker

Type: Function( Object inst )

Default: null

Вызывается при обновлении DOM-дерева виджета datepicker. Функция получает в качестве единственного параметра экземпляр datepicker. this относится к связанному полю ввода. (версия добавлена: 1.13)

prevText

Type: String

Default: "Prev"

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

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

Инициализация datepicker с указанным параметром prevText:

$( ".selector" ).datepicker({
  prevText: "Earlier"
});

Получение или установка параметра prevText после инициализации:

// Getter
var prevText = $( ".selector" ).datepicker( "option", "prevText" );
 
// Setter
$( ".selector" ).datepicker( "option", "prevText", "Earlier" );

selectOtherMonths

Type: Boolean

Default: false

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

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

Инициализация datepicker с указанным параметром selectOtherMonths:

$( ".selector" ).datepicker({
  selectOtherMonths: true
});

Получение или установка параметра selectOtherMonths после инициализации:

// Getter
var selectOtherMonths = $( ".selector" ).datepicker( "option", "selectOtherMonths" );
 
// Setter
$( ".selector" ).datepicker( "option", "selectOtherMonths", true );

shortYearCutoff

Type: Number or String

Default: "+10"

Предельный год для определения столетия даты (используется в сочетании с dateFormat 'y'). Любые даты, введенные с годом, меньшим или равным предельному году, считаются относящимися к текущему столетию, а те, которые больше его, считаются относящимися к предыдущему столетию.

Поддерживается несколько типов:

Number: Значение от 0 до 99, указывающее предельный год.
String: Относительное количество лет от текущего года, например, "+3" или "-5".

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

Инициализация datepicker с указанным параметром shortYearCutoff:

$( ".selector" ).datepicker({
  shortYearCutoff: 50
});

Получение или установка параметра shortYearCutoff после инициализации:

// Getter
var shortYearCutoff = $( ".selector" ).datepicker( "option", "shortYearCutoff" );
 
// Setter
$( ".selector" ).datepicker( "option", "shortYearCutoff", 50 );

showAnim

Type: String

Default: "show"

Название анимации, используемой для отображения и скрытия datepicker. Используйте "show" (по умолчанию), "slideDown", "fadeIn", любой из эффектов jQuery UI. Установите пустую строку, чтобы отключить анимацию.

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

Инициализация datepicker с указанным параметром showAnim:

$( ".selector" ).datepicker({
  showAnim: "fold"
});

Получение или установка параметра showAnim после инициализации:

// Getter
var showAnim = $( ".selector" ).datepicker( "option", "showAnim" );
 
// Setter
$( ".selector" ).datepicker( "option", "showAnim", "fold" );

showButtonPanel

Type: Boolean

Default: false

Отображать ли панель кнопок под календарем. Панель кнопок содержит две кнопки: кнопку «Сегодня», которая ведет к текущему дню, и кнопку «Готово», которая закрывает datepicker. Текст кнопок можно настроить с помощью параметров currentText и closeText соответственно.

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

Инициализация datepicker с указанным параметром showButtonPanel:

$( ".selector" ).datepicker({
  showButtonPanel: true
});

Получение или установка параметра showButtonPanel после инициализации:

// Getter
var showButtonPanel = $( ".selector" ).datepicker( "option", "showButtonPanel" );
 
// Setter
$( ".selector" ).datepicker( "option", "showButtonPanel", true );

showCurrentAtPos

Type: Number

Default: 0

При отображении нескольких месяцев с помощью параметра numberOfMonths, параметр showCurrentAtPos определяет, в какой позиции отображать текущий месяц.

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

Инициализация datepicker с указанным параметром showCurrentAtPos:

$( ".selector" ).datepicker({
  showCurrentAtPos: 3
});

Получение или установка параметра showCurrentAtPos после инициализации:

// Getter
var showCurrentAtPos = $( ".selector" ).datepicker( "option", "showCurrentAtPos" );
 
// Setter
$( ".selector" ).datepicker( "option", "showCurrentAtPos", 3 );

showMonthAfterYear

Type: Boolean

Default: false

Отображать ли месяц после года в заголовке.

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

Инициализация datepicker с указанным параметром showMonthAfterYear:

$( ".selector" ).datepicker({
  showMonthAfterYear: true
});

Получение или установка параметра showMonthAfterYear после инициализации:

// Getter
var showMonthAfterYear = $( ".selector" ).datepicker( "option", "showMonthAfterYear" );
 
// Setter
$( ".selector" ).datepicker( "option", "showMonthAfterYear", true );

showOn

Тип: Строка

По умолчанию: "focus"

Когда должен отображаться календарь выбора даты. Календарь может отображаться при получении фокуса полем ("focus"), при нажатии на кнопку ("button") или при возникновении любого из этих событий ("both").

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

Инициализируйте календарь выбора даты с указанным параметром showOn:

$( ".selector" ).datepicker({
  showOn: "both"
});

Получите или установите параметр showOn после инициализации:

// Getter
var showOn = $( ".selector" ).datepicker( "option", "showOn" );
 
// Setter
$( ".selector" ).datepicker( "option", "showOn", "both" );

showOptions

Тип: Объект

По умолчанию: {}

Если вы используете один из эффектов jQuery UI для параметра showAnim, вы можете указать дополнительные свойства для этой анимации с помощью этого параметра.

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

Инициализируйте календарь выбора даты с указанным параметром showOptions:

$( ".selector" ).datepicker({
  showOptions: { direction: "up" }
});

Получите или установите параметр showOptions после инициализации:

// Getter
var showOptions = $( ".selector" ).datepicker( "option", "showOptions" );
 
// Setter
$( ".selector" ).datepicker( "option", "showOptions", { direction: "up" } );

showOtherMonths

Тип: Булево

По умолчанию: false

Определяет, будут ли отображаться даты других месяцев (невыбираемые) в начале или конце текущего месяца. Чтобы сделать эти даты выбираемыми, используйте параметр selectOtherMonths.

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

Инициализируйте календарь выбора даты с указанным параметром showOtherMonths:

$( ".selector" ).datepicker({
  showOtherMonths: true
});

Получите или установите параметр showOtherMonths после инициализации:

// Getter
var showOtherMonths = $( ".selector" ).datepicker( "option", "showOtherMonths" );
 
// Setter
$( ".selector" ).datepicker( "option", "showOtherMonths", true );

showWeek

Тип: Булево

По умолчанию: false

Если значение равно true, добавляется столбец для отображения недели года. Параметр calculateWeek определяет, как рассчитывается неделя года. Возможно, вам также потребуется изменить параметр firstDay.

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

Инициализируйте календарь выбора даты с указанным параметром showWeek:

$( ".selector" ).datepicker({
  showWeek: true
});

Получите или установите параметр showWeek после инициализации:

// Getter
var showWeek = $( ".selector" ).datepicker( "option", "showWeek" );
 
// Setter
$( ".selector" ).datepicker( "option", "showWeek", true );

stepMonths

Тип: Число

По умолчанию: 1

Установите, на сколько месяцев переходить при нажатии на ссылки "предыдущий/следующий".

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

Инициализируйте календарь выбора даты с указанным параметром stepMonths:

$( ".selector" ).datepicker({
  stepMonths: 3
});

Получите или установите параметр stepMonths после инициализации:

// Getter
var stepMonths = $( ".selector" ).datepicker( "option", "stepMonths" );
 
// Setter
$( ".selector" ).datepicker( "option", "stepMonths", 3 );

weekHeader

Тип: Строка

По умолчанию: "Wk"

Текст для отображения в заголовке столбца недели года. Используйте параметр showWeek для отображения этого столбца.

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

Инициализируйте календарь выбора даты с указанным параметром weekHeader:

$( ".selector" ).datepicker({
  weekHeader: "W"
});

Получите или установите параметр weekHeader после инициализации:

// Getter
var weekHeader = $( ".selector" ).datepicker( "option", "weekHeader" );
 
// Setter
$( ".selector" ).datepicker( "option", "weekHeader", "W" );

yearRange

Тип: Строка

По умолчанию: "c-10:c+10"

Диапазон годов, отображаемых в выпадающем списке лет: либо относительно текущего года ("-nn:+nn"), относительно текущего выбранного года ("c-nn:c+nn"), абсолютный ("nnnn:nnnn"), или комбинации этих форматов ("nnnn:-nn"). Обратите внимание, что этот параметр влияет только на то, что отображается в выпадающем списке. Чтобы ограничить выбираемые даты, используйте параметры minDate и/или maxDate.

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

Инициализируйте календарь выбора даты с указанным параметром yearRange:

$( ".selector" ).datepicker({
  yearRange: "2002:2012"
});

Получите или установите параметр yearRange после инициализации:

// Getter
var yearRange = $( ".selector" ).datepicker( "option", "yearRange" );
 
// Setter
$( ".selector" ).datepicker( "option", "yearRange", "2002:2012" );

yearSuffix

Тип: Строка

По умолчанию: ""

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

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

Инициализируйте календарь выбора даты с указанным параметром yearSuffix:

$( ".selector" ).datepicker({
  yearSuffix: "CE"
});

Получите или установите параметр yearSuffix после инициализации:

// Getter
var yearSuffix = $( ".selector" ).datepicker( "option", "yearSuffix" );
 
// Setter
$( ".selector" ).datepicker( "option", "yearSuffix", "CE" );

Методы

destroy()Возвращает: jQuery (только для плагина)

Полностью удаляет функциональность datepicker. Это вернет элемент в состояние до инициализации.

Этот метод не принимает аргументы.

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

Вызов метода destroy:

$( ".selector" ).datepicker( "destroy" );

dialog( date [, onSelect ] [, options ] [, pos ] )Возвращает: jQuery (только для плагина)

Открывает datepicker в диалоговом окне.

date

Тип: Строка или Дата

Начальная дата.
onSelect

Тип: Функция()

Обратный вызов при выборе даты. Функция получает текст даты и экземпляр datepicker в качестве параметров.
options

Тип: Параметры

Новые параметры для datepicker.
pos

Тип: Number[2] или MouseEvent

Позиция верхнего левого угла диалогового окна как [x, y] или MouseEvent, содержащая координаты. Если не указано, диалоговое окно центрируется на экране.

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

Вызов метода dialog:

$( ".selector" ).datepicker( "dialog", "10/12/2012" );

getDate()Возвращает: Дата

Возвращает текущую дату для datepicker или null, если дата не выбрана.

Этот метод не принимает аргументы.

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

Вызов метода getDate:

var currentDate = $( ".selector" ).datepicker( "getDate" );

hide()Возвращает: jQuery (только для плагина)

Закрывает ранее открытый datepicker.

Этот метод не принимает аргументы.

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

Вызов метода hide:

$( ".selector" ).datepicker( "hide" );

isDisabled()Возвращает: Булево

Определяет, был ли datepicker отключен.

Этот метод не принимает аргументы.

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

Вызов метода isDisabled:

var isDisabled = $( ".selector" ).datepicker( "isDisabled" );

option( optionName )Возвращает: Объект

Получает значение, связанное с указанным optionName.

Примечание: Для параметров, имеющих объекты в качестве значения, вы можете получить значение определенного ключа, используя нотацию точек. Например, "foo.bar" получит значение свойства bar параметра foo.

optionName

Тип: Строка

Имя параметра для получения.

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

Вызов метода:

var isDisabled = $( ".selector" ).datepicker( "option", "disabled" );

option()Возвращает: Объект

Получает объект, содержащий пары ключ/значение, представляющие текущий хэш параметров datepicker.

Эта сигнатура не принимает аргументы.

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

Вызов метода:

var options = $( ".selector" ).datepicker( "option" );

option( optionName, value )Возвращает: jQuery (только для плагина)

Устанавливает значение параметра datepicker, связанного с указанным optionName.

Примечание: Для параметров, имеющих объекты в качестве значения, можно установить значение только одного свойства, используя нотацию точек для optionName. Например, "foo.bar" обновит только свойство bar параметра foo.

optionName

Тип: Строка

Имя параметра для установки.
value

Тип: Объект

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

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

Вызов метода:

$( ".selector" ).datepicker( "option", "disabled", true );

option( options )Возвращает: jQuery (только для плагина)

Устанавливает один или несколько параметров для datepicker.

options

Тип: Объект

Карта пар параметр-значение для установки.

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

Вызов метода:

$( ".selector" ).datepicker( "option", { disabled: true } );

refresh()Возвращает: jQuery (только для плагина)

Перерисовывает datepicker после внесения внешних изменений.

Этот метод не принимает аргументы.

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

Вызов метода refresh:

$( ".selector" ).datepicker( "refresh" );

setDate( date )Возвращает: jQuery (только для плагина)

Устанавливает дату для datepicker. Новая дата может быть Date объектом или строкой в текущем формате даты date format (например, "01/26/2009"), числом дней от сегодняшнего дня (например, +7) или строкой со значениями и периодами ("y" для лет, "m" для месяцев, "w" для недель, "d" для дней, например, "+1m +7d"), или null для очистки выбранной даты.

date

Тип: Строка или Дата

Новая дата.

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

Вызов метода setDate:

$( ".selector" ).datepicker( "setDate", "10/12/2012" );

show()Возвращает: jQuery (только для плагина)

Открывает datepicker. Если datepicker прикреплен к полю ввода, поле ввода должно быть видимым для отображения datepicker.

Этот метод не принимает аргументы.

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

Вызов метода show:

$( ".selector" ).datepicker( "show" );

Пример:

Простой jQuery UI Datepicker.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datepicker demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<div id="datepicker"></div>
 
<script>
$( "#datepicker" ).datepicker();
</script>
 
</body>
</html>

Виджет Датапикер