JqueryUI — Datepicker

Метод $ (селектор, контекст) .datepicker (параметры)

Метод datepicker (options) объявляет, что элемент <input> (или <div>, или <span>, в зависимости от того, как вы выбираете отображение календаря) должен управляться как средство выбора даты. Параметр options — это объект, который определяет поведение и внешний вид элементов DatePicker.

Синтаксис

$(selector, context).datepicker(options);

Вы можете предоставить один или несколько параметров одновременно, используя объект Javascript. Если нужно указать несколько параметров, разделите их запятой следующим образом:

$(selector, context).datepicker({option1: value1, option2: value2..... });

В следующей таблице перечислены различные параметры, которые можно использовать с этим методом —

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$(".selector").datepicker(
   { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] }
);

$(".selector").datepicker(
   { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] }
);

$(".selector").datepicker(
   { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] }
);

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

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

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

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

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

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

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

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

$(".selector").datepicker(
   { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ]  }
);

$(".selector").datepicker(
   { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] }
);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эта опция указывает селектор jQuery для поля, которое также обновляется при любом выборе даты. Параметр altFormat может использоваться для установки формата для этого значения. Это очень полезно для установки значений даты в скрытый элемент ввода, который будет отправлен на сервер, при отображении более удобного для пользователя формата. По умолчанию его значение равно «» .

Опция — altField

Эта опция указывает селектор jQuery для поля, которое также обновляется при любом выборе даты. Параметр altFormat может использоваться для установки формата для этого значения. Это очень полезно для установки значений даты в скрытый элемент ввода, который будет отправлен на сервер, при отображении более удобного для пользователя формата. По умолчанию его значение равно «» .

Синтаксис

Эта опция используется, когда указана опция altField . Он предоставляет формат для значения, которое будет записано в альтернативный элемент. По умолчанию его значение равно «» .

Опция — altFormat

Эта опция используется, когда указана опция altField . Он предоставляет формат для значения, которое будет записано в альтернативный элемент. По умолчанию его значение равно «» .

Синтаксис

Этот параметр представляет собой строковое значение, которое должно быть помещено после элемента <input> и предназначено для отображения инструкций для пользователя. По умолчанию его значение равно «» .

Опция — appendText

Этот параметр представляет собой строковое значение, которое должно быть помещено после элемента <input> и предназначено для отображения инструкций для пользователя. По умолчанию его значение равно «» .

Синтаксис

Если для этого параметра установлено значение true, элемент <input> изменяет размер, чтобы он соответствовал формату даты средства выбора даты, установленному с помощью параметра dateFormat. По умолчанию его значение равно false .

Опция — авторазмер

Если для этого параметра установлено значение true, элемент <input> изменяет размер, чтобы он соответствовал формату даты средства выбора даты, установленному с помощью параметра dateFormat. По умолчанию его значение равно false .

Синтаксис

Этот параметр является функцией обратного вызова, которая вызывается непосредственно перед отображением средства выбора даты, когда элемент <input> и экземпляр datepicker передаются в качестве параметров. Эта функция может возвращать хэш опций, используемый для изменения выбора даты. По умолчанию его значение равно «» .

Вариант — beforeShow

Этот параметр является функцией обратного вызова, которая вызывается непосредственно перед отображением средства выбора даты, когда элемент <input> и экземпляр datepicker передаются в качестве параметров. Эта функция может возвращать хэш опций, используемый для изменения выбора даты. По умолчанию его значение равно «» .

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

Вариант — beforeShowDay

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

[0] — true для выбора даты, false в противном случае.

[1] — Строка разделенных пробелами имен классов CSS для применения или пустая строка для применения нет

[2] — необязательная строка для применения всплывающей подсказки к элементу дня

По умолчанию его значение равно нулю .

Этот параметр указывает путь к изображению, отображаемому на включенной кнопке, если для параметра showOn задать одну или обе кнопки. Если также предоставляется buttonText , текст кнопки становится атрибутом alt кнопки. По умолчанию его значение равно «» .

Опция — buttonImage

Этот параметр указывает путь к изображению, отображаемому на включенной кнопке, если для параметра showOn задать одну или обе кнопки. Если также предоставляется buttonText , текст кнопки становится атрибутом alt кнопки. По умолчанию его значение равно «» .

