Руководство jQuery - datepicker(options)

Опубликовано admin - вт, 05/01/2018 - 23:02

[Function] datepicker(options)

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

Сигнатура

datepicker(options) → jQuery

Описание

jQuery UI Datepicker очень перестраиваемый плагин, который позволяет отмечать время на ваших страницах. Вы можете самостоятельно настроить формат даты и язык, ограничивать выбор временными рамками и добавлять элементы кнопок и выбирать любую другую навигацию.
По умолчанию, календарь открывается в маленьком слое по событию onFocus и закрывается автоматически по событию onBlur или когда дата будет выбрана. Для того чтобы вывести календарь, просто присоедините его к элементам div или span.
Вы можете использовать клавиши, чтобы управлять календарём:
• page up/down - предыдущий/следующий месяц
• ctrl+page up/down - предыдущий / следующий год
• ctrl+home – текущий месяц или открытие, если он закрыт
• ctrl+left/right - предыдущий / следующий день
• ctrl+up/down - предыдущая/ следующая неделя
• enter – вводить выбранную дату
• ctrl+end – закрыть календарь и стереть дату
• escape – закрыть календарь без выбора даты

Поелезные функции
• $.datepicker.setDefaults( settings ) – Установливает настройки календаря для всех примеров.
• $.datepicker.formatDate( format, date, settings ) – формат данных в строковой переменной на основе определённого формата.
• $.datepicker.iso8601Week( date ) – определяет неделю года, определяемой от 1 до 53.
• $.datepicker.parseDate( format, value, settings ) – извлекает дату из строковой переменной на оснвое определенного формата.

Пример
Весь код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css" 
rel="stylesheet" type="text/css"/>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script>  
<script>
  $(document).ready(function(){

	$(function() {
		$("#datepicker").datepicker();
	});

  });
</script>

</head>
<body class="iframe">


<div class="demo">

<p>Date: <input id="datepicker" 
type="text"></p>

</div><!-- End demo -->

<div style="display: none;" class="demo-description">

<p>The datepicker is tied to a standard form input field.  
Focus on the input (click, or use the tab key) 
to open an interactive calendar in a small overlay. 
 Choose a date, click elsewhere on the page (blur the input), 
 or hit the Esc key to close. If a date is chosen,
 feedback is shown as the input's value.</p>

</div><!-- End demo-description -->


</body>
</html>

Параметры

Опции

Опция: altField

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

"По умолчанию установлено""

Установить календарь с опцией altField.

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

Получить или установить опцию altField после запуска .

//получить опцию
var altField = $('.selector').datepicker('option', 'altField');
//установить опцию
$('.selector').datepicker('option', 'altField', '#actualDate');

Опция: altFormat

Опция dateFormat предназначена для опции altField. Данная опция позволяет показывать пользователю дату одного формата, в то время как дата другого формата отправляется позади изображения. Полный лист форматов дат указан в функции <a href="http://docs.jquery.com/UI/Datepicker/formatDate">formatDate</a>.

"По умолчанию установлено""

Установить календарь с опцией altFormat.

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

Получить или установить опцию altFormat после запуска .

//получить опцию
var altFormat = $('.selector').datepicker('option', 'altFormat');
//установить опцию
$('.selector').datepicker('option', 'altFormat', 'yy-mm-dd');

Опция: appendText

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

"По умолчанию установлено""

Установить календарь с опцией appendText.

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

Получить или установить опцию appendText после запуска .

//получить опцию
var appendText = $('.selector').datepicker('option', 'appendText');
//установить опцию
$('.selector').datepicker('option', 'appendText', '(yyyy-mm-dd)');

Опция: buttonImage

Опция определяет URL для появления кнопки изображения. Если установлено, текст кнопки станет на подобие значения alt и он не отобразится немедленно.

"По умолчанию установлено""

Установить календарь с опцией buttonImage.

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

Получить или установить опцию buttonImage после запуска.

//получить опцию
var buttonImage = $('.selector').datepicker('option', 'buttonImage');
//установить опцию
$('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif');

Опция: buttonImageOnly

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

"По умолчанию установлено"false

Установить календарь с опцией buttonImageOnly.

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

Получить или установить опцию buttonImageOnly после запуска.


//получить опцию
var buttonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly');
//установить опцию
$('.selector').datepicker('option', 'buttonImageOnly', true);

Опция: buttonText

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

"По умолчанию установлено"...

Установить календарь с опцией buttonText.

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

Получить или установить опцию buttonText после запуска.

