Календарь jquery на русском


Календарь jquery на русском

Календарь jquery на русском

Календарь jquery на русском



Плагин Datepicker позволяет добавить на ваши страницы календарь, который может быть использован для выбора и отображения дат. Плагин обладает множеством настроек, позволяющих использовать календарь для широкого спектра целей (см. примеры использования выше).

Наиболее распространенным вариантом использования календаря является выбор даты. Поэтому, Datepicker обычно устанавливают на текстовое поле, задуманное для ввода дат. В таком случае, календарь будет появляться при получении фокуса этим текстовым полем, и исчезать, в случае потери им фокуса, либо при выборе конкретной даты на календаре (выбранная дата, при этом, будет оказываться в текстовом поле). При желании, можно превратить в календарь обычный div или span-элемент страницы. Для этого необходимо просто применить к нужному элементу плагин Datepicker (см. пример "Не временный календарь").


Горячие клавиши Для работы с календарем можно использовать следующие "горячие клавиши":

  • ctrl+left/right — следующий/предыдущий день.
  • page up/down — следующий/предыдущий месяц.
  • ctrl+page up/down — следующий/предыдущий год.
  • ctrl+home — текущая дата (если календарь закрыт, то он будет открыт).
  • ctrl+up/down — следующая/предыдущая неделя.
  • enter — выбор выделенной даты.
  • ctrl+end — закрыть календарь и обнулить текущее значение (если оно было).
  • ctrl+end — закрыть календарь без выбора даты.


Связанные утилиты UI

↓  функция() :возвращаемое значение

$.datepicker.setDefaults(settings)

С помощью этой функции можно изменять значения по умолчанию для свойств всех календарей на странице: // изменим тип анимации появления/скрытия календаря $.datepicker.setDefaults({showAnim:'fold'});

$.datepicker.formatDate(format, date, [settings])

Эта функция возвращает текстовое представление заданной даты date, в соответствии с форматом format и настройками settings. format — строка с указанием формата данных. Например "yy-mm-dd" ("1 января 1998" в данном формате будет выглядеть так: "98-01-01"). Все возможные элементы для задания формата даты можно посмотреть в .
date — javascript Data, представляющий определенную дату.
settings — необязательный параметр, в котором можно задать используемые при составлении даты элементы (по умолчанию, значения берутся из используемого UI набора, который обычно является английским). Перечислим эти элементы: dayNamesShort — массив из семи строк с сокращенными именами дней недели (['Вс', 'Пн', 'Вт',...]). dayNames — массив из семи строк с полными названиями дней недели (['Воскресенье', 'Понедельник', 'Вторник',...]). monthNamesShort — массив из 12 строк с сокращенными именами месяцев (['Янв', 'Фев', 'Мар',...]). monthNames — массив из 12 строк с полными именами месяцев (['Январь', 'Февраль', 'Март',...]).

Примеры:

$.datepicker.formatDate('yy-mm-dd', new Date(2007, 1 - 1, 26)); //вернет "2007-01-26" // запросим дату, задав в настройках французские обозначения // (для этого они должны быть подключены) $.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 }); // вернет "Samedi, Juillet 14, 2007"

$.datepicker.parseDate(format, val, [settings])

Эта функция разбирает заданную строку val, в соответствии с форматом format и настройками settings. Возвращает javascript-объект типа Date. format — строка с указанием формата данных. Например "yy-mm-dd" ("1 января 1998" в данном формате будет выглядеть так: "98-01-01"). Все возможные элементы для задания формата даты можно посмотреть в .
val — строка с датой, которую необходимо будет разобрать.
settings — необязательный параметр, который необходимо задать, если в строке val используются особые текстовые элементы при написании дат (по умолчанию, значения берутся из используемого UI набора, который обычно является английским). Перечислим элементы настроек:
  • shortYearCutoff — если в строке val год указывается двумя последними цифрами, то в этом параметре можно указать, как определять первые две цифры. Параметр shortYearCutoff определяет числовую границу, после которой все года будут относиться к 20 веку (19), а все года до этой границы, включая ее саму, будут относиться к 21 веку (20). Например, если задать этому параметру число 30, то даты "00", .., "30" будут рассматриваться, как "2000", .., "2030", а "31", ..,"99", как "1931", .., "1999". Если задать этот параметр в виде строки, то можно указывать числа, относительно текущего года: "+20" — задаст границу, равную текущему году + 20. Не следует указывать в этом параметре числа, превышающие 99.
  • dayNamesShort — массив из семи строк с сокращенными именами дней недели (['Вс', 'Пн', 'Вт',...]).
  • dayNames — массив из семи строк с полными названиями дней недели (['Воскресенье', 'Понедельник', 'Вторник',...]).
  • monthNamesShort — массив из 12 строк с сокращенными именами месяцев (['Янв', 'Фев', 'Мар',...]).
  • monthNames — массив из 12 строк с полными именами месяцев (['Январь', 'Февраль', 'Март',...]).


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

'Invalid arguments' — неверно заданы параметры (format или val). Например равны null. 'Missing number at position nn' — в format указаны цифры, не найденные в строке val. 'Unknown name at position nn' — в format указан имя дня или месяца, не найденные в строке val. 'Invalid date' — val содержит невозможную дату (например '31/02/2007').