Синтаксис

Эта опция, если установлена ​​в true , указывает, что изображение, указанное в buttonImage, должно отображаться автономно (не на кнопке). Параметр showOn должен по-прежнему быть установлен на одну из кнопок или обе для отображения изображения. По умолчанию его значение равно false .

Опция — buttonImageOnly

Эта опция, если установлена ​​в true , указывает, что изображение, указанное в buttonImage, должно отображаться автономно (не на кнопке). Параметр showOn должен по-прежнему быть установлен на одну из кнопок или обе для отображения изображения. По умолчанию его значение равно false .

Синтаксис

Этот параметр определяет заголовок для кнопки, включенной путем установки параметра showOn на одну из кнопок или обе . По умолчанию его значение равно «…» .

Опция — buttonText

Этот параметр определяет заголовок для кнопки, включенной путем установки параметра showOn на одну из кнопок или обе . По умолчанию его значение равно «…» .

Синтаксис

Эта опция является пользовательской функцией для вычисления и возврата номера недели для даты, переданной в качестве параметра lone. Реализация по умолчанию предоставлена утилитой $ .datepicker.iso8601Week () .

Опция — рассчитать неделю

Эта опция является пользовательской функцией для вычисления и возврата номера недели для даты, переданной в качестве параметра lone. Реализация по умолчанию предоставлена утилитой $ .datepicker.iso8601Week () .

Синтаксис

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

Вариант — changeMonth

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

Синтаксис

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

Вариант — изменить год

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

Синтаксис

Эта опция указывает текст для замены заголовка по умолчанию «Готово» для кнопки «Закрыть». Используется, когда панель кнопок отображается с помощью опции showButtonPanel . По умолчанию его значение «Готово» .

Опция — closeText

Эта опция указывает текст для замены заголовка по умолчанию «Готово» для кнопки «Закрыть». Используется, когда панель кнопок отображается с помощью опции showButtonPanel . По умолчанию его значение «Готово» .

Синтаксис

Если эта опция установлена ​​в значение true (по умолчанию), текстовая запись в элемент <input> ограничивается символами, разрешенными текущей опцией dateformat . По умолчанию его значение равно true .

Опция — constrainInput

Если эта опция установлена ​​в значение true (по умолчанию), текстовая запись в элемент <input> ограничивается символами, разрешенными текущей опцией dateformat . По умолчанию его значение равно true .

Синтаксис

Эта опция указывает текст для замены заголовка по умолчанию «Сегодня» для текущей кнопки. Это используется, если панель кнопок отображается с помощью опции showButtonPanel . По умолчанию его значение сегодня .

Опция — текущий текст

Эта опция указывает текст для замены заголовка по умолчанию «Сегодня» для текущей кнопки. Это используется, если панель кнопок отображается с помощью опции showButtonPanel . По умолчанию его значение сегодня .

Синтаксис

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

Опция — dateFormat

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

Синтаксис

Эта опция представляет собой массив из 7 элементов, предоставляющий полные имена дней с 0-м элементом, представляющим воскресенье. Может использоваться для локализации управления. По умолчанию его значение равно «воскресенье», «понедельник», «вторник», «среда», «четверг», «пятница», «суббота»] .

Вариант — dayNames

Эта опция представляет собой массив из 7 элементов, предоставляющий полные имена дней с 0-м элементом, представляющим воскресенье. Может использоваться для локализации управления. По умолчанию его значение равно «воскресенье», «понедельник», «вторник», «среда», «четверг», «пятница», «суббота»] .

Синтаксис

Эта опция представляет собой 7-элементный массив, предоставляющий минимальные имена дней с 0-м элементом, представляющим воскресенье, используемым в качестве заголовков столбцов. Может использоваться для локализации управления. По умолчанию его значение равно [«Su», «Mo», «Tu», «We», «Th», «Fr», «Sa»] .

Вариант — dayNamesMin

Эта опция представляет собой 7-элементный массив, предоставляющий минимальные имена дней с 0-м элементом, представляющим воскресенье, используемым в качестве заголовков столбцов. Может использоваться для локализации управления. По умолчанию его значение равно [«Su», «Mo», «Tu», «We», «Th», «Fr», «Sa»] .