//получить опцию
var buttonText = $('.selector').datepicker('option', 'buttonText');
//установить опцию
$('.selector').datepicker('option', 'buttonText', 'Choose');

Опция: changeMonth

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

"По умолчанию установлено"false

Установить календарь с опцией changeMonth.

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

Получить или установить опцию changeMonth после запуска.

//получить опцию
var changeMonth = $('.selector').datepicker('option', 'changeMonth');
//установить опцию
$('.selector').datepicker('option', 'changeMonth', true);

Опция: changeYear

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

"По умолчанию установлено"false

Установить календарь с опцией changeYear.

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

Получить или установить опцию changeYear после запуска.

//получить опцию
var changeYear = $('.selector').datepicker('option', 'changeYear');
//установить опцию
$('.selector').datepicker('option', 'changeYear', true);

Опция: closeText

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

"По умолчанию установлено"done

Установить календарь с опцией closeText.

$('.selector').datepicker({ closeText: 'X' });

Получить или установить опцию closeText после запуска.

//получить опцию
var closeText = $('.selector').datepicker('option', 'closeText');
//установить опцию
$('.selector').datepicker('option', 'closeText', 'X');

Опция: constrainInput

True, если элемент input ограничен с текущим форматом даты.

"По умолчанию установлено"true

Установить календарь с опцией constrainInput.

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

Получить или установить опцию constrainInput после запуска.

//получить опцию
var constrainInput = $('.selector').datepicker('option', 'constrainInput');
//установить опцию
$('.selector').datepicker('option', 'constrainInput', false);

Опция: currentText

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

"По умолчанию установлено"Today

Установить календарь с опцией currentText.

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

Получить или установить опцию currentText после запуска.

//получить опцию
var currentText = $('.selector').datepicker('option', 'currentText');
//установить опцию
$('.selector').datepicker('option', 'currentText', 'Now');

Опция: dateFormat

Разобранный и отображаемый формат дат. Данный атрибут одни из регионализированных атрибутов. Полный лист доступных форматов указан в функции <a href="http://docs.jquery.com/UI/Datepicker/formatDate">formatDate</a>..

"По умолчанию установлено"mm/dd/yy

Установить календарь с опцией dateFormat.

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

Получить или установить опцию dateFormat после запуска.

//получить опцию
var dateFormat = $('.selector').datepicker('option', 'dateFormat');
//установить опцию
$('.selector').datepicker('option', 'dateFormat', 'yy-mm-dd');

Опция: dayNames

Список полных имён дней, начинающийся с Sunday, список используется через опцию dateFormat. Так же список может появляться как всплывающее окно при проведении курсором по корреспондирующему столбцу заголовков. Данный атрибут одни из регионализирванных атрибутов.