Примеры использования $.datepicker.parseDate():

$.datepicker.parseDate('yy-mm-dd', '2007-01-26'); //вернет объект указанной даты // Разберем дату на французском // (для этого франц-ие обозначения должны быть подключены) $.datepicker.parseDate('DD, MM d, yy', 'Samedi, Juillet 14, 2007', { shortYearCuroff: 20, dayNamesShort: $.datepicker.regional['fr'].dayNamesShort, dayNames: $.datepicker.regional['fr'].dayNames, monthNamesShort: $.datepicker.regional['fr'].monthNamesShort, monthNames: $.datepicker.regional['fr'].monthNames }); //вернет объект указанной даты

$.datepicker.iso8601Week(date)

Определяет номер недели в году, на которую выпадает заданная дата. Подсчет недель начинается с той недели года, которая содержит первый четверг в наступившем году(согласно стандарту ISO 8601). $.datepicker.iso8601Week(new Date(2007, 1 - 1, 26)); // вернет 4

$.datepicker.noWeekends()

Установив эту функцию в качестве обработчика события beforeShowDay (см. раздел События), вы отключите выбор выходных дней в календаре: $("#datepicker").datepicker({ beforeShowDay: $.datepicker.noWeekends });


Локализация (изменение языка)
Все текстовые элементы календаря могут быть изменены. В частности, можно заменить их на элементы на требуемом языке. Это можно сделать самостоятельно (изменяя соответствующие свойства календаря) или подключив один из языковых скриптов для календаря, который сделает это автоматически (). Все подключенные таким образом языковые наборы, будут храниться в переменной $.datepicker.regional, например подключенный русский набор () окажется в $.datepicker.regional.['ru'] и т.д. Первоначальный набор всегда можно найти в $.datepicker.regional.[""], Применить один из уже подключенных наборов можно с помощью $.datepicker.setDefaults:

$.datepicker.setDefaults($.datepicker.regional['fr']); // для французского языка $.datepicker.setDefaults($.datepicker.regional['']); // для возвращения к набору по умолчанию

В локализации участвуют следующие свойства: closeText, prevText, nextText, currentText, monthNames, monthNamesShort, dayNames, dayNamesShort, dayNamesMin, weekHeader, dateFormat, firstDay, isRTL, showMonthAfterYear и yearSuffix. Их описания можно найти на вкладке Свойства.


↓ Имя свойства :типы значений (значение по умолчанию)

disabled(false)

Останавливает\возобновляет работу плагина Datepicker на . // ------- Работа со свойством disabled --------- // в момент установки datepicker на элемент $("selector").datepicker({ disabled: true }); //получение значения disabled var disabled = $("selector").datepicker( "option", "disabled" ); //изменение значения disabled $("selector").datepicker( "option", "disabled", true );

altField("")

При выборе даты на календаре, ее значение автоматически вставляется в текстовое поле. Если необходимо дополнительно вставлять ее в другой элемент, укажите его в параметре altField (с помощью селектора, объекта jQuery или DOM-элемента). Если необходимо, чтобы формат вставляемой даты отличался от стандартного, укажите его в свойстве (см. его описание ниже). // ------- Работа со свойством altField --------- // в момент установки datepicker на элемент $("selector").datepicker({ altField: "#actualDate" }); //получение значения altField var altField = $("selector").datepicker( "option", "altField" ); //изменение значения altField $("selector").datepicker( "option", "altField", "#actualDate" );

altFormat("")

В этом параметре можно задать Формат даты для альтернативного поля (см. свойство altField выше). Описание элементов, с помощью которых указывать формат, можно посмотреть в . // ------- Работа со свойством altFormat --------- // в момент установки datepicker на элемент $("selector").datepicker({ altFormat: "yy-mm-dd" }); //получение значения altFormat var altFormat = $("selector").datepicker( "option", "altField" ); //изменение значения altFormat $("selector").datepicker( "option", "altFormat", "yy-mm-dd" );

appendText("")

В этом параметре можно задать текст, который будет помещен после текстового поля. Там можно разместить какую-нибудь вспомогательную информацию, например, указать используемый формат. // ------- Работа со свойством appendText --------- // в момент установки datepicker на элемент $("selector").datepicker({ appendText: "(yyyy-mm-dd)" }); //получение значения appendText var altFormat = $("selector").datepicker( "option", "appendText" ); //изменение значения appendText $("selector").datepicker( "option", "appendText", "(yyyy-mm-dd)" );

autoSize(false)

Когда этот параметр равен true, плагин datepicker автоматически подгонит длину текстового поля, ориентируясь на заданный формат (задается в свойстве dateFormat (его описание можно найти ниже)). // ------- Работа со свойством dateFormat --------- // в момент установки datepicker на элемент $("selector").datepicker({ dateFormat: true }); //получение значения dateFormat var dateFormat = $("selector").datepicker( "option", "dateFormat" ); //изменение значения dateFormat $("selector").datepicker( "option", "dateFormat", true );

buttonImage("")