Синтаксис

Эта опция указывает 7-элементный массив, предоставляющий короткие имена дней с 0-м элементом, представляющим воскресенье. Может использоваться для локализации управления. По умолчанию его значение равно [«Sun», «Mon», «Tue», «Wed», «Thu», «Fri», «Sat»] .

Опция — dayNamesShort

Эта опция указывает 7-элементный массив, предоставляющий короткие имена дней с 0-м элементом, представляющим воскресенье. Может использоваться для локализации управления. По умолчанию его значение равно [«Sun», «Mon», «Tue», «Wed», «Thu», «Fri», «Sat»] .

Синтаксис

Эта опция устанавливает начальную дату для элемента управления, переопределяя сегодняшнее значение по умолчанию, если элемент <input> не имеет значения. Это может быть экземпляр Date , число дней с сегодняшнего дня или строка, указывающая абсолютную или относительную дату. По умолчанию его значение равно нулю .

Опция — defaultDate

Эта опция устанавливает начальную дату для элемента управления, переопределяя сегодняшнее значение по умолчанию, если элемент <input> не имеет значения. Это может быть экземпляр Date , число дней с сегодняшнего дня или строка, указывающая абсолютную или относительную дату. По умолчанию его значение равно нулю .

Синтаксис

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

Вариант — продолжительность

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

Синтаксис

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

Вариант — первый день

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

Синтаксис

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

Вариант — gotoCurrent

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

Синтаксис

Если для этого параметра установлено значение true , следующие и предыдущие ссылки скрываются (в отличие от простого их отключения), когда они неприменимы, что определяется настройками параметров minDate и maxDate . По умолчанию его значение равно false .

Опция — hideIfNoPrevNext

Если для этого параметра установлено значение true , следующие и предыдущие ссылки скрываются (в отличие от простого их отключения), когда они неприменимы, что определяется настройками параметров minDate и maxDate . По умолчанию его значение равно false .

Синтаксис

Эта опция, если задано значение true , указывает локализацию как язык справа налево. По умолчанию его значение равно false .

Вариант — isRTL

Эта опция, если задано значение true , указывает локализацию как язык справа налево. По умолчанию его значение равно false .

Синтаксис

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

Опция — maxDate

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

Синтаксис

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

Опция — minDate

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

Синтаксис

Эта опция представляет собой массив из 12 элементов, предоставляющий полные названия месяцев с 0-м элементом, представляющим январь. Может использоваться для локализации управления. По умолчанию его значение равно [«Январь», «Февраль», «Март», «Апрель», «Май», «Июнь», «Июль», «Август», «Сентябрь», «Октябрь», «Ноябрь», «Декабрь»] .

Вариант — monthNames

Эта опция представляет собой массив из 12 элементов, предоставляющий полные названия месяцев с 0-м элементом, представляющим январь. Может использоваться для локализации управления. По умолчанию его значение равно [«Январь», «Февраль», «Март», «Апрель», «Май», «Июнь», «Июль», «Август», «Сентябрь», «Октябрь», «Ноябрь», «Декабрь»] .

Синтаксис

Эта опция указывает 12-элементный массив, предоставляющий короткие названия месяцев с 0-м элементом, представляющим январь. Может использоваться для локализации управления. По умолчанию его значение равно [«Jan», «Feb», «Mar», «Apr», «May», «Jun», «Jul», «Aug», «Sep», «Oct», «Nov», «Дек»] .

Опция — monthNamesShort

Эта опция указывает 12-элементный массив, предоставляющий короткие названия месяцев с 0-м элементом, представляющим январь. Может использоваться для локализации управления. По умолчанию его значение равно [«Jan», «Feb», «Mar», «Apr», «May», «Jun», «Jul», «Aug», «Sep», «Oct», «Nov», «Дек»] .

Синтаксис

Если для этого параметра установлено значение true , навигационные ссылки для nextText, prevText и currentText передаются через функцию $ .datepicker.formatDate () перед отображением. Это позволяет указывать форматы даты для тех опций, которые заменяются соответствующими значениями. По умолчанию его значение равно false .