"По умолчанию установлено"['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

Установить календарь с опцией dayNames.

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

Получить или установить опцию dayNames после запуска.

//получить опцию
var dayNames = $('.selector').datepicker('option', 'dayNames');
//установить опцию
$('.selector').datepicker('option', 'dayNames', ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']);

Опция: dayNamesMin

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

"По умолчанию установлено"['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

Установить календарь с опцией dayNamesMin.

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

Получить или установить опцию dayNamesMin:после запуска.

//получить опцию
var dayNamesMin = $('.selector').datepicker('option', 'dayNamesMin');
//установить опцию
$('.selector').datepicker('option', 'dayNamesMin', ['Di', 'Lu', 'Ma',

Опция: dayNamesShort

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

"По умолчанию установлено"['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

Установить календарь с опцией dayNamesShort

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

Получить или установить опцию dayNamesShort:после запуска.

//получить опцию
var dayNamesShort = $('.selector').datepicker('option', 'dayNamesShort');
//установить опцию
$('.selector').datepicker('option', 'dayNamesShort', ['Dim', 'Lun',

Опция: defaultDate

Опция выделяет определенную дату при открытии календаря, если в поле нет введенной даты. Определить её можно либо передав дату как объект, или указав число дней (напр. +7) или указав переменную ('y' для лет, 'm' для месяцев, 'w' для недель, 'd' для дней, например '+1m +7d'), либо вы можете указать null для указания на сегодняшнюю дату.

"По умолчанию установлено"null

Установить календарь с опцией defaultDate.

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

Получить или установить опцию defaultDate:после запуска.

//получить опцию
var defaultDate = $('.selector').datepicker('option', 'defaultDate');
//установить опцию
$('.selector').datepicker('option', 'defaultDate', +7);

Опция: duration

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

"По умолчанию установлено"normal

Установить календарь с опцией duration:.

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

Получить или установить опцию duration:после запуска.

//получить опцию
var duration = $('.selector').datepicker('option', 'duration');
//установить опцию
$('.selector').datepicker('option', 'duration', 'slow');

Опция: firstDay

Опция определяет первый день недели: Sunday is 0, Monday is 1, ... Данный аттрибут один из регионализированных атрибутов..

"По умолчанию установлено"0

Установить календарь с опцией firstDay.

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

Получить или установить опцию firstDay:после запуска.

//получить опцию
var firstDay = $('.selector').datepicker('option', 'firstDay');
//установить опцию
$('.selector').datepicker('option', 'firstDay', 1);

Опция: gotoCurrent

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

"По умолчанию установлено"false

Установить календарь с опцией gotoCurrent

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

Получить или установить опцию gotoCurrent:после запуска.

//получить опцию
var gotoCurrent = $('.selector').datepicker('option', 'gotoCurrent');
//установить опцию
$('.selector').datepicker('option', 'gotoCurrent', true);

Опция: hideIfNoPrevNext

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

"По умолчанию установлено"false

Установить календарь с опцией hideIfNoPrevNext.

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

Получить или установить опцию hideIfNoPrevNext:после запуска.

//получить опцию
var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext');
//установить опцию
$('.selector').datepicker('option', 'hideIfNoPrevNext', true);

Опция: isRTL

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

"По умолчанию установлено"false

Установить календарь с isRTL.

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

Получить или установить опцию isRTL:после запуска.

//получить опцию
var isRTL = $('.selector').datepicker('option', 'isRTL');
//установить опцию
$('.selector').datepicker('option', 'isRTL', true);

Опция: maxDate

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

"По умолчанию установлено"null

Установить календарь с maxDate:.

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

Получить или установить опцию maxDate:после запуска.

//получить опцию
var maxDate = $('.selector').datepicker('option', 'maxDate');
//установить опцию
$('.selector').datepicker('option', 'maxDate', '+1m +1w');

Опция: minDate

Опция устанавливает максимальный промежуток времени для прошедших дат, из которого может быть выбрана дата, представленный объектом даты, или числом дней начиная с сегодняшнего дня (напр. -7) или строковым значением ('y' для лет, 'm' для месяцев, 'w' для недель, 'd' для дней, напр. '-1m -1w'), либо вы можете указать null чтобы не устанавливать ограничения.

"По умолчанию установлено"null

Установить календарь с minDate.

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

Получить или установить опцию minDate:после запуска.

//получить опцию
var minDate = $('.selector').datepicker('option', 'minDate');
//установить опцию
$('.selector').datepicker('option', 'minDate', new Date(2007, 1 - 1, 1));

Опция: monthNames

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

"По умолчанию установлено"['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

Установить календарь с monthNames.

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

Получить или установить опцию monthNames:после запуска.

//получить опцию
var monthNames = $('.selector').datepicker('option', 'monthNames');
//установить опцию
$('.selector').datepicker('option', 'monthNames', ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']);

Опция: monthNamesShort

Список сокращенных названий месяцев, применяется с опцией dateFormat. Данный атрибут регионализирован.

"По умолчанию установлено"['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

Установить календарь с опцией duration:.

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

Получить или установить опцию duration:после запуска.

//получить опцию
var duration = $('.selector').datepicker('option', 'duration');
//установить опцию
$('.selector').datepicker('option', 'duration', 'slow');

Опция: duration

"По умолчанию установлено"normal

Установить календарь с monthNamesShort.

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

Получить или установить опцию monthNamesShort:после запуска.

//получить опцию
var monthNamesShort = $('.selector').datepicker('option', 'monthNamesShort');
//установить опцию
$('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']);

Опция: navigationAsDateFormat

Когда установлено true функция formatDate отображает формат выводимой даты для prevText, nextText, и currentText значений до его отображения, что позволяет отображать название выбранного месяца в качестве примера.

"По умолчанию установлено"false

Установить календарь с опцией navigationAsDateFormat.

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

Получить или установить опцию navigationAsDateFormat:после запуска.

//получить опцию
var navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');
//установить опцию
$('.selector').datepicker('option', 'navigationAsDateFormat', true);

Опция: nextText

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

"По умолчанию установлено"Next

Установить календарь с опцией nextText.

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

Получить или установить опцию nextText:после запуска.

//получить опцию
var nextText = $('.selector').datepicker('option', 'nextText');
//установить опцию
$('.selector').datepicker('option', 'nextText', 'Later');

Опция: numberOfMonths

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

"По умолчанию установлено"1

Установить календарь с опцией numberOfMonths.

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

Получить или установить опцию numberOfMonths:после запуска.

//получить опцию
var numberOfMonths = $('.selector').datepicker('option', 'numberOfMonths');
//установить опцию
$('.selector').datepicker('option', 'numberOfMonths', [2, 3]);

Опция: prevText

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

"По умолчанию установлено"Prev

Установить календарь с опцией prevText.

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

Получить или установить опцию numberOfMonths:после запуска.

//получить опцию
var prevText = $('.selector').datepicker('option', 'prevText');
//установить опцию
$('.selector').datepicker('option', 'prevText', 'Earlier');

Опция: shortYearCutoff

Отображает значение века в годах (используется в связи с dateFormat 'y'). Если указано цифровое значение (0-99) то оно используется затем напрямую. Если указано строковое значение, то оно затем конвертируется в числовое и добавляется к текущему году. Однажды рассчитав значение, то любые введенные даты меньше чем данное значение или равные данному значению считаются в текущем веке, несмотря на то что значения даты больше чем значение в предшествующем веке.

"По умолчанию установлено"+10

Установить календарь с опцией shortYearCutoff:

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

Получить или установить опцию shortYearCutoff:после запуска.

//получить опцию
var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff');
//установить опцию
$('.selector').datepicker('option', 'shortYearCutoff', 50);

Опция: showAnim

Опция устанавливает вид анимации для скрытия/отображения календаря. Используется 'show' (по умолчанию), 'slideDown', 'fadeIn', или другие show/hide эффекты, определяемые в jQuery UI effects.

"По умолчанию установлено"show

Установить календарь с опцией showAnim.

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

Получить или установить опцию showAnim:после запуска.

//получить опцию
var showAnim = $('.selector').datepicker('option', 'showAnim');
//установить опцию
$('.selector').datepicker('option', 'showAnim', 'fold');

Опция: showButtonPanel

Опция определяет, отображать ли панель управления календарём.

"По умолчанию установлено"false

Установить календарь с опцией showButtonPanel.

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

Получить или установить опцию showButtonPanel после запуска.

//получить опцию
var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel');
//установить опцию
$('.selector').datepicker('option', 'showButtonPanel', true);

Опция: showCurrentAtPos

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

"По умолчанию установлено"0

Установить календарь с опцией showCurrentAtPos.

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

Получить или установить опцию showCurrentAtPos после запуска.

//получить опцию
var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos');
//установить опцию
$('.selector').datepicker('option', 'showCurrentAtPos', 3);

Опция: showMonthAfterYear

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

"По умолчанию установлено"false

Установить календарь с опцией showMonthAfterYear:

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

Получить или установить опцию showMonthAfterYear после запуска.

//получить опцию
var showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear');
//установить опцию
$('.selector').datepicker('option', 'showMonthAfterYear', true);

Опция: showOn

Опция позволяет определить появление календаря, либо по событию focus ('focus'), либо появляться при нажатии по кнопке ('button'), либо появляться и в том и в другом случает ('both').

"По умолчанию установлено"focus

Установить календарь с опцией showCurrentAtPos.

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

Получить или установить опцию showCurrentAtPos после запуска.

//получить опцию
var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos');
//установить опцию
$('.selector').datepicker('option', 'showCurrentAtPos', 3);

Опция: showOptions

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

"По умолчанию установлено"{}

Установить календарь с опцией showOptions.

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

Получить или установить опцию showOptions после запуска.

//получить опцию
var showOptions = $('.selector').datepicker('option', 'showOptions');
//установить опцию
$('.selector').datepicker('option', 'showOptions', {direction: 'up');

Опция: showCurrentAtPos

"По умолчанию установлено"0

Установить календарь с опцией showCurrentAtPos.

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

Получить или установить опцию showCurrentAtPos после запуска.

//получить опцию
var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos');
//установить опцию
$('.selector').datepicker('option', 'showCurrentAtPos', 3);

Опция: showOtherMonths

Опция определяет отображение дней других месяцев (non-selectable) в начале или конце текущего месяца.

"По умолчанию установлено"false

Установить календарь с опцией showOtherMonths:

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

Получить или установить опцию showOtherMonths после запуска.

//получить опцию
var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths');
//установить опцию
$('.selector').datepicker('option', 'showOtherMonths', true);

Опция: stepMonths

Опция определяет количество месяцев, на которое осуществляется передвижение, при использовании ссылок перехода к следующим или предшествующем месяцам

"По умолчанию установлено"1

Установить календарь с опцией stepMonths.

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

Получить или установить опцию stepMonths после запуска.

//получить опцию
var stepMonths = $('.selector').datepicker('option', 'stepMonths');
//установить опцию
$('.selector').datepicker('option', 'stepMonths', 3);

Опция: yearRange

Опция определяет диапазон лет отображаемых в выпадающем списке: либо относительно текущего года (-nn:+nn) либо абсолютно (nnnn:nnnn).

"По умолчанию установлено"-10:+10

Установить календарь с опцией yearRange.

$('.selector').datepicker({ yearRange: '2000:2010' });

Получить или установить опцию yearRange после запуска.

//получить опцию
var yearRange = $('.selector').datepicker('option', 'yearRange');
//установить опцию
$('.selector').datepicker('option', 'yearRange', '2000:2010');

События

Событие: beforeShow

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

Установить функцию обратного вызова для обработки события beforeShow как инициализирующую опцию.

$('.selector').datepicker({
   beforeShow: function(input) { ... }
});

Событие: beforeShowDay

Функция получает дату как параметр и должна вернуть массив, в котором [0] равен true/false и определяет выбрана или нет дата, [1] содержит имя (имена) CSS класса или ' ' определяющие отображение календаря и [2] представляющий необязательную всплывающую подсказку. Функция вызывается для каждого дня в календаре до того как он будет отображён.

Установить функцию для обработки события beforeShowDay как инициализирующую опцию.

$('.selector').datepicker({
   beforeShowDay: function(date) { ... }
});

Событие: onChangeMonthYear

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

Установить функцию для обработки события onChangeMonthYear как инициализирующую опцию.

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

Событие: onClose

Функция позволяет определить вам собственное событие, возникающее когда календарь закрыт, независимо от того вобрана или нет дата. Функция получает выбранную дату как текст, и образец даты календаря как параметр. this имеет отношение к связанному полю input.

Установить функцию для обработки события onClose как инициализирующую опцию.

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

Событие: onSelect

Функция позволяет определить вам собственное событие, возникающее, когда происходит выбор даты. Функция принимает два параметра – дату в форме текста и образец даты календаря как параметр. this имеет отношение к связанному полю input.

Установить функцию для обработки события nSelect как инициализирующую опцию.

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

Методы

Метод: destroy

.datepicker( 'disable' )

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

Метод: disable

.accordion('disable')

Отключить календарь.

Метод: enable

.datepicker( 'enable' )

Включить календарь.

Метод: option

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

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

Метод: dialog

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

Открыть календарь в "диалоговом" окне. dateText: исходная дата для календаря. onSelect: функция callback запускающаяся когда дата выбрана. функция получает дату как текст и образец календаря как параметр. settings: новые настройки календаря. pos: Позиция диалогового окна top/left как [x, y] или событие MouseEvent, которое содержит координаты. Если нет значения, диалогове окно будет расположено по центру экрана.

Метод: isDisabled

.datepicker( 'isDisabled' )

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

Метод: hide

.datepicker( 'hide' , [speed] )

Закрыть ранее открытый календарь. speed: скорость с которой происходит закрытие календаря.

Метод: show

.datepicker( 'show' )

Вызывать ранее прикреплённый календарь.

Метод: getDate

.datepicker( 'getDate' )

Вернуть текущую дату календаря.

Метод: setDate

datepicker( 'setDate' , date )

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

Тема:

Используемая тема jQuery UI

Плагин jQuery UI Datepicker использует jQuery UI CSS структуру для придания стиля, включающую цвета и фоновые текстуры. Мы рекомендуем использовать инструмент ThemeRoller для создания и загрузки тем, которые легко встраиваются и поддерживаются. Если нуждается более гдубокий уровень настройки, сущетсвует особый виджет классов ссылающийся на ui.draggable.css лист стилей, который может быть модифицирован. Данный класс подчеркнут жирным ниже.

Образец разметки jQuery UI CSS струтктуры классов

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

Примечание: Данный образец разметки создан посредством плагина datepicker, это не разметка для того чтобы создать календарь. Для этого достаточно следующей разметки <input type="text" /> или <div></div>.

Примеры

Добавлено1.2

Версия jQuery 1.3.2 Документ создан 2009-02-21T00:32:39Z

Руководство по jQuery!

Плагины jQuery UI

Эффекты