Задавать этот параметр имеет смысл, только если включено открытие календаря на нажатие кнопки (свойство showOn равно "button" или "both"). В этом случае, в параметре buttonImage можно задать адрес картинки, которая окажется на вспомогательной кнопке. Если при этом, для кнопки задан еще и текст, то он не будет отображен на кнопке, но будет появляться в качестве подсказки, при наведении курсора на кнопку.

Включив свойство buttonImageOnly, вы скроете тело кнопки, оставив видной только заданную картинку.

// ------- Работа со свойством buttonImage --------- // в момент установки datepicker на элемент $("selector").datepicker({ buttonImage: '/images/datepicker.gif' }); //получение значения buttonImage var buttonImage = $("selector").datepicker( "option", "buttonImage" ); //изменение значения buttonImage $("selector").datepicker( "option", "buttonImage", '/images/datepicker.gif' );

buttonImageOnly(false)

Задавать этот параметр имеет смысл, только если включено открытие календаря на нажатие кнопки (свойство showOn равно "button" или "both") и для кнопки задано изображение (параметр buttonImage). Тогда, если buttonImageOnly равен true, то тело кнопки отображаться не будет, а на ее месте будет только заданное изображение. // ------- Работа со свойством buttonImageOnly --------- // в момент установки datepicker на элемент $("selector").datepicker({ buttonImageOnly: true }); //получение значения buttonImageOnly var buttonImageOnly = $("selector").datepicker( "option", "buttonImageOnly" ); //изменение значения buttonImageOnly $("selector").datepicker( "option", "buttonImageOnly", true );

buttonText("...")

Этот параметр определяет текст на кнопке открытия календаря. Задавать этот параметр имеет смысл, только если включено открытие календаря на нажатие кнопки (свойство showOn равно "button" или "both"). Если при этом, для кнопки задано изображение (свойство buttonImage), то текст на ней отображаться не будет, но будет появляться в качестве подсказки при наведении курсора на кнопку. // ------- Работа со свойством buttonText --------- // в момент установки datepicker на элемент $("selector").datepicker({ buttonText: "Открыть календарь" }); //получение значения buttonText var buttonText = $("selector").datepicker( "option", "buttonText" ); //изменение значения buttonText $("selector").datepicker( "option", "buttonText", "Открыть календарь" );

calculateWeek($.datepicker.iso8601Week)

В этом параметре можно изменить функцию, которая считает номер недели в году по заданной дате. По умолчанию это делает функция $.datepicker.iso8601Week, работающая согласно стандарту ISO 8601, по которому подсчет недель начинается с той недели года, которая содержит первый четверг в наступившем году. // ------- Работа со свойством calculateWeek --------- // в момент установки datepicker на элемент $("selector").datepicker({ calculateWeek: myWeekCalc }); //получение значения calculateWeek var calculateWeek = $("selector").datepicker( "option", "calculateWeek" ); //изменение значения calculateWeek $("selector").datepicker( "option", "calculateWeek", myWeekCalc );

changeMonth(false)

Если это свойство включено, то в календаре появляется выпадающий список с месяцами для быстрого перехода между ними. // ------- Работа со свойством changeMonth --------- // в момент установки datepicker на элемент $("selector").datepicker({ changeMonth: true}); //получение значения changeMonth var changeMonth = $("selector").datepicker( "option", "changeMonth" ); //изменение значения changeMonth $("selector").datepicker( "option", "changeMonth", true);

changeYear(false)

Если это свойство включено, то в календаре появляется выпадающий список с годами для быстрого перехода между ними. Задать границы указанных в данном списке лет, воспользуйтесь свойством yearRange (см. его описание ниже). // ------- Работа со свойством changeYear --------- // в момент установки datepicker на элемент $("selector").datepicker({ changeYear: true}); //получение значения changeYear var changeYear = $("selector").datepicker( "option", "changeYear" ); //изменение значения changeYear $("selector").datepicker( "option", "changeYear", true);

closeText("Done")

В этом свойстве можно задать текст для кнопки на календаре, которая его (календарь) закрывает. Эта кнопка находится на панели дополнительных кнопок, поэтому будет видна только при включенной панели (см. свойство "showButtonPanel" ниже). Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация). // ------- Работа со свойством closeText --------- // в момент установки datepicker на элемент $("selector").datepicker({ closeText: "Закрыть"}); //получение значения closeText var closeText = $("selector").datepicker( "option", "closeText" ); //изменение значения closeText $("selector").datepicker( "option", "closeText", "Закрыть");

constrainInput(true)

Когда это свойство включено, плагин datepicker следит за тем, чтобы содержимое текстового поля ввода строго соответствовало заданному формату (формат задается в свойстве dateFormat (см. описание ниже)). Например, при попытке ввести разделяющий символ, не соответствующий заданному формату, datepicker отменит его ввод. // ------- Работа со свойством constrainInput --------- // в момент установки datepicker на элемент $("selector").datepicker({ constrainInput: false}); //получение значения constrainInput var constrainInput= $("selector").datepicker( "option", "constrainInput" ); //изменение значения constrainInput $("selector").datepicker( "option", "constrainInput", false);

currentText("Today")