Опция — navigationAsDateFormat

Если для этого параметра установлено значение true , навигационные ссылки для nextText, prevText и currentText передаются через функцию $ .datepicker.formatDate () перед отображением. Это позволяет указывать форматы даты для тех опций, которые заменяются соответствующими значениями. По умолчанию его значение равно false .

Синтаксис

Этот параметр указывает текст для замены заголовка по умолчанию «Далее» для ссылки навигации следующего месяца. ThemeRoller заменяет этот текст значком. По умолчанию его значение — Next .

Вариант — следующий текст

Этот параметр указывает текст для замены заголовка по умолчанию «Далее» для ссылки навигации следующего месяца. ThemeRoller заменяет этот текст значком. По умолчанию его значение — Next .

Синтаксис

Этот параметр указывает количество месяцев, отображаемых в средстве выбора даты. По умолчанию его значение равно 1 .

Опция — число месяцев

Этот параметр указывает количество месяцев, отображаемых в средстве выбора даты. По умолчанию его значение равно 1 . Поддерживается несколько типов —

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

Array — Массив, определяющий количество отображаемых строк и столбцов.

Синтаксис

Этот параметр является обратным вызовом, который вызывается, когда указатель даты перемещается на новый месяц или год, когда выбранный год, месяц (на основе 1) и экземпляр указателя даты передаются в качестве параметров, а контекст функции задается для элемента поля ввода. По умолчанию его значение равно нулю .

Опция — onChangeMonthYear

Этот параметр является обратным вызовом, который вызывается, когда указатель даты перемещается на новый месяц или год, когда выбранный год, месяц (на основе 1) и экземпляр указателя даты передаются в качестве параметров, а контекст функции задается для элемента поля ввода. По умолчанию его значение равно нулю .

Этот параметр является обратным вызовом, вызываемым всякий раз, когда средство выбора даты закрывается, передается выбранная дата в виде текста (пустая строка, если выбор отсутствует), а также экземпляр DatePicker и контекст функции устанавливаются для элемента поля ввода. По умолчанию его значение равно нулю .

Вариант — onClose

Этот параметр является обратным вызовом, вызываемым всякий раз, когда средство выбора даты закрывается, передается выбранная дата в виде текста (пустая строка, если выбор отсутствует), а также экземпляр DatePicker и контекст функции устанавливаются для элемента поля ввода. По умолчанию его значение равно нулю .

Этот параметр представляет собой обратный вызов, который вызывается всякий раз, когда выбирается дата, передается выбранная дата в виде текста (пустая строка, если выбор отсутствует) и экземпляр DatePicker, а контекст функции устанавливается на элемент поля ввода. По умолчанию его значение равно нулю .

Опция — onSelect

Этот параметр представляет собой обратный вызов, который вызывается всякий раз, когда выбирается дата, передается выбранная дата в виде текста (пустая строка, если выбор отсутствует) и экземпляр DatePicker, а контекст функции устанавливается на элемент поля ввода. По умолчанию его значение равно нулю .

Этот параметр указывает текст, который заменяет заголовок по умолчанию « Предыдущий» для навигационной ссылки за предыдущий месяц. (Обратите внимание, что ThemeRoller заменяет этот текст значком). По умолчанию его значением является PrevdefaultDatedayNamesMin .

Вариант — prevText

Этот параметр указывает текст, который заменяет заголовок по умолчанию « Предыдущий» для навигационной ссылки за предыдущий месяц. (Обратите внимание, что ThemeRoller заменяет этот текст значком). По умолчанию его значение — Prev .

Синтаксис

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

Опция — выбрать другие месяцы

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

Синтаксис

Эта опция, если это число, указывает значение от 0 до 99 лет, перед которым любые двухзначные значения года будут считаться принадлежащими предыдущему столетию. Если этот параметр является строкой, значение подвергается числовому преобразованию и добавляется к текущему году. По умолчанию +10, что соответствует 10 годам текущего года.

Вариант — shortYearCutoff

Эта опция, если это число, указывает значение от 0 до 99 лет, перед которым любые двухзначные значения года будут считаться принадлежащими предыдущему столетию. Если этот параметр является строкой, значение подвергается числовому преобразованию и добавляется к текущему году. По умолчанию +10, что соответствует 10 годам текущего года.

