Календарь UI

Datepicker

~lt~tit~gt~Простое использование~lt~/tit~gt~
~lt~coment~gt~Если применить Datepicker к текстовому полю, то при получении им фокуса рядом появится календарь. Если кликнуть по дню на этом календаре, то в поле ввода появится текстовый вариант этой даты.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~p~gt~Дата: ~lt~input type="text" id="datepicker"~gt~~lt~/p~gt~
  ~lt~script~gt~
    $("#datepicker").datepicker();
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Формат даты~lt~/tit~gt~
~lt~coment~gt~Задать формат предоставляемой календарем дату можно с помощью свойства formatDate.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~p style="position:relative; left:17px"~gt~Дата: ~lt~input type="text" id="datepicker"~gt~~lt~/p~gt~
  Формат: 
  ~lt~select id="format"~gt~
    ~lt~option value="mm/dd/yy"~gt~По умолчанию - mm/dd/yy~lt~/option~gt~
    ~lt~option value="yy-mm-dd"~gt~ISO 8601 - yy-mm-dd~lt~/option~gt~
    ~lt~option value="d M, y"~gt~Короткая - d M, y~lt~/option~gt~
    ~lt~option value="d MM, y"~gt~Средняя - d MM, y~lt~/option~gt~
    ~lt~option value="DD, d MM, yy"~gt~Полная - DD, d MM, yy~lt~/option~gt~
  ~lt~/select~gt~
  ~lt~script~gt~
    $("#datepicker").datepicker();
    $("#format").change(function(){
      $("#datepicker").datepicker("option", "dateFormat", $(this).val());
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Ограничение выбираемых дат~lt~/tit~gt~
~lt~coment~gt~С помощью свойств minDate и maxDate можно ограничить диапазон выбираемых дат. Например определенным числом с помощью объекта даты (new Date(2009, 1 - 1, 26)) или количеством времени относительно текущей даты (maxDate='+1M +10D' - не позднее чем месяц и 10 дней относительно текущего дня). В данном примере ограничение {minDate:-20, maxDate:"+1M +10D"} (не ранее 20 дней и не позднее месяца и десяти дней)~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~p~gt~Дата: ~lt~input type="text" id="datepicker"~gt~~lt~/p~gt~
  ~lt~script~gt~
    $("#datepicker").datepicker({minDate:-20, maxDate:"+1M +10D"});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Язык календаря~lt~/tit~gt~
~lt~coment~gt~С помощью пары несложных манипуляций можно изменить текстовое содержание календаря, в том числе изменить его язык. См подробности в разделе описание.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~script src="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-fr.js"~gt~~lt~/script~gt~
  ~lt~script src="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-ru.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~p~gt~Дата: ~lt~input type="text" id="datepicker"~gt~~lt~/p~gt~
  Язык: ~lt~select id="locale"~gt~
    ~lt~option value="fr"~gt~French (Français)~lt~/option~gt~
    ~lt~option value="ru" selected="selected"~gt~Russian (Русский)~lt~/option~gt~
  ~lt~/select~gt~
  ~lt~script~gt~
    $.datepicker.setDefaults( $.datepicker.regional[""] );
    $("#datepicker").datepicker( $.datepicker.regional["ru"] );
    $("#locale").change(function(){
      $("#datepicker").datepicker("option", $.datepicker.regional[$(this).val()]);
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Не временный календарь~lt~/tit~gt~
~lt~coment~gt~Применив datepicker к div-элементу вы превратите его в календарь, который будет постоянно присутствовать на странице.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="datepicker"~gt~~lt~/div~gt~
  ~lt~script~gt~
    $("#datepicker").datepicker();
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Дополнительные кнопки~lt~/tit~gt~
~lt~coment~gt~Если установить свойство showButtonPanel в true, то календарь будет содержать две дополнительные кнопки: Today и Done (их текст можно изменить). При нажатии на Today, календарь автоматически будет перелистан на текущий месяц, вторая кнопка закрывает календарь. При необходимости, одну из кнопок можно отключить.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~p~gt~Дата: ~lt~input type="text" id="datepicker"~gt~~lt~/p~gt~
  ~lt~script~gt~
    $("#datepicker").datepicker({showButtonPanel:true});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Выбор года и месяца~lt~/tit~gt~
~lt~coment~gt~С помощью свойств changeMonth и changeYear можно установить на календарь выбор месяца и года из выпадающего списка (удобно, когда на календаре нужно выбирать разрозненные даты).~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~p~gt~Дата: ~lt~input type="text" id="datepicker"~gt~~lt~/p~gt~
  ~lt~script~gt~
    $("#datepicker").datepicker({changeMonth:true, changeYear:true});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Дни соседних месяцев~lt~/tit~gt~
~lt~coment~gt~Если включить свойство showOtherMonths, то пустое пространство календаря, которое часто образуется в первую и последнюю неделю месяца за счет неполных недель, будет заполнено числами из соседних месяцев. Если включить еще и selectOtherMonths то эти даты можно будет выбирать как и даты из текущего месяца.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~p~gt~Дата: ~lt~input type="text" id="datepicker"~gt~~lt~/p~gt~
  ~lt~script~gt~
    $("#datepicker").datepicker({showOtherMonths:true, selectOtherMonths:true});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Номер недели~lt~/tit~gt~
~lt~coment~gt~Календарь может отображать номер недели в году. За это отвечает свойство showWeek. Подсчет недель начинается с той недели года, которая содержит первый четверг в наступившем году(согласно стандарту ISO 8601.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~p~gt~Дата: ~lt~input type="text" id="datepicker"~gt~~lt~/p~gt~
  ~lt~script~gt~
    $("#datepicker").datepicker({showWeek:true, firstDay:1});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Несколько месяцев~lt~/tit~gt~
~lt~coment~gt~Календарь может отображать сразу несколько месяцев (параметр numberOfMonths).~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~p~gt~Дата: ~lt~input type="text" id="datepicker"~gt~~lt~/p~gt~
  ~lt~script~gt~
    $("#datepicker").datepicker({numberOfMonths:2});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Иконка~lt~/tit~gt~
~lt~coment~gt~По умолчанию, календарь открывается на получение фокуса, однако, для удобства и наглядности, можно включить отображение кнопки-иконки, нажатие на которую будет открывать календарь.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~p~gt~Дата: ~lt~input type="text" id="datepicker"~gt~~lt~/p~gt~
  ~lt~script~gt~
    $("#datepicker").datepicker({
      showOn:"button", 
      buttonImage:"http://jqueryui.com/demos/datepicker/images/calendar.gif",
      buttonImageOnly:true
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Анимация открытия~lt~/tit~gt~
~lt~coment~gt~Открытие календаря по умолчанию сопровождается UI-анимацией "show". Вместо этого, в параметре showAnim можно указать любую другую UI-анимацию или выключить ее совсем (значение - пустая строка).~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~p style="position:relative; left:31px"~gt~Дата: ~lt~input type="text" id="datepicker"~gt~~lt~/p~gt~
  ~lt~p~gt~Анимация:
    ~lt~select id="anim"~gt~
      ~lt~option value="show"~gt~Show (default)~lt~/option~gt~
      ~lt~option value="slideDown"~gt~Slide down~lt~/option~gt~
      ~lt~option value="fadeIn"~gt~Fade in ()~lt~/option~gt~
      ~lt~option value="blind"~gt~Blind (UI Effect)~lt~/option~gt~
      ~lt~option value="bounce"~gt~Bounce (UI Effect)~lt~/option~gt~
      ~lt~option value="clip"~gt~Clip (UI Effect)~lt~/option~gt~
      ~lt~option value="drop"~gt~Drop (UI Effect)~lt~/option~gt~
      ~lt~option value="fold"~gt~Fold (UI Effect)~lt~/option~gt~
      ~lt~option value="slide"~gt~Slide (UI Effect)~lt~/option~gt~
      ~lt~option value=""~gt~None~lt~/option~gt~
    ~lt~/select~gt~
  ~lt~/p~gt~
  ~lt~script~gt~
    $("#datepicker").datepicker();
    $("#anim").change(function(){
      $("#datepicker").datepicker("option", "showAnim", $(this).val());
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Диапазон дат~lt~/tit~gt~
~lt~coment~gt~С помощью десятка строк кода javascript можно организовать выбор диапазона дат (см. исходный код).~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~p~gt~
    ~lt~label for="from"~gt~с:~lt~/label~gt~ ~lt~input type="text" id="from" name="from"/~gt~ 
    ~lt~label for="to"~gt~до:~lt~/label~gt~ ~lt~input type="text" id="to" name="to"/~gt~
  ~lt~/p~gt~
  ~lt~script~gt~
    var dates = $("#from, #to").datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 2,
      onSelect: function(selectedDate){
        var option = this.id == "from" ? "minDate" : "maxDate",
        instance = $( this ).data( "datepicker" ),
        date = $.datepicker.parseDate(
          instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
          selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
      }
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Описание

Свойства

Методы

События

Оформление

Плагин 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):void

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

// изменим тип анимации появления/скрытия календаря
$.datepicker.setDefaults({showAnim:'fold'});

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

Эта функция возвращает текстовое представление заданной даты 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]):Date

Эта функция разбирает заданную строку val, в соответствии с форматом format и настройками settings. Возвращает javascript-объект типа Date.

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):integer

Определяет номер недели в году, на которую выпадает заданная дата. Подсчет недель начинается с той недели года, которая содержит первый четверг в наступившем году(согласно стандарту ISO 8601).

$.datepicker.iso8601Week(new Date(2007, 1 - 1, 26)); // вернет 4

$.datepicker.noWeekends()

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

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

Локализация (изменение языка)
Все текстовые элементы календаря могут быть изменены. В частности, можно заменить их на элементы на требуемом языке. Это можно сделать самостоятельно (изменяя соответствующие свойства календаря) или подключив один из языковых скриптов для календаря, который сделает это автоматически (библиотека доступных скриптов). Все подключенные таким образом языковые наборы, будут храниться в переменной $.datepicker.regional, например подключенный русский набор (ru.js) окажется в $.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:boolean(false)

Останавливает\возобновляет работу плагина Datepicker на выбранных элементах.

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

altField:селектор,jQuery,element("")

При выборе даты на календаре, ее значение автоматически вставляется в текстовое поле. Если необходимо дополнительно вставлять ее в другой элемент, укажите его в параметре altField (с помощью селектора, объекта jQuery или DOM-элемента). Если необходимо, чтобы формат вставляемой даты отличался от стандартного, укажите его в свойстве (см. его описание ниже).

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

altFormat:string("")

В этом параметре можно задать Формат даты для альтернативного поля (см. свойство 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:string("")

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

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

autoSize:boolean(false)

Когда этот параметр равен true, плагин datepicker автоматически подгонит длину текстового поля, ориентируясь на заданный формат (задается в свойстве dateFormat (его описание можно найти ниже)).

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

buttonImage:string("")

Задавать этот параметр имеет смысл, только если включено открытие календаря на нажатие кнопки (свойство 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:boolean(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:string("...")

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

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

calculateWeek:function($.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:boolean(false)

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

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

changeYear:boolean(false)

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

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

closeText:string("Done")

В этом свойстве можно задать текст для кнопки на календаре, которая его (календарь) закрывает. Эта кнопка находится на панели дополнительных кнопок, поэтому будет видна только при включенной панели (см. свойство "showButtonPanel" ниже). Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация).

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

constrainInput:boolean(true)

Когда это свойство включено, плагин datepicker следит за тем, чтобы содержимое текстового поля ввода строго соответствовало заданному формату (формат задается в свойстве dateFormat (см. описание ниже)). Например, при попытке ввести разделяющий символ, не соответствующий заданному формату, datepicker отменит его ввод.

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

currentText:string("Today")

В этом свойстве можно задать текст кнопки на календаре, при нажатии на которую календарь автоматически перелистывается на текущий месяц. Эта кнопка находится на панели дополнительных кнопок, поэтому будет видна только при включенной панели (см. свойство "showButtonPanel" ниже). Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация).

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

dateFormat:string("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:array(см. в описании)

В этом свойстве находится список текстовых вариантов дней недели, которые будут использоваться в календаре (по порядку, начиная с воскресенья). Значение по умолчанию: ['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:array(см. в описании)

В этом свойстве находится список сокращенных до двух символов текстовых вариантов дней недели, которые будут использоваться в календаре (по порядку, начиная с воскресенья). Значение по умолчанию: ['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:array(см. в описании)

В этом свойстве находится список сокращенных до трех символов, текстовых вариантов дней недели, которые будут использоваться в календаре (по порядку, начиная с воскресенья). Значение по умолчанию: ['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:Date,integer,string(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:integer,string("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:integer(0)

С помощью этого свойства задается, какой день недели идет первым в календаре. 0 для воскресенья, 1 для понедельника и т.д. (Для российской аудитории, естественно привычнее, когда неделя начинается с понедельника, для чего этот параметр нужно установить в 1). Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация).

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

gotoCurrent:boolean(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:boolean(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:boolean(false)

Установите это свойство в true, если направление используемого языка идет справа налево (как арабский или иврит). Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация).

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

maxDate:Date,integer,string(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:Date,integer,string(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:array(см. в описании)

В этом свойстве находится список имен месяцев, которые будут использоваться в календаре (по порядку, начиная с января). Значение по умолчанию: ['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:array(см. в описании)

В этом свойстве находится список сокращенных имен месяцев, которые будут использоваться в календаре (по порядку, начиная с января). Значение по умолчанию: ['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:boolean(false)

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

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

nextText:string("Next")

Соответствует текстовому значению ссылки, которая перелистывает календарь на месяц вперед. В большинстве тем оформления UI, эта ссылка заменена на иконку, и это текстовое значение появляется лишь при наведении на нее курсора. Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация).

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

numberOfMonths:integer,array(1)

Значение этого поля, определяет количество одновременно отображаемых месяцев календаря. Это свойство может быть задано целым числом (количество месяцев расположенных в строку) или массивом из двух элементов (количества строк и столбцов с месяцами). См. пример "Несколько месяцев" выше.

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

prevText:string("Prev")

Соответствует текстовому значению ссылки, которая перелистывает календарь на месяц назад. В большинстве тем оформления UI, эта ссылка заменена на иконку, и это текстовое значение появляется лишь при наведении на нее курсора. Замечание это свойство относится к языковой локализации календаря (см. вкладку Описание, раздел Локализация).

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

selectOtherMonths:boolean(false)

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

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

shortYearCutoff:integer,string("+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:string("show")

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

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

showButtonPanel:boolean(false)

Определяет, нужно ли отображать панель с дополнительными кнопками календаря (см. пример "Дополнительные кнопки" выше).

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

showCurrentAtPos:integer(0)

Задавать этот параметр имеет смысл, только если задано отображение нескольких месяцев одновременно (см. параметр numberOfMonths). showCurrentAtPos определяет, на какой позиции (слева/сверху) должен оказаться текущий месяц.

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

showMonthAfterYear:boolean(false)

Определяет, нужно ли указывать в заголовке календаря месяц после года (true) или нааборот (false).

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

showOn:string("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:map({})

Если для открытия/закрытия календаря в свойстве showAnim задана одна их UI-анимаций, то в описываемом свойстве можно задать ее опции.

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

showOtherMonths:boolean(false)

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

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

showWeek:boolean(false)

Если это свойство равно true, то в календаре будут отображаться номера недели (см. пример "Номер недели" выше).

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

stepMonths:integer(1)

Определяет, на сколько месяцев вперед/назад будет перемотан календарь при нажатии на кнопки следующего/предыдущего месяца (Next/Prev).

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

weekHeader:string("Wk")

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

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

yearRange:string("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:string("")

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

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

↓ Способ вызова

.datepicker("destroy")

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

.datepicker("disable")

Останавливает работу плагина datepicker на выбранных элементах. Для возобновления, необходимо воспользоваться методом .datepicker("enable").

.datepicker("enable")

Возобновляет работу плагина datepicker на выбранных элементах (например, после того, как она была остановлена с помощью .datepicker("disable")).

.datepicker("option", optionName, [value])

Этот метод позволяет изменять/получать свойства плагина datepicker. Если необходимо изменить сразу несколько свойств, воспользуйтесь следующей формой этой функции — .datepicker("option", options), где options это объект в формате {optionName1:value1, optionName2:value2, ...}.

.datepicker("widget")

Возвращает те из выбранных элементов, к которым был применен плагин datepicker (поиск осуществляется по классу ui-datepicker, который автоматически присваивается этим элементам).

.datepicker("dialog", date, [onSelect], [settings], [pos])

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

date — дата, на которой будет открыт календарь. Может быть задана или объектом Date или строкой, содержащей дату в формате, определенным в свойстве dateFormat.

onSelect — функция, которая будет вызвана в ответ на выбор дате в календаре. При вызове в нее будут передаваться два параметра: строка с выбранной датой и объект данного календаря.

settings — объект с настройками для календаря.

pos — массив с координатами, в которых должен появиться календарь ([x, y]) или объект MouseEvent, содержащий нужные координаты. Если этот параметр не указан, то календарь будет открыт в середине страницы.

.datepicker("isDisabled")

Проверяет, находится ли календарь в состоянии disabled.

.datepicker("hide")

Скрывает календарь, если он видимый.

.datepicker("show")

Делает календарь видимым.

.datepicker("refresh")

"Перерисовывает" календарь. Может понадобиться в случае каких-либо модификаций из вне.

.datepicker("getDate")

Предоставляет выбранную дату или null, если на календаре ничего не выбрано.

.datepicker("setDate", date)

Устанавливает дату date в качестве выбранной. Параметр date может быть задана или объектом Date или строкой, содержащей дату в формате, определенным в свойстве dateFormat..

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

create:datepickercreate

Событие create происходит в момент установки datepicker на элемент.

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

beforeShow:нет

Функция, заданная в beforeShow будет вызываться непосредственно перед (каждым) появлением календаря. Первый параметр, передаваемый в нее будет содержать input-элемент, к которому привязан появляющийся календарь, а второй параметр содержит объект самого календаря. Если эта функция вернет объект с новыми настройками календаря, то они сразу вступят в силу. Обработчики этого события нельзя устанавливать с помощью .bind().

$("selector").datepicker({
   beforeShow: function(input, inst) { ... }
});

beforeShowDay:нет

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

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

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

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

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

onChangeMonthYear:нет

Функция, заданная в onChangeMonthYear будет вызываться при "перелистывании" календаря на другой месяц или год. При вызове, функция будет получать три параметра: номер года, номер месяца и объект календаря. Переменная this будет содержать input-элемент, к которому привязан текущий календарь. Обработчики этого события нельзя устанавливать с помощью .bind().

$("selector").datepicker({
   onChangeMonthYear: function(year, month, inst) { ... }
});

onClose:нет

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

$("selector").datepicker({
   onClose: function(dateText, inst) { ... }
});

onSelect:нет

Функция, заданная в onSelect будет вызываться выборе даты в календаре. Первый параметр, передаваемый в нее будет содержать текст выбранной даты, в формате, определенном в свойстве dateFormat. Второй параметр будет содержать объект самого календаря. Переменная this будет содержать input-элемент, к которому привязан текущий календарь. Обработчики этого события нельзя устанавливать с помощью .bind().

$("selector").datepicker({
   onSelect: function(dateText, inst) { ... }
});

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

// если применить плагин Datepicker к input-элементу типа text 
// или div'у, на страницу будет добавлена следующая конструкция:

~lt~div 
  id="ui-datepicker-div" 
  class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"
~gt~
  ~lt~div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"~gt~
    ~lt~a class="ui-datepicker-prev ui-corner-all"~gt~title="Prev">~lt~span class="ui-icon ui-icon-circle-triangle-w"~gt~Prev~lt~/span~gt~~lt~/a~gt~
    ~lt~a class="ui-datepicker-next ui-corner-all" title="Next"~gt~~lt~span class="ui-icon ui-icon-circle-triangle-e"~gt~Next~lt~/span~gt~~lt~/a~gt~
    ~lt~div class="ui-datepicker-title"~gt~
      ~lt~span class="ui-datepicker-month"~gt~January~lt~/span~gt~~lt~span class="ui-datepicker-year"~gt~2009~lt~/span~gt~
    ~lt~/div~gt~
  ~lt~/div~gt~
  ~lt~table class="ui-datepicker-calendar"~gt~
    ~lt~thead~gt~
    ~lt~tr~gt~
      ~lt~th class="ui-datepicker-week-end"~gt~~lt~span title="Sunday"~gt~Su~lt~/span~gt~~lt~/th~gt~
       ...
    ~lt~/tr~gt~
    ~lt~/thead~gt~
    ~lt~tbody~gt~~lt~tr~gt~
      ~lt~td class="ui-datepicker-week-end ui-datepicker-other-month "~gt~ 1 ~lt~/td~gt~
       ...
    ~lt~/tr~gt~
    ~lt~/tbody~gt~
  ~lt~/table~gt~
  ~lt~div class="ui-datepicker-buttonpane ui-widget-content"~gt~
    ~lt~button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all"~gt~Today~lt~/button~gt~
    ~lt~button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all"~gt~Done~lt~/button~gt~
  ~lt~/div~gt~
~lt~/div~gt~

Календарь UI

Datepicker

Функции по категориям

Навигация