В этом свойстве можно задать текст кнопки на календаре, при нажатии на которую календарь автоматически перелистывается на текущий месяц. Эта кнопка находится на панели дополнительных кнопок, поэтому будет видна только при включенной панели (см. свойство "showButtonPanel" ниже). Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация). // ------- Работа со свойством currentText --------- // в момент установки datepicker на элемент $("selector").datepicker({ currentText: "Сегодня"}); //получение значения currentText var currentText = $("selector").datepicker( "option", "currentText" ); //изменение значения currentText $("selector").datepicker( "option", "currentText", "Сегодня");

dateFormat("mm/dd/yy")

Это свойство определяет текстовый формат, в котором должна быть задана дата. Описание элементов, с помощью которых указывать формат, можно посмотреть в . Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация). // ------- Работа со свойством dateFormat --------- // в момент установки datepicker на элемент $("selector").datepicker({ dateFormat: "yy-mm-dd"}); //получение значения dateFormat var dateFormat = $("selector").datepicker( "option", "dateFormat" ); //изменение значения dateFormat $("selector").datepicker( "option", "dateFormat", "yy-mm-dd" );

dayNames(см. в описании)

В этом свойстве находится список текстовых вариантов дней недели, которые будут использоваться в календаре (по порядку, начиная с воскресенья). Значение по умолчанию: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']. Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация). // ------- Работа со свойством dayNames --------- // в момент установки datepicker на элемент $("selector").datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] }); //получение значения dayNames var dayNames = $("selector").datepicker( "option", "dayNames" ); //изменение значения dayNames $("selector").datepicker( "option", "dayNames", ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] );

dayNamesMin(см. в описании)

В этом свойстве находится список сокращенных до двух символов текстовых вариантов дней недели, которые будут использоваться в календаре (по порядку, начиная с воскресенья). Значение по умолчанию: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']. Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация). // ------- Работа со свойством dayNamesMin --------- // в момент установки datepicker на элемент $("selector").datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] }); //получение значения dayNamesMin var dayNamesMin = $("selector").datepicker( "option", "dayNamesMin" ); //изменение значения dayNamesMin $("selector").datepicker( "option", "dayNamesMin", ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] );

dayNamesShort(см. в описании)

В этом свойстве находится список сокращенных до трех символов, текстовых вариантов дней недели, которые будут использоваться в календаре (по порядку, начиная с воскресенья). Значение по умолчанию: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']. Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация). // ------- Работа со свойством dayNamesShort --------- // в момент установки datepicker на элемент $("selector").datepicker({ dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }); //получение значения dayNamesShort var dayNamesShort = $("selector").datepicker( "option", "dayNamesShort" ); //изменение значения dayNamesShort $("selector").datepicker( "option", "dayNamesShort", ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] );

defaultDate(null)

С помощью этого свойства можно указать, какая дата будет подсвечена при открытии календаря. По умолчанию, такой датой является текущая. Это свойство можно указать задав конкретную дату с помощью javascript-объекта Date, целого числа (на это число дней будет совершен сдвиг относительно текущей даты) или с помощью строки (так же указав сдвиг относительно текущей даты). В строке нужно указать на сколько лет ("y"), месяцев ("m"), недель("w"), дней ("d") нужно сдвинуть дату, например:
  • "+1m +7d" — на месяц и семь дней вперед
  • "-1y -2w" — на год и две недели назад
// ------- Работа со свойством defaultDate --------- // в момент установки datepicker на элемент $("selector").datepicker({ defaultDate: 7 }); //получение значения defaultDate var defaultDate = $("selector").datepicker( "option", "defaultDate" ); //изменение значения defaultDate $("selector").datepicker( "option", "defaultDate", 7 );

duration("normal")

В этом свойстве указывается продолжительность сворачивания/разворачивания календаря. Эту величину можно указать количеством миллисекунд или одним из трех текстовых значений: "slow", "normal", "fast" (600, 400, 200 миллисекунд). Тип анимации, применяемый при сворачивании/разворачивании календаря задается в свойстве showAnim (см. его описание ниже). // ------- Работа со свойством duration --------- // в момент установки datepicker на элемент $("selector").datepicker({ duration: 700 }); //получение значения duration var duration = $("selector").datepicker( "option", "duration" ); //изменение значения duration $("selector").datepicker( "option", "duration", 700 );

firstDay(0)

С помощью этого свойства задается, какой день недели идет первым в календаре. 0 для воскресенья, 1 для понедельника и т.д. (Для российской аудитории, естественно привычнее, когда неделя начинается с понедельника, для чего этот параметр нужно установить в 1). Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация). // ------- Работа со свойством firstDay --------- // в момент установки datepicker на элемент $("selector").datepicker({ firstDay: 1 }); //получение значения firstDay var firstDay = $("selector").datepicker( "option", "firstDay" ); //изменение значения firstDay $("selector").datepicker( "option", "firstDay", 1 );

gotoCurrent(false)

На панели дополнительных кнопок есть кнопка Current, нажатие на которую должно "перелистывать" календарь на определенный месяц. Если gotoCurrent установлено в false, то при нажатии на эту кнопку, календарь "перелистнется" на месяц с текущим днем, а если в true, то на месяц с первоначально выделенной датой (она задается в свойстве defaultDate и по умолчанию равна текущей дате). // ------- Работа со свойством gotoCurrent --------- // в момент установки datepicker на элемент $("selector").datepicker({ gotoCurrent: true }); //получение значения gotoCurrent var gotoCurrent = $("selector").datepicker( "option", "gotoCurrent" ); //изменение значения gotoCurrent $("selector").datepicker( "option", "gotoCurrent", true );