Синтаксис

Этот параметр указывает имя анимации, которая будет использоваться для отображения и скрытия средства выбора даты. Если указан, должен быть один из показов (по умолчанию), fadeIn, slideDown или любой из анимаций jQuery UI показать / скрыть. По умолчанию его значение — шоу .

Вариант — showAnim

Этот параметр указывает имя анимации, которая будет использоваться для отображения и скрытия средства выбора даты. Если указан, должен быть один из показов (по умолчанию), fadeIn, slideDown или любой из анимаций jQuery UI показать / скрыть. По умолчанию его значение — шоу .

Синтаксис

Если для этого параметра установлено значение true , в нижней части средства выбора даты отображается панель кнопок, содержащая кнопки текущего и закрытия. Надпись этих кнопок может быть предоставлена ​​с помощью параметров currentText и closeText . По умолчанию его значение равно false .

Опция — showButtonPanel

Если для этого параметра установлено значение true , в нижней части средства выбора даты отображается панель кнопок, содержащая кнопки текущего и закрытия. Надпись этих кнопок может быть предоставлена ​​с помощью параметров currentText и closeText . По умолчанию его значение равно false .

Синтаксис

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

Опция — showCurrentAtPos

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

Синтаксис

Этот параметр указывает, если установлено значение true , позиции месяца и года меняются местами в заголовке средства выбора даты. По умолчанию его значение равно false .

Опция — showMonthAfterYear

Этот параметр указывает, если установлено значение true , позиции месяца и года меняются местами в заголовке средства выбора даты. По умолчанию его значение равно false .

Синтаксис

Эта опция указывает, когда должен появиться указатель даты. Возможные значения: фокус, кнопка или оба . По умолчанию его значением является focus .

Вариант — showOn

Эта опция указывает, когда должен появиться указатель даты. Возможные значения: фокус, кнопка или оба . По умолчанию его значением является focus .

focus (по умолчанию) заставляет указатель даты отображаться, когда элемент <input> получает фокус.

Кнопка вызывает создание кнопки после элемента <input> (но перед любым добавленным текстом), который запускает средство выбора даты при нажатии.

и то и другое вызывает создание кнопки запуска, а события фокуса также запускают средство выбора даты.

Синтаксис

Эта опция предоставляет хэш для анимации, когда для опции showAnim указана анимация пользовательского интерфейса jQuery. По умолчанию его значение равно {} .

Опция — showOptions

Эта опция предоставляет хэш для анимации, когда для опции showAnim указана анимация пользовательского интерфейса jQuery. По умолчанию его значение равно {} .

Синтаксис

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

Опция — showOtherMonths

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

Синтаксис

Если для этого параметра установлено значение true , номер недели отображается в столбце слева от отображения месяца. Параметр calcWeek может использоваться для изменения способа определения этого значения. По умолчанию его значение равно false .

Вариант — showWeek

Если для этого параметра установлено значение true , номер недели отображается в столбце слева от отображения месяца. Параметр calcWeek может использоваться для изменения способа определения этого значения. По умолчанию его значение равно false .

Синтаксис

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

Вариант — stepMonths

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

Синтаксис

Этот параметр указывает текст, отображаемый для столбца номера недели, переопределяя значение Wk по умолчанию, если showWeek имеет значение true. По умолчанию его значение равно Wk .

Опция — weekHeader

Этот параметр указывает текст, отображаемый для столбца номера недели, переопределяя значение Wk по умолчанию, если showWeek имеет значение true. По умолчанию его значение равно Wk .

Синтаксис

Этот параметр определяет ограничения, по которым годы отображаются в раскрывающемся списке в форме от: до, когда changeYear имеет значение true . Значения могут быть абсолютными или относительными (например: 2005: +2, для 2005 через 2 года). Префикс c может использоваться для смещения относительных значений от выбранного года, а не текущего года (пример: c-2: c + 3). По умолчанию его значение равно c-10: c + 10 .

Вариант — yearRange

