JQuery UI API - элемент выбора даты (Datepicker Widget). JQuery календарь (datePicker) С к значению даты datepicker прибавить время

Подключить скрипт для быстрой установки даты в поле не сложно и JS скриптов для этого в сети хватает. А в этой статье я выложу готовый код для WordPress.

Задача такая: у нас есть input поле и нам нужно сделать так, чтобы при установке курсора в это поле появлялся календарь, где бы можно было выбрать дату (день месяца) и поле автоматически заполнилось выбранным числом в нужном формате. Календарь должен быть с русской локализацией. Такая задача встречается часто и я подумал будет удобно иметь под рукой готовый код.

Главная страница jQuery плагина Datepicker: https://jqueryui.com/datepicker/ - здесь вы найдете разные пример использования Datepicker;

Страница подбора css тем под jQuery UI - http://jqueryui.com/themeroller/ - здесь вы можете выбрать готовую тему jQuery UI или во вкладке Roll Your Own - настроить дефолтную тему под себя: цвета, фоны, закругление углов и т.д.;

Готовый код Datepicker для WordPress

В WordPress подключать именно jQuery Datepicker удобно, потому что он идет в комплекте с WordPress и для его подключения нужно вставить всего две строки: подключение самого скрипта и подключения стилей CSS. А дальше нужно просто запустить js функцию datepicker() на нужном .

Этот код можно вставлять в любое место php файла, не обязательно до вывода шапки get_header() , можно прямо в тело HTML документа - код будет работать:

jQuery(document).ready(function($){ "use strict"; // настройки по умолчанию. Их можно добавить в имеющийся js файл, // если datepicker будет использоваться повсеместно на проекте и предполагается запускать его с разными настройками $.datepicker.setDefaults({ closeText: "Закрыть", prevText: "", currentText: "Сегодня", monthNames: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"], monthNamesShort: ["Янв","Фев","Мар","Апр","Май","Июн","Июл","Авг","Сен","Окт","Ноя","Дек"], dayNames: ["воскресенье","понедельник","вторник","среда","четверг","пятница","суббота"], dayNamesShort: ["вск","пнд","втр","срд","чтв","птн","сбт"], dayNamesMin: ["Вс","Пн","Вт","Ср","Чт","Пт","Сб"], weekHeader: "Нед", dateFormat: "dd-mm-yy", firstDay: 1, showAnim: "slideDown", isRTL: false, showMonthAfterYear: false, yearSuffix: "" }); // Инициализация $("input, .datepicker").datepicker({ dateFormat: "dd/mm/yy" }); // можно подключить datepicker с доп. настройками так: /* $("input").datepicker({ dateFormat: "yy-mm-dd", onSelect: function(dateText, inst){ // функцию для поля где указываются еще и секунды: 000-00-00 00:00:00 - оставляет секунды var secs = inst.lastVal.match(/^.*?\s({2}:{2}:{2})$/); secs = secs ? secs : "00:00:00"; // только чч:мм:сс, оставим часы минуты и секунды как есть, если нет то будет 00:00:00 $(this).val(dateText +" "+ secs); } }); */ });

Небольшой разбор кода:

Wp_enqueue_script("jquery-ui-datepicker");

Эта строка подключает все необходимые скрипты с помощью wp_enqueue_script() , включая сам jQuery. Если jQuery уже подключен, то он подключаться не будет.

Wp_enqueue_style("jqueryui", "//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css", false, null);

Эта строка подключает css стили с помощью wp_enqueue_style() . Стили jquery ui в комплект WordPress не входят, поэтому подключаем их отдельно (с библиотеки скриптов от Google). smoothness в этой строке это название jquery ui темы и её можно заменить, например на redmond или ui-lightness - полный список тем (для вставки в строку, в названии темы нужно заменить заглавные буквы на строчные, а пробелы на дефис).

// add_action("admin_footer", "init_datepicker", 99); // для админки add_action("wp_footer", "init_datepicker", 99); // для лицевой части

Эти строки подключают функцию init_datepicker() в подвал сайта. Функция выводит скрипт, который запускает datepicker для указанных input полей. К какому полю примерить datepicker определяется в строке:

$("input, .datepicker").datepicker();

Эта строка запустит выбор даты для всех input полей в атрибуте name которых есть подстрока " date " или если input поле имеет класс datepicker . Т.е. этому коду будут соответствовать любые из таких полей.

На одном из уроков мы научились как разными способами подключать библиотеку jQuery UI . Сегодня темой урока будет виджет выбора даты - jQuery UI Datapicker .

Зачем нужен этот виджет? Чтобы предоставить пользователю при вводе даты календарь, при заполнении формы ему не надо думать в каком формате вбивать даты. В свою очередь админ ресурса получает данные в одинаковом формате.

По этому адресу: https://jqueryui.com/datepicker/ вы увидите несколько вариантов виджета datapicker , мы рассмотрим только два основных.

jQuery UI Datepicker - Display month & year menus

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

HTML -код состоит из одиночного тега input с идентификатором "datapicker" обёрнутого в абзац - тег p . Вместо абзаца, этот input можно поместить в любой блочный элемент сайта.

Date:

Код jQuery необходимо скопировать (view source) и вставить на свой сайт, как в примере. После загрузки DOM дерева, будем получать элемент по идентификатору #datapicker в текстовое поле и вызывать метод .datepicker . Теперь надо в метод передать объект, в котором описать дополнительные настройки: changeMonth: true, changeYear: true . Теперь появилась возможность через выпадающий список выбрать месяц и год, это немного удобнее, чем делать аналогичный выбор через календарь.

$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
});

