Необходимо применить на веб-странице виджет Datepicker.

Опция

Описание

disabled

Значение по умолчанию — false. Если установить значение true, то при инициализации функциональность виджета Datepicker будет недоступна, однако ее можно включить впоследствии, например, при выполнении какого-либо условия

altField

jQuery селектор для другого поля, которое должно быть обновлено, как только будет выбрана дата в Datepicker. Формат даты в этом дополнительном поле устанавливается с помощью опции altFormat

altFormat

Формат даты, который будет использоваться для опции altField. Эти настройки позволяют показывать пользователю один формат даты, тогда как для вычислений может быть установлен другой формат. Полный список возможных форматов можно найти на http://docs.jquery.com/UI/Datepicker/formatDate

appendText

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

autoSize

Значение по умолчанию — false. Если установить значение true, поле ввода будет автоматически изменять свой размер, чтобы полностью вместить выбранную дату в текущем формате

buttonImage

Адрес картинки, отображающейся на кнопке, с помощью которой можно вызывать календарь. Используется совместно с опцией showOn, когда та принимает значения ‘button’ или ‘both’. Если был определен текст в опции buttonText, он становится значением атрибута alt картинки

buttonImageOnly

Если для этой опции установить значение true, то картинка, адрес которой определен в опции buttonImage, будет отображаться не на кнопке, а сама по себе

Опция

Описание

buttonText

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

calculateWeek

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

changeMonth

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

changeYear

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

closeText

Эта опция используется совместно с showButtonPanel, если последняя имеет значение true. Значение опции closeText определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его

constrainInput

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

currentText

Эта опция используется совместно с showButtonPanel, если последняя имеет значение true. Значение опции currentText определяется в файле локализации, когда он присутствует, но это значение можно переопределить, явно указав его

dateFormat

Определяет формат даты. Значение опции dateFormat определяется в файле локализации, если он задействован, но это значение можно переопределить, явно указав его. Полный список возможных форматов можно найти на http://docs.jquery.com/UI/Datepicker/formatDate

dayNames

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

dayNamesMin

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

dayNamesShort

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

defaultDate

Устанавливает дату, которая будет подсвечена при первом открытии, если поле выбора даты пустое. Опция может быть определена через объект Date, либо как число дней от текущего дня (например

+7 или 15), либо как строка значений, определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1m +7d’), и, наконец, как null для текущего дня

Опция

Описание

duration

Длительность эффекта анимации при открытии (закрытии) календаря. Может принимать значения в виде строки — ‘fast’, ‘normal’ (по умолчанию), ‘slow’ или в виде числа в миллисекундах. Если передать пустую строку, календарь будет открываться и закрываться без эффекта анимации

firstDay

Опция устанавливает первый день недели: воскресенье — 0, понедельник — 1,… Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его

gotoCurrent

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

hideIfNoPrevNext

Если вы ограничиваете диапазон доступных дат с помощью опций minDate и maxDate, то при достижении края диапазона стрелки "Назад" и "Вперед" становятся неактивными. Но их можно и совсем скрыть, передав в опции hideIfNoPrevNext значение true

isRTL

Для этой опции необходимо установить значение true, если используется язык с написанием справа налево. Определяется в файле локализации, если он задействован

maxDate

Устанавливает максимальную возможную для выбора дату через объект Date, или как число дней от текущего (например +7), или как строку значений, определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1y +1m’), или null при отсутствии ограничения

minDate

Устанавливает минимальную возможную для выбора дату через объект Date, или как число дней от текущего (например -7), или как строку значений, определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘-1y -1m’), или null при отсутствии ограничения

monthNames

Массив, содержащий полные названия месяцев. Определяется

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

monthNamesShort

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

navigationAsDateFormat

Значение по умолчанию — false. Если установить значение true, функция dateFormat будет примерена к значениям опций nextText, prevText и currentText, чтобы отображать при навигации, например, предыдущее и последующее названия месяцев

nextText

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

Опция

Описание

numberOfMonths

Эта опция определяет, сколько месяцев сразу нужно показать. Значение опции может быть просто числом или массивом, состоящим из двух элементов, которые определяют соответственно количество строк и столбцов. Например, значение [2, 3] отобразит календарь в две строки по три месяца

prevText

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

selectOtherMonths

Значение по умолчанию — false. Если указать true, то даты предыдущего/следующего месяца можно будет выбирать так же, как и даты текущего месяца. Используется только совместно с showOtherMonths: true

shortYearCutoff

Значение по умолчанию +10. Эта опция возможна только при установке в dateFormat двузначной записи года и играет роль компенсатора для определения века. Если значение передано в виде числа, используется как есть. Если значение передано в виде строки, конвертируется в число и добавляется к текущему значению года. После того как значение определено, все данные, выступающие в качестве значения года, и меньшие и равные ему считаются годами текущего века. Значения бо´ льшие — считаются годами предыдущего века

showAnim