Этот параметр определяет ограничения, по которым годы отображаются в раскрывающемся списке в форме от: до, когда changeYear имеет значение true . Значения могут быть абсолютными или относительными (например: 2005: +2, для 2005 через 2 года). Префикс c может использоваться для смещения относительных значений от выбранного года, а не текущего года (пример: c-2: c + 3). По умолчанию его значение равно c-10: c + 10 .

Синтаксис

Этот параметр отображает дополнительный текст после года в заголовке средства выбора даты. По умолчанию его значение равно «» .

Вариант — yearSuffix

Этот параметр отображает дополнительный текст после года в заголовке средства выбора даты. По умолчанию его значение равно «» .

Синтаксис

Следующий раздел покажет вам несколько рабочих примеров функциональности DatePicker.

Функциональность по умолчанию

В следующем примере демонстрируется простой пример функциональности datepicker, не передающей параметры методу datepicker () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-1" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-1"></p>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле datepickerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Встроенный DatePicker

В следующем примере демонстрируется простой пример встроенной функции выбора даты.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-2" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      Enter Date: <div id = "datepicker-2"></div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле datepickerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере мы используем элемент <div> для получения встроенного выбора даты.

Использование appendText, dateFormat, altField и altFormat

В следующем примере показано использование трех важных опций (a) appendText (b) dateFormat (c) altField и (d) altFormat в функции datepicker JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-3" ).datepicker({
               appendText:"(yy-mm-dd)",
               dateFormat:"yy-mm-dd",
               altField: "#datepicker-4",
               altFormat: "DD, d MM, yy"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-3"></p>
      <p>Alternate Date: <input type = "text" id = "datepicker-4"></p>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле datepickerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере вы можете видеть, что формат даты для первого ввода установлен как yy-mm-dd . Если вы выбираете какую-либо дату из указателя даты, та же самая дата отражается во втором поле ввода, формат даты которого установлен как «DD, d MM, yy».

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