hideIfNoPrevNext(false)

Если ограничить рамки календаря с помощью свойств minDate и maxDate, то месяцы, которые не входят в эти рамки становятся недоступными. Это выражается в том, что иконка, переключающая месяцы вперед или назад становится не активной (блеклой и не нажимаемой), когда дело доходит до недоступных месяцев. Если установить свойство hideIfNoPrevNext в true, то вместо потери активности, иконка переключения месяцев будет полностью скрыта. // ------- Работа со свойством hideIfNoPrevNext --------- // в момент установки datepicker на элемент $("selector").datepicker({ hideIfNoPrevNext: true }); //получение значения hideIfNoPrevNext var hideIfNoPrevNext = $("selector").datepicker( "option", "hideIfNoPrevNext" ); //изменение значения hideIfNoPrevNext $("selector").datepicker( "option", "hideIfNoPrevNext", true );

isRTL(false)

Установите это свойство в true, если направление используемого языка идет справа налево (как арабский или иврит). Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация). // ------- Работа со свойством isRTL --------- // в момент установки datepicker на элемент $("selector").datepicker({ isRTL: true }); //получение значения isRTL var isRTL = $("selector").datepicker( "option", "isRTL" ); //изменение значения isRTL $("selector").datepicker( "option", "isRTL", true );

maxDate(null)

С помощью этого свойства можно указать наибольшую дату, которую можно выбрать (более поздние даты окажутся не выбираемыми). Это свойство можно указать задав конкретную дату с помощью javascript-объекта Date, целого числа (на это число дней будет совершен сдвиг относительно текущей даты) или с помощью строки (так же указав сдвиг относительно текущей даты). В строке нужно указать на сколько лет ("y"), месяцев ("m"), недель("w"), дней ("d") нужно сдвинуть дату, например:
  • "+1m +7d" — на месяц и семь дней вперед
  • "-1y -2w" — на год и две недели назад
// ------- Работа со свойством maxDate --------- // в момент установки datepicker на элемент $("selector").datepicker({ maxDate: 7 }); //получение значения maxDate var maxDate = $("selector").datepicker( "option", "maxDate" ); //изменение значения maxDate $("selector").datepicker( "option", "maxDate", 7 );

minDate(null)

С помощью этого свойства можно указать наименьшую дату, которую можно выбрать (более ранние даты окажутся не выбираемыми). Это свойство можно указать задав конкретную дату с помощью javascript-объекта Date, целого числа (на это число дней будет совершен сдвиг относительно текущей даты) или с помощью строки (так же указав сдвиг относительно текущей даты). В строке нужно указать на сколько лет ("y"), месяцев ("m"), недель("w"), дней ("d") нужно сдвинуть дату, например:
  • "+1m +7d" — на месяц и семь дней вперед
  • "-1y -2w" — на год и две недели назад
// ------- Работа со свойством minDate --------- // в момент установки datepicker на элемент $("selector").datepicker({ minDate: -7 }); //получение значения maxDate var minDate = $("selector").datepicker( "option", "minDate" ); //изменение значения minDate $("selector").datepicker( "option", "minDate", -7 );

monthNames(см. в описании)

В этом свойстве находится список имен месяцев, которые будут использоваться в календаре (по порядку, начиная с января). Значение по умолчанию: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']. Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация). // ------- Работа со свойством monthNames --------- // в момент установки datepicker на элемент $("selector").datepicker({ monthNames: ['Januar','Februar','Marts','April','Maj','Juni', 'Juli','August','September','Oktober','November','December'] }); //получение значения monthNames var monthNames = $("selector").datepicker( "option", "dayNames" ); //изменение значения monthNames $("selector").datepicker( "option", "monthNames", ['Januar','Februar','Marts','April','Maj','Juni', 'Juli','August','September','Oktober','November','December'] );

monthNamesShort(см. в описании)

В этом свойстве находится список сокращенных имен месяцев, которые будут использоваться в календаре (по порядку, начиная с января). Значение по умолчанию: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']. Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация). // ------- Работа со свойством monthNamesShort --------- // в момент установки datepicker на элемент $("selector").datepicker({ monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] }); //получение значения monthNamesShort var monthNamesShort = $("selector").datepicker( "option", "monthNamesShort" ); //изменение значения monthNamesShort $("selector").datepicker( "option", "monthNamesShort", ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] );

navigationAsDateFormat(false)

Если включить это свойство, то значения свойств prevText, nextText и currentText будут автоматически заменены на имена соответствующих месяцев (предыдущего, следующего и текущего). // ------- Работа со свойством navigationAsDateFormat --------- // в момент установки datepicker на элемент $("selector").datepicker({navigationAsDateFormat:true}); //получение значения navigationAsDateFormat var navigationAsDateFormat = $("selector").datepicker( "option", "navigationAsDateFormat" ); //изменение значения navigationAsDateFormat $("selector").datepicker( "option", "navigationAsDateFormat", true);

nextText("Next")