jQuery UI Datepicker - Select a Date Range

Виджет Datapicker с выбором диапазона даты Date Range подходит сайтам с системой бронирования. Пользователь указывает в первом календаре начальную дату, а во втором календаре конечную. Создадим два текстовых поля input c идентификатором "from" и "to" и два label привязанные к своим текстовым полям.

From

to

Получаем элемент с идентификатором #from - первое текстовое поле, в нем вызываем метод datapicker .

$(function() {
var dateFormat = "mm/dd/yy",
from = $("#from")
.datepicker({

Зададим дату по умолчанию плюс одну неделю.

DefaultDate: "+1w",

Возможность менять месяц с помощью выпадающего списка.

ChangeMonth: true,
numberOfMonths: 3 })

Когда произойдет событие on , то есть пользователь что-нибудь выберет из выпадающего списка, то при смене выбранной даты находим второй datepicker и устанавливаем минимальную дату, равную выбранной.

On("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to").datepicker

При смене выбранной даты находим первый datepicker и устанавливаем максимальную дату, равную выбранной.

On("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});

Весь код и визуальные примеры всех вариантов с разными параметрами виджета jQuery Datapicker , есть на сайте jqueryui.com .

jQuery UI Datepicker - Localize calendar

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

Скачиваем нужный языковой файл на Github

Подключаем нужный языковой модуль в тег head .

Создаем текстовое поле для календаря и выпадающий список с id "locale" c перечислением нужных языков.

Date:

English
Russian (Русский)

После загрузки DOM дерева, ищем объект datapicker . Меняем настройки для всех datepicker .

$(function() {
$("#datepicker").datepicker($.datepicker.regional[ "ru" ]);

Смена локализации для "datepicker" .

$("#locale").on("change", function() {

Смена локализации при выборе нового значения в выпадающем списке.

$("#datepicker").datepicker("option",
$.datepicker.regional[ $(this).val() ]);

Всем привет, дорогие читатели Хабра!

Статья посвящена jQuery UI и его виджету выбора дат.

Часто бывает, что на странице необходимо сделать выбор периода дат (а иногда даже нескольких разрозненных дат). Но Datepicker от jQuery UI позволяет выбирать только одну дату в пределах одного календаря.

Поэтому частым решением на практике является создание двух полей ввода с контролем по типу «от и до». Также можно найти много «костыльных» способов для решения данной задачи - это нам не подходит.

Итак, наша цель - решить задачу самыми минимальными усилиями используя только jQuery UI Datepicker .

Для решения этой задачи существует небольшое расширение для jQuery UI Datepicker, которое увеличивает его стандартные возможности без подключения сторонних виджетов, плагинов и стилей.

Для тех, кому не принципиально использовать стандартный виджет $.datepicker(), я приготовил пару ссылок, надеюсь вы также сочтете их полезными:

Статья о на хабре (выбор нескольких дат, выбор периода).
- Прекрасный плагин DateTimePicker от XDSoft (выбор периода дат, возможность выбора времени и другие разнообразные фичи), стоит посмотреть

Есть и другие решения, но я не буду на них останавливаться. Если у вас есть свои любимые календари выбора дат, буду рад прочитать о них в комментариях к статье.

Описание расширения Расширение представляет собой файл, который расширяет возможности виджета $.datepicker(), используя его объектную модель. Не влияет на работоспособность Datepicker в дефолтном режиме. Поэтому не стоит беспокоиться о том, что ваш (уже написанный) код перестанет работать или начнет функционировать иначе.

Расширение позволяет изменить поведение выбора даты в двух режимах:

Выбор периода (две даты: начало и окончание периода)
Выбор нескольких дат (массив дат)

Так как расширение планируется использовать для выбора нескольких дат, то рекомендую его применять к элементу DIV (а не INPUT), а при выборе дат заполнять соответствующие значения в поля ввода (см. примеры в конце статьи).Новые возможности виджета Новые параметры $.datepicker()

$("#date_range").datepicker({ range: "period", // возможные значения: period, multiple range_multiple_max: 3, // максимальное число выбранных дат в режиме "Несколько дат" onSelect: function(dateText, inst, extensionRange) { // extensionRange - добавлен возвращаемый аргумент, содержит в себе объект расширения } }); // Метод "setDate" теперь может принимать массив: 2 элемента при range="period" или более элементов при range="multiple" // $("#date_range").datepicker("setDate", ["+2d", "+1w"]); // рекомендуется использовать событие "onSelect" для изменение значений полей формы (или переменых вашего скрипта) // однако для более гибкого управления, можно получить объект расширения и работать с информацией о выбранных датах var extensionRange = $("#date_range").datepicker("widget").data("datepickerExtensionRange"); console.log(extensionRange.datesText); // массив дат (дата в формате, использующимся в datepicker) console.log(extensionRange.startDateText); // начало периода (дата в формате, использующимся в datepicker) console.log(extensionRange.endDateText); // окончание периода (дата в формате, использующимся в datepicker) console.log(extensionRange.dates); // массив дат (объект даты) console.log(extensionRange.startDate); // начало периода (объект даты) console.log(extensionRange.endDate); // окончание периода (объект даты)
Новые стили у ячеек календаря

Selected{} /* выбранныя дата */ .selected-start{} /* первая дата периода */ .selected-end{} /* последняя дата периода */ .first-of-month{} /* первая дата месяца */ .last-of-month{} /* последняя дата месяца */

Сразу оговорюсь, цикл этих статей не рассчитан на матерых профи, она является всего лишь толчком к развитию, этаким небольшим экскурсом по возможностям для новичков, для тех кто не имеет понятия о UI и jQuery в целом.
Ну, поехали!

Скачиваем: http://jqueryui.com/download
Подключаем шаманский фреймворк, локализацию для календаря и таблицу стилей:

Итак, приготовления закончены.

Чтобы создать календарь нужна всего лишь одна строка html:

Либо если Вы хотите встроить календарь в сайт как элемент страницы:

И пара строк js:

$(function(){ $.datepicker.setDefaults($.extend($.datepicker.regional["ru"])); $("#datepicker").datepicker(); });

И так мы получили вполне работающий календарь на русском, но вдруг мы делаем сайт на английском или украинском? Чтобы изменить ситуацию в нашу пользу надо всего лишь изменить один параметр, причем делать это можно динамически:

$("#datepicker").datepicker("option", $.datepicker.regional["uk"]));

Стандартного функционала «по умолчанию» не всегда хватает на выполнение тех или иных задач. Поэтому чуть-чуть подредактируем настройки:

$("#datepicker").datepicker({ minDate: "-30", //Минимальная дата которую можно выбрать, т.е. -30 дней от "сейчас" maxDate: "+1m +1w +3d" //Максимальная дата которую можно выбрать, т.е. + 1 месяц, 1 неделя, и 3 дня от "сейчас" });

события $.datepicker.setDefaults($.extend($.datepicker.regional["ru"])); $("#datepicker").datepicker({ beforeShow: function(input) { $(input).css("background-color","#ff9"); }, onSelect: function(dateText, inst) { $(this).css("background-color",""); alert("Выбрано: " + dateText + "nnid: " + inst.id + "nselectedDay: " + inst.selectedDay + "nselectedMonth: " + inst.selectedMonth + "nselectedYear: " + inst.selectedYear); }, onClose: function(dateText, inst) { $(this).css("background-color",""); } });

В листинге выше у нас получилось целых три опции, в которых есть коллбэки.
beforeShow — это та функция, которая будет вызвана перед отображением календаря.
С помощью css-опций она установит инпуту желтый фон.
В onSelect определена функция, которая будет вызвана при выборе какой либо даты, она выведет выбранную дату в alert и передаст пустое значение css-опции, что вернет инпуту прежний вид.
onClose функция которая сработает при закрытии календаря — т.е.вернет инпуту белый фон.

методы Открыть в окне $.datepicker.setDefaults({changeYear: true}, $.extend($.datepicker.regional["ru"])); $("#datepicker_open").click(function(){ $("#datepicker").datepicker("dialog", "23.04.2009", function(){ alert("Событие onSelect"); }, { showButtonPanel: true }); }); В приведенном примере я демонстрирую работу метода dialog . Мы вызываем этот метод при щелчке на ссылке. Первый аргумент – это название метода, второй аргумент textDate – дата на которой по умолчанию будет открываться календарь. В аргументе onSelect можно передать callback-функцию, которая будет вызвана при выборе конкретной даты в календаре. В аргументе settings можно передать объект с новыми настройками виджета, которые будут применены к календарю, который будет открыт в диалоговом окне.

altField — jQuery селектор для другого поля, которое должно быть обновлено, как только будет выбрана дата в Datepicker. Формат даты в этом дополнительном поле устанавливается с помощью опции altFormat.
altFormat — формат даты, который будет использоваться для опции altField. Эти настройки позволяют показывать пользователю один формат даты, тогда как для вычислений может использоваться другой формат. Полный список возможных форматов можно найти на http://api.jqueryui.com/datepicker/
appendText — текст, который будет отображаться после каждого поля выбора даты. Можно использовать, например для того, чтобы пометить поле как обязательное для заполнения.
buttonImage — адрес картинки, которая будет отображаться на кнопке, с помощью которой можно вызывать календарь. Используется совместно с опцией showOn, когда та принимает значения ‘button’ или ‘both’. Если был определен текст в опции buttonText, он становится значением атрибута alt картинки.
buttonImageOnly — если для этой опции установить значение true, то картинка, адрес которой определен в опции buttonImage, будет отображаться не на кнопке, а сама по себе.
buttonText — текст, отображающийся на кнопке, с помощью которой можно вызывать календарь. Используется совместно с опцией showOn, когда та принимает значения ‘button’ или ‘both’.
changeMonth — если в этой опции передать значение true, будет возможно выбирать месяц из выпадающего списка.
changeYear — если в этой опции передать значение true, будет возможно выбирать год из выпадающего списка.
closeText — эта опция используется совместно с showButtonPanel, если последняя имеет значение true. Значение опции closeText определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
constrainInput — по умолчанию опция имеет значение true и принуждает строго соблюдать формат даты, определенный в опциях виджета, в текстовом поле ввода. Чтобы иметь возможность не соблюдать этот формат, следует установить опцию в false.
currentText — эта опция используется совместно с showButtonPanel, если последняя имеет значение true. Значение опция currentText определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
dateFormat — определяет формат даты. Значение опции dateFormat определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его. Полный список возможных форматов можно найти на
http://docs.jquery.com/UI/Datepicker/formatDate
dayNames — массив, содержащий полные названия дней недели, начиная с воскресенья. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
dayNamesMin — массив, содержащий 2-хбуквенную аббревиатуру названия дней недели, начиная с воскресенья. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
dayNamesShort — массив, содержащий 3-хбуквенную аббревиатуру названия дней недели, начиная с воскресенья. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
defaultDate — устанавливает дату, которая будет подсвечена при первом открытии, если поле выбора даты пустое. Опция может быть определена через объект Date, либо как количество дней от текущего для (например +7 или -15), либо как строка значений, определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1m +7d’), и наконец как null для текущего дня.
duration — длительность эффекта анимации при открытии (закрытии) календаря. Может принимать значения в виде строки — ‘fast’, ‘normal’ (по умолчанию), ‘slow’ или в виде числа в миллисекундах. Если передать пустую строку, календарь будет открываться и закрываться без эффекта анимации.
firstDay — опция устанавливает первый день недели: воскресенье – 0, понедельник – 1,… Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
gotoCurrent — если установить значение опции в true, то кнопка «Сегодня» (доступная при showButtonPanel: true) будет указывать на выбранную дату взамен текущей.
hideIfNoPrevNext — если Вы ограничиваете диапазон доступных дат с помощью опций minDate и maxDate, то при достижении края диапазона, стрелки «Назад» и «Вперед» становятся неактивными. Но их можно и совсем скрывать, передав в опции hideIfNoPrevNext значение true.
isRTL — для этой опции необходимо установить значение true, если используется язык с написанием справа налево. Определяется в файле локализации, если он используется.
maxDate — устанавливает максимальную возможную для выбора дату через объект Date или как число дней от текущего (например +7) или как строку значений определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1y +1m’), или null для отсутствия ограничения.
minDate — устанавливает минимальную возможную для выбора дату через объект Date или как число дней от текущего (например -7) или как строку значений определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘-1y -1m’), или null для отсутствия ограничения.
monthNames — массив, содержащий полные названия месяцев. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
monthNamesShort — массив, содержащий 3-хбуквенную аббревиатуру названия месяцев. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
navigationAsDateFormat — по умолчанию опция имеет значение false. Если установить значение true, функция dateFormat будет примерена к значениям опций nextText, prevText и currentText с тем, чтобы отображать при навигации, например предыдущее и следующее названия месяцев.
nextText — текст, который отображается в качестве ссылки на следующий месяц. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его. Если используется файл стилей ThemeRoller’а, это значение заменяется иконкой.
numberOfMonths — эта опция определяет, сколько месяцев сразу нужно показать. Значение опции может быть просто числом или массивом, состоящим из двух элементов, которые определяют соответственно количество строк и столбцов. Например, значение отобразит календарь в две строки по три месяца.
prevText — текст, который отображается в качестве ссылки на предыдущий месяц. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его. Если используется файл стилей ThemeRoller’а, это значение заменяется иконкой.
shortYearCutoff — значение по умолчанию +10. Эта опция используется только при условии использования в dateFormat двузначной записи года и выполняет роль компенсатора для определения века. Если значение передано в виде числа, используется как есть. Если значение передано в виде строки, конвертируется в число и добавляется к текущему значению года. После того как значение определено, все данные, выступающие в качестве значения года, и меньшие и равные ему считаются годами текущего века. Значения большие – считаются годами предыдущего века.
showAnim — определяет тип анимации при открывании календаря. По умолчанию имеет значение show (при закрывании будет использован hide). Без подключения дополнительных файлов могут быть использованы эффекты ‘slideDown’ и ‘fadeIn’ (при закрывании соответственно будут использоваться эффекты ‘slideUp’ и ‘fadeOut’). Так же возможно использование любых эффектов jQuery UI Effects при условии их дополнительного подключения.
showButtonPanel — установка значения true для этой опции приведет к тому, что будет показана панель с двумя кнопками – переход к сегодняшней дате и закрытие календаря.
showCurrentAsPos — когда используется отображение сразу нескольких месяцев, число, переданное в этой опции, определяет позицию текущего месяца. По умолчанию используется значение 0, и текущий месяц отображается в верхнем левом углу.
showMonthAfterYear — по умолчанию используется значение false и в заголовке название месяца идет перед годом. При использовании значения true название месяца будет следовать за годом.
showOn — по умолчанию эта опция имеет значение ‘focus’, что заставляет календарь открываться при щелчке в поле ввода. Другие возможные значения — ‘button’ и ‘both’. Рядом с полем ввода появится кнопка. В первом случае календарь будет открываться по щелчку на кнопке, а во втором случае как по щелчку на кнопке, таки при получении фокуса полем ввода.
showOptions — если Вы используете один из эффектов jQuery UI Effects, с помощью этой опции ему можно передать дополнительные настройки. Например: showOptions: {direction: ‘up’}.
showOtherMonths — по умолчанию имеет значение false. Если использовать true, на календаре будут отображаться дни предыдущего и/или следующего месяца без возможности их выбора.
stepMonths — определяет насколько месяцев сдвигать календарь при щелчке по ссылкам Следующий и Предыдущий. По умолчанию – 1.
yearRange — управление диапазоном лет, отображаемых в выпадающем списке (при использовании опции changeYear).

beforeShow — здесь можно определить функцию, которая будет вызываться перед открытием календаря. Функция принимает в качестве аргумента объект, характеризующий текстовое поле ввода с которым работает виджет.
beforeShowDay — в этой опции можно определить пользовательскую функцию, которая будет принимать в качестве аргумента выбранную дату. Функция должна возвратить массив, где элемент с индексом – true или false показывает, возможен или нет выбор этой даты. Элемент с индексом содержит имя класса (классов) для отображения даты. Элемент с индексом (опционально) – текст всплывающей подсказки для даты. Функция будет вызываться для каждой даты в календаре в момент наведения указателя мыши.
onChangeMonthYear — здесь можно определить функцию, которая будет вызываться при смене месяца или года в календаре. Функция принимает три аргумента. Первые два аргумента – это новые значения года и месяца, третий аргумент – объект datepicker.
onClose — в этой опции определяется функция, которая будет вызвана, когда календарь был закрыт без выбора какой-либо даты.
onSelect — в этой опции определяется функция, которая будет вызвана, когда в календаре выбрана какая-либо дата.

destroy — .datepicker(‘destroy’) полностью удаляет всю функциональность виджета Datepicker. Возвращает элементы в состояние, предшествующее инициализации.
disable — .datepicker(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее использование можно с помощью метода enable.
enable — .datepicker(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена с использованием метода disable.
option — .datepicker(‘option’, optionName, ) с помощью этого метода можно получить или установить значение любой опции виджета после инициализации.
dialog — .datepicker(‘dialog’, dateText, , , ) открывает виджет Datepicker в режиме диалогового окна. В аргументе dateText передается дата, на которой должен быть открыт календарь. Остальные аргументы необязательные. В аргументе onSelect можно передать функцию, которая будет вызвана в момент выбора даты в календаре, в аргументе settings можно передать объект с новыми настройками виджета, в аргументе pos – координаты, в которых будет открыто диалоговое окно. Здесь можно использовать события мыши, чтобы определить координаты.
isDisabled — .datepicker(‘isDisabled’) метод возвращает значение true, если к виджету был применен метод disable и false в противном случае.
hide — .datepicker(‘hide’, ) скрывает ранее открытый календарь.
show — .datepicker(‘show’) открывает календарь.
getDate — .datepicker(‘getDate’) метод возвращает дату, выбранную в календаре.
setDate — .datepicker(‘setDate’, date) метод позволяет установить дату в календаре. Значением аргумента date может быть строка (например: 25.10.1917)

Вконтакте

Всем привет, дорогие читатели Хабра!

Статья посвящена jQuery UI и его виджету выбора дат.

Итак, наша цель - решить задачу самыми минимальными усилиями используя только jQuery UI Datepicker .

Статья о PickMeUp на хабре (выбор нескольких дат, выбор периода).
- Прекрасный плагин DateTimePicker от XDSoft (выбор периода дат, возможность выбора времени и другие разнообразные фичи), стоит посмотреть

Расширение позволяет изменить поведение выбора даты в двух режимах: