AJAX загрузка
home

Пример использования

Пример 

$(document).ready(function() {

$("#tabs").tabs();
//Код первой вкладки (стандартное использование)
   $("#datepicker1").datepicker();
   $("#datepicker2").datepicker($.datepicker.regional['']);
//Код второй вкладки (иконка подсказка)
   $("#datepicker3").datepicker({buttonImage:'datePicker.gif', showOn:'button', buttonImageOnly:true});
//Код третьей вкладки (ограничение диапазона дат)
   $("#datepicker4").datepicker({minDate:-6,maxDate:+4,buttonImage:'datePicker.gif', showOn:'both', buttonImageOnly:true});
//Код четвертой вкладки (редактирование формата)
   $("#datepicker5").datepicker({dateFormat:'yy-mm-dd'});
   $("#datepicker6").datepicker({dateFormat:'yy/mm/dd'});
   $("#datepicker7").datepicker({dateFormat:'DD MM dd, yy'});
//Код пятой вкладки (календарь)
   $("#datepicker8").datepicker(); 
//Код шестой вкладки (анимация/панель с кнопками)
   $("#datepicker9").datepicker({showAnim:'slide',showButtonPanel:true}); 

});
Попробовать в редакторе

Определение и использование

С помощью метода datepicker Вы можете превратить выбранный элемент в виджет datepicker.

Виджет datepicker позволяет пользователям удобно выбирать необходимую дату. Данный виджет может также использоваться для создания календаря.

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

Синтаксис

$(селектор).datepicker(опции,события)

селектор выбирает элемент, который будет превращен в виджет.

опции настраивают дополнительные аспекты поведения виджета.

события события связанные с данным виджетом.

Опции

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

Значение по умолчанию: ''.

Пример использования: .datepicker({altField:'#date2'})
altFormat Устанавливает альтернативный формат даты для поля выбранного с помощью опции altField.

Значение по умолчанию: ''.

Пример использования: .datepicker({altFormat:'yy-mm-dd'})
buttonImage Позволяет задать произвольную картинку рядом с полем выбора даты.

Значение по умолчанию: ''.

Пример использования: .datepicker({buttonImage:'datepicker.gif'})
buttonImageOnly При значение false картинка заданная с помощью опции buttonImage будет отображена внутри кнопки. При значении true будет отображена только картинка.

Значение по умолчанию: false.

Пример использования: .datepicker({buttonImageOnly:true})
buttonText Позволяет задать текст, который будет отображаться при наведении указателя мыши на картинку заданную с помощью опции buttonImage.

Значение по умолчанию: '...'.

Пример использования: .datepicker({buttonText:'Нажмите на меня, чтобы выбрать дату'})
changeMonth Позволяет выбирать желаемый месяц из выпадающего списка отображающегося в виджете.

Значение по умолчанию: false.

Пример использования: .datepicker({changeMonth:true})
changeYear Позволяет выбирать желаемый год из выпадающего списка отображающегося в виджете.

Значение по умолчанию: false.

Пример использования: .datepicker({changeYear:true})
constraintInput Ограничивает ввод (значение true) позволяя вводить в поле ввода только те символы, которые соответствуют текущему формату данных заданному с помощью опции dateFormat.

Значение по умолчанию: false.

Пример использования: .datepicker({constraintInput:true})
dateFormat Задает формат данных, которые будут вставлены в поле ввода после выбора даты.
Формат может состоять из комбинации следующих символов:
d - день месяца (без нуля в начале)
dd - день месяца (два числа)
o - день года (без нуля в начале)
oo - день года (три числа)
D - сокращенное название дня недели
DD - полное название дня недели
m - месяц (без нуля в начале)
mm - месяц (два числа)
M - сокращенное название месяца
MM - полное название месяца
y - год (два числа)
yy - год (четыре числа)

Значение по умолчанию: mm/dd/yy.

Пример использования: .datepicker({dateFormat:'yy-mm-dd'})
defaultDate Позволяет задать дату, которая будет выбрана по умолчанию. Дата выбирается путем задания смещения количества дней от текущего (например +5 или -4), с помощью объекта Date, или как строка в текущем формате данных (заданном с помощью опции dateFormat).

Значение по умолчанию: null.

Пример использования: .datepicker({defaultDate:+5})
maxDate Позволяет задать максимально возможную для выбора дату. Дата выбирается путем задания смещения количества дней от текущего (например +5 или -4), с помощью объекта Date, или как строка в текущем формате данных (заданном с помощью опции dateFormat).

Значение по умолчанию: null.

Пример использования: .datepicker({maxDate:+7})
minDate Позволяет задать минимально возможную для выбора дату. Дата выбирается путем указания смещения количества дней от текущего (например +5 или -4), с помощью объекта Date, или как строка в текущем формате данных (заданном с помощью опции dateFormat).

Значение по умолчанию: null.

Пример использования: .datepicker({minDate:-3})
numberOfMonths Позволяет задать количество месяцев отображаемых одновременно. Значение может быть или обычным целым или многомерным массивом указывающим количество строк и столбцов для отображения.

Значение по умолчанию: null.

Пример использования: .datepicker({numberOfMonth:[2,3]})
showAnim Задает анимацию, с помощью которой виджет будет появляться/скрываться.

Значение по умолчанию: 'show'.

Пример использования: .datepicker({showAnim:'slide'})
showButtonPanel Позволяет задать отображать (true) или нет (false) панель с кнопками.

Значение по умолчанию: false.

Пример использования: .datepicker({showButtonPanel:true})
showOn Позволяет задать будет ли виджет появляться только после щелчка на поле ввода (значение focus), будет ли виджет появляться только после щелчка на картинку заданную с помощью опции buttonImage (значение button) или будет появляться в обоих вышеперечисленных случаях (значение both).

Значение по умолчанию: 'focus'.

Пример использования: .datepicker({showOn:'button'})

События

Синтаксис

$(селектор).datepicker({событие:function(){Код обработчика}})

Обратите внимание: например для того, чтобы привязать к виджету с id='test' обработчик события create, который выводит сообщение "привет" необходимо будет написать следующий код: $("#test").datepicker({create:function(){alert("Привет")}}).

События Описание
create Определяет функцию, код которой будет выполнен, когда виджет будет создан.
beforeShow Определяет функцию, код которой будет выполнен перед тем как виджет будет отображен.
onChangeMonthYear Определяет функцию, код которой будет выполнен при смене месяца или года.
onClose Определяет функцию, код которой будет выполнен при закрытии виджета.
onSelect Определяет функцию, код которой будет выполнен при выборе даты.