Соответствует текстовому значению ссылки, которая перелистывает календарь на месяц вперед. В большинстве тем оформления UI, эта ссылка заменена на иконку, и это текстовое значение появляется лишь при наведении на нее курсора. Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация). // ------- Работа со свойством nextText --------- // в момент установки datepicker на элемент $("selector").datepicker({nextText: "Следующий"}); //получение значения nextText var nextText = $("selector").datepicker( "option", "nextText" ); //изменение значения nextText $("selector").datepicker( "option", "nextText", "Следующий");

numberOfMonths(1)

Значение этого поля, определяет количество одновременно отображаемых месяцев календаря. Это свойство может быть задано целым числом (количество месяцев расположенных в строку) или массивом из двух элементов (количества строк и столбцов с месяцами). См. пример "Несколько месяцев" выше. // ------- Работа со свойством numberOfMonths --------- // в момент установки datepicker на элемент $("selector").datepicker({numberOfMonths: [2, 3]}); //получение значения numberOfMonths var numberOfMonths = $("selector").datepicker( "option", "numberOfMonths" ); //изменение значения numberOfMonths $("selector").datepicker( "option", "numberOfMonths", [2, 3]);

prevText("Prev")

Соответствует текстовому значению ссылки, которая перелистывает календарь на месяц назад. В большинстве тем оформления UI, эта ссылка заменена на иконку, и это текстовое значение появляется лишь при наведении на нее курсора. Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация). // ------- Работа со свойством prevText --------- // в момент установки datepicker на элемент $("selector").datepicker({prevText: "Предыдущий"}); //получение значения prevText var prevText = $("selector").datepicker( "option", "prevText" ); //изменение значения prevText $("selector").datepicker( "option", "prevText", "Предыдущий");

selectOtherMonths(false)

Если это свойство, а так же showOtherMonths равно true, то пустое пространство календаря, которое часто образуется в первую и последнюю неделю месяца за счет неполных недель, будет заполнено числами из соседних месяцев, которые можно будет выбирать. // ------- Работа со свойством selectOtherMonths --------- // в момент установки datepicker на элемент $("selector").datepicker({ selectOtherMonths:true }); //получение значения selectOtherMonths var selectOtherMonths = $("selector").datepicker( "option", "selectOtherMonths" ); //изменение значения selectOtherMonths $("selector").datepicker( "option", "selectOtherMonths", true );

shortYearCutoff("+10")

При вводе текста в поле, на котором установлен календарь, плагин datepicker пытается распознать дату по введенному тексту и если в соответствии формату (см. свойство dateFormat), год задается двумя последними цифрами ("01", вместо "2001" и т. д.), ему необходимо определять первые две цифры года. Параметр shortYearCutoff определяет числовую границу, после которой все года будут относиться к 20 веку (19), а все года до этой границы, включая ее саму, будут относиться к 21 веку (20). Например, если задать этому параметру число 30, то даты "00", .., "30" будут рассматриваться, как "2000", .., "2030", а "31", ..,"99", как "1931", .., "1999". Если задать этот параметр в виде строки, то можно указывать числа, относительно текущего года: "+20" — задаст границу, равную текущему году + 20. Не следует указывать в этом параметре числа, превышающие 99. // ------- Работа со свойством shortYearCutoff --------- // в момент установки datepicker на элемент $("selector").datepicker({ shortYearCutoff:40 }); //получение значения shortYearCutoff var shortYearCutoff = $("selector").datepicker( "option", "shortYearCutoff" ); //изменение значения shortYearCutoff $("selector").datepicker( "option", "shortYearCutoff", 40 );

showAnim("show")

Определяет тип UI-анимации, с которой будет появляться и исчезать календарь. Возможные значения — имя любого UI эффекта или пустая строка, если анимацию использовать не нужно. // ------- Работа со свойством showAnim --------- // в момент установки datepicker на элемент $("selector").datepicker({ showAnim:"fold" }); //получение значения showAnim var showAnim = $("selector").datepicker( "option", "showAnim" ); //изменение значения showAnim $("selector").datepicker( "option", "showAnim", "fold" );

showButtonPanel(false)

Определяет, нужно ли отображать панель с дополнительными кнопками календаря (см. пример "Дополнительные кнопки" выше). // ------- Работа со свойством showButtonPanel --------- // в момент установки datepicker на элемент $("selector").datepicker({ showButtonPanel:true }); //получение значения showButtonPanel var showButtonPanel = $("selector").datepicker( "option", "showButtonPanel" ); //изменение значения showButtonPanel $("selector").datepicker( "option", "showButtonPanel", true );

showCurrentAtPos(0)

Задавать этот параметр имеет смысл, только если задано отображение нескольких месяцев одновременно (см. параметр numberOfMonths). showCurrentAtPos определяет, на какой позиции (слева/сверху) должен оказаться текущий месяц. // ------- Работа со свойством showCurrentAtPos --------- // в момент установки datepicker на элемент $("selector").datepicker({ showCurrentAtPos:2 }); //получение значения showCurrentAtPos var showCurrentAtPos = $("selector").datepicker( "option", "showCurrentAtPos" ); //изменение значения showCurrentAtPos $("selector").datepicker( "option", "showButtonPanel", 2 );

showMonthAfterYear(false)