Определяет тип анимации при открывании календаря. Значение по умолчанию — show (при закрывании будет использован hide). Без подключения дополнительных файлов возможны эффекты ‘slideDown’ и ‘fadeIn’ (‘slideUp’ и ‘fadeOut’ — при закрывании). Также возможны любые эффекты jQuery UI Effects при условии их дополнительного подключения

showButtonPanel

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

showCurrentAsPos

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

по умолчанию — 0 (текущий месяц отображается в верхнем левом углу)

showMonthAfterYear

Значение по умолчанию — false (в заголовке название месяца идет перед годом). При указании значения true название месяца будет следовать за годом

showOn

Значение по умолчанию — ‘focus’ (календарь открывается при щелчке в поле ввода). Другие возможные значения — ‘button’ и ‘both’. Рядом с полем ввода появится кнопка. В первом случае календарь будет открываться по щелчку на кнопке, а во втором случае как по щелчку на кнопке, так и при получении фокуса полем ввода

showOptions

Если вы применяете один из эффектов jQuery UI Effects, с помощью этой опции ему можно передать дополнительные настройки. Например: showOptions: {direction: ‘up’}

Опция

Описание

showOtherMonths

Значение по умолчанию — false. Если указать true, то на календаре будут отображаться дни предыдущего и/или следующего месяца без возможности их выбора. Чтобы иметь возможность выбора этих дат, используйте опцию selectOtherMonths

showWeek

Значение по умолчанию — false. Установка значения true приведет к добавлению дополнительной колонки, где будет отображаться порядковый новер недели в году. Для определения собственной функции вычисления порядкового номера недели предусмотрена опция calculateWeek

stepMonths

Определяет, насколько месяцев сдвигать календарь при щелчке по ссылкам Следующий и Предыдущий. По умолчанию — 1

weekHeader

В этой опции можно определить свой текст, который будет выводиться в заголовке колонки с порядковыми номерами недель. Опция используется вместе с showWeek: true

yearRange

Управление диапазоном лет, отображаемых в выпадающем списке (при использовании опции changeYear). Значение по умолчанию — ‘-10:+10’ относительно текущего года. Возможно указание и абсолютного формата, например ‘1980:2025’

yearSuffix

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

Опция

Тип

Описание события

create

datepickercreate

Событие наступает в момент инициализации

beforeShow

function(input, inst)

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

Функция принимает в качестве аргумента объект, характеризующий текстовое поле ввода, с кото-

рым работает виджет

Опция

Тип

Описание события

beforeShowDay

function(date)

В этой опции можно определить пользовательскую функцию, которая будет принимать в качестве аргумента выбранную дату. Функция должна возвратить массив, где элемент с индексом [0] — true или false показывает, возможен или нет выбор этой даты. Элемент с индексом [1] содержит имя класса (классов) для отображения даты, элемент с индексом [2] (опционально) — текст всплывающей подсказки для даты. Функция будет вызываться для каждой даты в календаре в момент наведения указателя мыши

onChangeMonthYear

function(year, month, inst)

Здесь можно определить функцию, которая будет вызываться при смене месяца или года в календаре. Функция принимает три аргумента. Первые два аргумента — это новые значения года и месяца, третий аргумент — объект datepicker

onClose

function(dateText, inst)

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

onSelect

function(dateText, inst)

В этой опции определяется функция, которая будет вызвана, когда в календаре выбрана какая-либо дата

Метод

Описание

destroy

.datepicker (‘destroy’)

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

disable

.datepicker (‘disable’)

Временно запрещает использование всей функциональности виджета. Вновь разрешить ее можно с помощью метода enable

enable

.datepicker (enable’)

Разрешает использование всей функциональности виджета, если ранее она была запрещена методом disable

option

.datepicker (‘option’, optionName, [value])

Устанавливает значение любой опции виджета после инициализации

option (‘option’, optionName)

С помощью этого метода можно получить значение любой опции виджета после инициализации

widget

Обеспечивает доступ к объекту, который представляет собой элемент с функциональностью Datepicker

dialog

.datepicker (‘dialog’, dateText, [onSelect], [settings], [pos] )

Открывает виджет Datepicker в режиме диалогового окна. В аргументе dateText передается дата, на которой должен быть открыт календарь. Остальные аргументы необязательные. В аргументе onSelect можно передать функцию, которая будет вызвана в момент выбора даты в календаре, в аргументе settings можно передать объект

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

isDisabled

.datepicker (‘isDisabled’)

Метод возвращает значение true, если к виджету был применен метод disable, и false — в противном случае

hide

.datepicker (‘hide’, [speed])

Скрывает ранее открытый календарь

Метод

Описание

show

.datepicker (‘show’)

Открывает календарь

getDate

.datepicker (‘getDate’)

Метод возвращает дату, выбранную в календаре

setDate

.datepicker (‘setDate’, date)

Метод позволяет установить дату в календаре. Значением аргумента date может быть строка (например: 25.10.2024). Число, определяющее количество дней

от текущей даты (например: +7 или -14). Строка, опреде-

ляющая период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например: ‘+1m +7d’). Значение null установит текущую дату