В следующем примере показано использование параметра beforeShowDay в функции datepicker JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-5" ).datepicker({
               beforeShowDay : function (date) {
                  var dayOfWeek = date.getDay ();
                  // 0 : Sunday, 1 : Monday, ...
                  if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
                  else return [true];
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-5"></p>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле datepickerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере воскресенье и суббота отключены.

Использование showOn, buttonImage и buttonImageOnly

В следующем примере показано использование трех важных опций (a) showOn (b) buttonImage и (c) buttonImageOnly в функции выбора даты JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-6" ).datepicker({
               showOn:"button",
               buttonImage: "/jqueryui/images/calendar-icon.png",
               buttonImageOnly: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-6"></p>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле datepickerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере отображается значок, который нужно щелкнуть, чтобы открыть средство выбора даты.

Использование defaultDate, dayNamesMin и продолжительности

В следующем примере показано использование трех важных опций (a) dayNamesMin (b) dayNamesMin и (c) duration в функции выбора даты JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-7" ).datepicker({
               defaultDate:+9,
               dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
               duration: "slow"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-7"></p>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле datepickerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере названия дней меняются с помощью dayNamesMin . Вы также можете увидеть дату по умолчанию.

Использование prevText, nextText, showOtherMonths и selectOtherMonths

В следующем примере показано использование трех важных опций (a) prevText (b) nextText (c) showOtherMonths и (d) selectOtherMonths в функции datepicker из JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      
      <script>
         $(function() {
            $( "#datepicker-8" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: false
            });
            $( "#datepicker-9" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Start Date: <input type = "text" id = "datepicker-8"></p>
      <p>Enter End Date: <input type = "text" id = "datepicker-9"></p>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле datepickerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере ссылки на предыдущие и предыдущие ссылки имеют подписи. Если щелкнуть элемент, откроется средство выбора даты. Теперь в первом средстве выбора даты другие месяцы отключены, поскольку selectOtherMonths имеет значение false . Во втором средстве выбора даты для второго типа ввода для selectOtherMonths установлено значение true .

Использование changeMonth, changeYear и numberOfMonths

В следующем примере показано использование трех важных параметров (a) changeMonth (b) changeYear и (c) numberOfMonths в функции выбора даты JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-10" ).datepicker({
               changeMonth:true,
               changeYear:true,
               numberOfMonths:[2,2]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-10"></p>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле datepickerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере вы можете увидеть выпадающие меню для полей месяц и год. И мы осуждаем 4 месяца в структуре массива [2,2].

Использование showWeek, yearSuffix и showAnim

В следующем примере показано использование трех важных опций (a) showWeek (b) yearSuffix и (c) showAnim в функции выбора даты JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-11" ).datepicker({
               showWeek:true,
               yearSuffix:"-CE",
               showAnim: "slide"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-11"></p>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле datepickerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере вы можете видеть, что номера недель отображаются в левой части указателя даты, поскольку showWeek имеет значение true . Год имеет суффикс «-CE».

Метод $ (селектор, контекст) .datepicker («действие», [параметры])

Метод datepicker (action, params) может выполнять в календаре такие действия, как выбор новой даты. Действие указывается в виде строки в первом аргументе, и необязательно, один или несколько параметров могут быть предоставлены на основе данного действия.

По сути, здесь действия — это не что иное, как методы jQuery, которые мы можем использовать в виде строки.

Синтаксис

$(selector, context).datepicker ("action", [params]);

В следующей таблице перечислены действия для этого метода —

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Действие — уничтожить ()

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

Синтаксис

Это действие отображает средство выбора даты в диалоговом окне пользовательского интерфейса jQuery.

Действие — диалоговое окно (дата [, onSelect] [, настройки] [, pos])

Это действие отображает средство выбора даты в диалоговом окне пользовательского интерфейса jQuery. Где —

дата является начальной датой.

onSelect — это функция обратного вызова, когда выбирается дата. Функция получает текст даты и экземпляр средства выбора даты в качестве параметров.

Настройки это новые настройки для выбора даты.

pos — это положение верхней / левой части диалогового окна в виде [x, y] или MouseEvent, которое содержит координаты. Если не указан, диалог центрируется на экране.

Синтаксис

Это действие возвращает дату, соответствующую выбранной дате. Этот метод не принимает никаких аргументов.

Действие — getDate ()

Это действие возвращает дату, соответствующую выбранной дате. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие закрывает ранее открытую область выбора даты. Этот метод не принимает никаких аргументов.

Действие — скрыть ()

Это действие закрывает ранее открытую область выбора даты. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие проверяет, отключена ли функция выбора даты. Этот метод не принимает никаких аргументов.

Действие — isDisabled ()

Это действие проверяет, отключена ли функция выбора даты. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие возвращает значение, в настоящее время связанное с указанным параметром optionName .

Действие — опция (optionName)

Это действие возвращает значение, в настоящее время связанное с указанным параметром optionName .

Синтаксис

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

Действие — опция ()

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

Синтаксис

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

Действие — опция (optionName, value)

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

Синтаксис

Это действие устанавливает один или несколько параметров для средства выбора даты.

Действие — опция (варианты)

Это действие устанавливает один или несколько параметров для средства выбора даты.

Синтаксис

Это действие перерисовывает средство выбора даты после внесения некоторых внешних изменений. Этот метод не принимает никаких аргументов.

Действие — обновить ()

Это действие перерисовывает средство выбора даты после внесения некоторых внешних изменений. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие устанавливает указанную дату в качестве текущей даты средства выбора даты.

Действие — setDate ()

Это действие устанавливает указанную дату в качестве текущей даты средства выбора даты.

Синтаксис

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

Действие — шоу ()

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

Синтаксис

Это действие возвращает объект jQuery, содержащий указатель даты.

Действие — виджет ()

Это действие возвращает объект jQuery, содержащий указатель даты.

Синтаксис

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

Использование действия setDate ()

Теперь давайте посмотрим на пример, используя действия из таблицы выше. В следующем примере демонстрируется использование действий setDate .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-12" ).datepicker();
            $( "#datepicker-12" ).datepicker("setDate", "10w+1");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-12"></p>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле datepickerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:

Использование действия show ()

В следующем примере демонстрируется использование action show .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-13" ).datepicker();
            $( "#datepicker-13" ).datepicker("show");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-13"></p>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле datepickerexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:

Управление событиями на элементах DatePicker

На данный момент нет методов события datepicker!