Определяет, нужно ли указывать в заголовке календаря месяц после года (true) или нааборот (false). // ------- Работа со свойством showMonthAfterYear --------- // в момент установки datepicker на элемент $("selector").datepicker({ showMonthAfterYear:false }); //получение значения showMonthAfterYear var showMonthAfterYear = $("selector").datepicker( "option", "showMonthAfterYear" ); //изменение значения showMonthAfterYear $("selector").datepicker( "option", "showMonthAfterYear", false );

showOn("focus")

Определяет, в ответ на какое действие будет открываться календарь. Возможные значения: "focus" (получение фокуса текстовым полем), "button" (нажатие на вспомогательную кнопку), "both" (в обоих случаях). В двух последних значениях, вспомогательная кнопка будет добавлена автоматически (см. пример "Иконка" выше). Задать изображение для кнопки можно в свойстве buttonImage. // ------- Работа со свойством showOn --------- // в момент установки datepicker на элемент $("selector").datepicker({ showOn:"both" }); //получение значения showOn var showOn = $("selector").datepicker( "option", "showOn" ); //изменение значения showOn $("selector").datepicker( "option", "showOn", "both" );

showOptions({})

Если для открытия/закрытия календаря в свойстве showAnim задана одна их UI-анимаций, то в описываемом свойстве можно задать ее опции. // ------- Работа со свойством showOptions --------- // в момент установки datepicker на элемент $("selector").datepicker({ showOptions:{direction:'up'} }); //получение значения showOptions var showOptions = $("selector").datepicker( "option", "showOptions" ); //изменение значения showOptions $("selector").datepicker( "option", "showOptions", {direction:'up'} );

showOtherMonths(false)

Если это свойство равно true, то пустое пространство календаря, которое часто образуется в первую и последнюю неделю месяца за счет неполных недель, будет заполнено числами из соседних месяцев. Однако, если при этом свойство selectOtherMonths не будет равно true, то эти даты нельзя будет выбирать. // ------- Работа со свойством showOtherMonths --------- // в момент установки datepicker на элемент $("selector").datepicker({ showOtherMonths:true }); //получение значения showOtherMonths var showOtherMonths = $("selector").datepicker( "option", "showOtherMonths" ); //изменение значения showOtherMonths $("selector").datepicker( "option", "showOtherMonths", true );

showWeek(false)

Если это свойство равно true, то в календаре будут отображаться номера недели (см. пример "Номер недели" выше). // ------- Работа со свойством showWeek --------- // в момент установки datepicker на элемент $("selector").datepicker({ showWeek:true }); //получение значения showWeek var showWeek = $("selector").datepicker( "option", "showWeek" ); //изменение значения showWeek $("selector").datepicker( "option", "showWeek", true );

stepMonths(1)

Определяет, на сколько месяцев вперед/назад будет перемотан календарь при нажатии на кнопки следующего/предыдущего месяца (Next/Prev). // ------- Работа со свойством stepMonths --------- // в момент установки datepicker на элемент $("selector").datepicker({ stepMonths:3 }); //получение значения stepMonths var stepMonths = $("selector").datepicker( "option", "stepMonths" ); //изменение значения stepMonths $("selector").datepicker( "option", "stepMonths", 3 );

weekHeader("Wk")

Определяет заголовок колонки календаря, в которой будут располагаться номера недели (отображение этой колонки включается с помощью свойства showWeek). Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация). // ------- Работа со свойством weekHeader --------- // в момент установки datepicker на элемент $("selector").datepicker({ weekHeader:"Нед" }); //получение значения weekHeader var yearRange = $("selector").datepicker( "option", "weekHeader" ); //изменение значения weekHeader $("selector").datepicker( "option", "weekHeader", "Нед" );

yearRange("c-10:c+10")

Определяет диапазон лет, которые окажутся в выпадающем списке выбора года (включается с помощью свойства changeYear). Это свойство можно задать относительно текущего года в формате "-nn:+nn", либо относительно отображаемого календарем года, в формате "c-nn:+c+nn", либо конкретным диапазоном дат: "nnnn:nnnn". Указанные варианты можно комбинировать: "nnnn:+nn". Кроме указанных в этом свойстве ограничений, на диапазон дат в выпадающем списке даты будет влиять заданные максимальная и минимальная дата (свойства minDate и maxDate). // ------- Работа со свойством yearRange --------- // в момент установки datepicker на элемент $("selector").datepicker({ yearRange:'2000:2010' }); //получение значения yearRange var yearRange = $("selector").datepicker( "option", "yearRange" ); //изменение значения yearRange $("selector").datepicker( "option", "yearRange", '2000:2010' );

yearSuffix("")

В этом свойстве можно указать текстовое выражение, которое будет добавлено после указания года в заголовке календаря. Например "г.". // ------- Работа со свойством yearSuffix --------- // в момент установки datepicker на элемент $("selector").datepicker({ yearSuffix:'г.' }); //получение значения yearSuffix var yearSuffix = $("selector").datepicker( "option", "yearSuffix" ); //изменение значения yearSuffix $("selector").datepicker( "option", "yearSuffix", 'г.' );

↓ Внутреннее имя события :внешнее имя

create:datepickercreate

Событие create происходит в момент установки datepicker на элемент. // обработка события create $("selector").datepicker({ create: function(event, ui) { ... } }); // еще один способ (используя метод bind) $("selector").bind( "datepickercreate", function(event, ui){ ... });

beforeShow:нет

Функция, заданная в beforeShow будет вызываться непосредственно перед (каждым) появлением календаря. Первый параметр, передаваемый в нее будет содержать input-элемент, к которому привязан появляющийся календарь, а второй параметр содержит объект самого календаря. Если эта функция вернет объект с новыми настройками календаря, то они сразу вступят в силу. Обработчики этого события нельзя устанавливать с помощью . $("selector").datepicker({ beforeShow: function(input, inst) { ... } });

beforeShowDay:нет

Функция, заданная в beforeShowDay будет вызываться непосредственно перед отображением каждого месяца (т.е. перед каждым открытием календаря, и дополнительно, при каждом "перелистывании" месяца). При этом, она будет вызвана для каждого дня отображаемого месяца в отдельности. Более того, функция будет вызвана и для некоторых дат из соседних месяцев. Например, перед открытием июня 2011 года

File:calendar.png

функция, заданная в beforeShowDay будет вызвана для чисел, начиная с 29 мая и по 2 июля (т.е. будут вызваны и даты, попадающие в пустующие ячейки календаря).

При вызове, эта функция будет получать в качестве единственного параметра обрабатываемую дату в виде объекта Date. Результатом работы этой функции должен быть массив из следующих значений: [0] - true или false определяющие, будет ли дата переданная в параметре выбираемой; [1] - имя css-класса, который будет использован при отображения даты в календаре или "", если специфических классов применять не нужно; [2] - необязательный элемент, в котором можно задать текст для подсказки, всплывающей при наведении на ячейку даты в календаре.

Обработчики этого события нельзя устанавливать с помощью .

$("selector").datepicker({ beforeShowDay: function(date) { ... return[true, ""];} });

onChangeMonthYear:нет

Функция, заданная в onChangeMonthYear будет вызываться при "перелистывании" календаря на другой месяц или год. При вызове, функция будет получать три параметра: номер года, номер месяца и объект календаря. Переменная this будет содержать input-элемент, к которому привязан текущий календарь. Обработчики этого события нельзя устанавливать с помощью . $("selector").datepicker({ onChangeMonthYear: function(year, month, inst) { ... } });

onClose:нет

Функция, заданная в onClose будет вызываться при каждом закрытии календаря. Первый параметр, передаваемый в нее будет содержать текст выбранной даты, в формате, определенном в свойстве dateFormat или "", если дата не была выбрана. Второй параметр будет содержать объект самого календаря. Переменная this будет содержать input-элемент, к которому привязан текущий календарь. Обработчики этого события нельзя устанавливать с помощью . $("selector").datepicker({ onClose: function(dateText, inst) { ... } });

onSelect:нет

Функция, заданная в onSelect будет вызываться выборе даты в календаре. Первый параметр, передаваемый в нее будет содержать текст выбранной даты, в формате, определенном в свойстве dateFormat. Второй параметр будет содержать объект самого календаря. Переменная this будет содержать input-элемент, к которому привязан текущий календарь. Обработчики этого события нельзя устанавливать с помощью . $("selector").datepicker({ onSelect: function(dateText, inst) { ... } });

Плагин Datepicker использует стандартные стили jQueryUI-css для оформления календаря. Для редактирования оформления рекомендуется использовать на сайте jQuery UI. Для специфичных манипуляций с элементами календаря можно воспользоваться информацией о его структуре:

// если применить плагин Datepicker к input-элементу типа text // или div'у, на страницу будет добавлена следующая конструкция: ltdiv id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible" gt ltdiv class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"gt lta class="ui-datepicker-prev ui-corner-all"gttitle="Prev">ltspan class="ui-icon ui-icon-circle-triangle-w"gtPrevlt/spangtlt/agt lta class="ui-datepicker-next ui-corner-all" title="Next"gtltspan class="ui-icon ui-icon-circle-triangle-e"gtNextlt/spangtlt/agt ltdiv class="ui-datepicker-title"gt ltspan class="ui-datepicker-month"gtJanuarylt/spangtltspan class="ui-datepicker-year"gt2009lt/spangt lt/divgt lt/divgt lttable class="ui-datepicker-calendar"gt lttheadgt lttrgt ltth class="ui-datepicker-week-end"gtltspan title="Sunday"gtSult/spangtlt/thgt ... lt/trgt lt/theadgt lttbodygtlttrgt lttd class="ui-datepicker-week-end ui-datepicker-other-month "gt 1 lt/tdgt ... lt/trgt lt/tbodygt lt/tablegt ltdiv class="ui-datepicker-buttonpane ui-widget-content"gt ltbutton type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all"gtTodaylt/buttongt ltbutton type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all"gtDonelt/buttongt lt/divgt lt/divgt
Источник: http://jquery.page2page.ru/index.php5/Календарь_UI

X

Календарь jquery на русском фото


Календарь jquery на русском

Календарь jquery на русском

Календарь jquery на русском

Календарь jquery на русском

Календарь jquery на русском

Календарь jquery на русском

Календарь jquery на русском

Читать: