Помощь по Теле2, тарифы, вопросы

Сразу оговорюсь, цикл этих статей не рассчитан на матерых профи, она является всего лишь толчком к развитию, этаким небольшим экскурсом по возможностям для новичков, для тех кто не имеет понятия о 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 и его виджету выбора дат.

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

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

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

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

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

Статья о PickMeUp на хабре (выбор нескольких дат, выбор периода).
- Прекрасный плагин 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{} /* последняя дата месяца */

Попался мне очень удобный и функциональный jQuery календарик!

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

Подключается он как всегда очень просто!

В строке 1, наш любимый jQuery, строка 2 - настройки календаря, строка 3 - сам календарик, ну и его стиль - строка 4.

Теперь рассмотрю несколько способов вызова.

1. Обычный календарь на jQuery

$(function() { $("#inputDate1").datePicker(); });

поле ввода:

2. Календарь с заданным диапазоном

Календарь с активными датами от 01-01-2000 по 01-01-2012, вызов по нажатии на иконку календарика.

$(function() { $("#inputDate2").datePicker({ startDate: "01-01-2000", endDate: "01-01-2012" }); });

поле ввода:

3. Вызов по нажатию на поле ввода

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

$(function() { $("#inputDate3").datePicker({ createButton:false, clickInput:true }); });

поле ввода:

4. Календарь на год

Календарь с активной датой на год с сегодняшнего дня, вызов по нажатию на поле ввода.

$(function() { $("#inputDate4").datePicker({ createButton:false, clickInput:true, endDate: (new Date()).addDays(365).asString() }); });

поле ввода:

5. Календарь с активными рабочими днями

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

$(function() { $("#inputDate5").datePicker({ clickInput:true, endDate: (new Date()).addDays(365).asString(), renderCallback:function($td, thisDate, month, year) { if (thisDate.isWeekend()) { $td.addClass("weekend"); $td.addClass("disabled"); } } }); });

поле ввода:

6. Календарь с кнопкой «Закрыть»

Календарь с кнопкой «Закрыть», вызов по нажатии на иконку календарика. После выбора даты - не закрывается. По нажатию на поле ввода происходит обработка функции «click»

$(function() { $("#inputDate6").datePicker({ displayClose:true, closeOnSelect:false }) .bind("click", function() { alert("сработал click!"); }); });

поле ввода:

7. Начало за 5 дней от сегодня

Календарь, активные дни которого начинаются за 5 дней от сегодняшней даты, вызов по нажатию на поле ввода. После выбора даты происходит обработка функции «dateSelected», которая вызывает сообщение с выбранной датой и присваивает ее предыдущему полю. После закрытия календаря происходит обработка функции «dpClosed»

$(function() { $("#inputDate7") .datePicker({ createButton:false, startDate: (new Date()).addDays(-5).asString(), clickInput:true }) .bind("dpClosed", function(e, selectedDate) { alert("сработал dpClosed"); }) .bind("dateSelected", function(e, selectedDate, $td) { alert("сработал dateSelected, " + selectedDate.asString()); $("#inputDate7").val(selectedDate.asString()); $("#inputDate6").dpSetSelected(selectedDate.addDays(0).asString()); }); });

поле ввода:

8. Календарь в DIV контейнере

Календарь в DIV контейнере, при изменении даты обработка функции «dateSelected».

$(function() { $("#inputDate8") .datePicker({inline:true}) .bind("dateSelected",function(e, selectedDate, $td) { alert(selectedDate.asString()); }); });

DIV контейнер:

Подключите стили и скрипты из папки /dist :

Календарь автоматически проинициализируется на элементах с классом .datepicker-here , при этом опции можно передать через data атрибуты.

Ручная инициализация // Инициализация $("#my-element").datepicker() // Доступ к экземпляру объекта $("#my-element").data("datepicker") ПримерыИнициализация с опциями по умолчаниюВыбор нескольких дат

Передайте параметр {multipleDates: true} для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число {multipleDates: 3} .

Постоянно видимый календарь

Проинициализируйте плагин на элементе, который не является текстовым полем, например на … , либо передайте параметр {inline: true} .

Выбор месяцаМинимальная и максимальные даты

Чтобы ограничить выбор даты, используйте minDate и maxDate , которым нужно передать объект даты.

$("#minMaxExample").datepicker({ // Можно выбрать тольо даты, идущие за сегодняшним днем, включая сегодня minDate: new Date() })

Диапозон дат

Используйте парамтер {range: true} для выбора диапазона. В качестве разделителя дат будет использован multipleDatesSeparator

Для того, чтобы иметь возомжность выбрать одну и ту же дату, необходимо установить {toggleSelected: false} .

Неактивные дни недели

Для того, чтобы сделать невозмножным выбрать конкретные дни недели, можно воспользоваться методом onRenderCell .

// Сделаем неактивными воскресенье и субботу var disabledDays = ; $("#disabled-days").datepicker({ onRenderCell: function (date, cellType) { if (cellType == "day") { var day = date.getDay(), isDisabled = disabledDays.indexOf(day) != -1; return { disabled: isDisabled } } } })

Кастомное содержимое ячеек

Air Datepicker позволяет менять содержимое ячеек как угодно. Для этого можно также воспользоваться методом onRenderCell . Давайте добавим вспомогательные элементы к нескольким датам и покажем случайный текст при выборе этих дат:

Var eventDates = , $picker = $("#custom-cells"), $content = $("#custom-cells-events"), sentences = [ … ]; $picker.datepicker({ onRenderCell: function (date, cellType) { var currentDate = date.getDate(); // Добавляем вспомогательный элемент, если число содержится в `eventDates` if (cellType == "day" && eventDates.indexOf(currentDate) != -1) { return { html: currentDate + "" } } }, onSelect: function onSelect(fd, date) { var title = "", content = "" // Если выбрана дата с событием, то отображаем его if (date && eventDates.indexOf(date.getDate()) != -1) { title = fd; content = sentences; } $("strong", $content).html(title) $("p", $content).html(content) } }) // Сразу выберем какую-ниудь дату из `eventDates` var currentDate = currentDate = new Date(); $picker.data("datepicker").selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))

Появление и скрытие календаря

Для добавления каких-либо действий с начала анимации или по ее окончанию, используйте опции onShow и onHide

$("#example-show-hide-callbacks").datepicker({ onShow: function(dp, animationCompleted){ if (!animationCompleted) { log("start showing") } else { log("finished showing") } }, onHide: function(dp, animationCompleted){ if (!animationCompleted) { log("start hiding") } else { log("finished hiding") } } })

Выбор времени

Для выбора времени используйте опцию {timepicker: true} - она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.

По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметром startDate .

Подробнее о параметрах выбора времени можно почитать в .

Формат времени

Формат времени задается в объекте локализации, либо в парамтре timeFormat . По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в timeFormat нужно добавить символ aa или AA . После чего в виджете появятся обозочения "AM" или "PM", в зависимости от выбранного периода времени.

Действия со временем

Для задания максимально/минимально возможных значений часов или минут используйте параметры maxHours , minHours , maxMinutes , minMinutes . Также время можно указывать в парамтерах minDate и maxDate

Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.

// Зададим стартовую дату var start = new Date(), prevDay, startHours = 9; // 09:00 start.setHours(9); start.setMinutes(0); // Если сегодня суббота или воскресенье - 10:00 if (.indexOf(start.getDay()) != -1) { start.setHours(10); startHours = 10 } $("#timepicker-actions-exmpl").datepicker({ timepicker: true, startDate: start, minHours: startHours, maxHours: 18, onSelect: function(fd, d, picker) { // Ничего не делаем если выделение было снято if (!d) return; var day = d.getDay(); // Обновляем состояние календаря только если была изменена дата if (prevDay != undefined && prevDay == day) return; prevDay = day; // Если выбранный день суббота или воскресенье, то устанавливаем // часы для выходных, в противном случае восстанавливаем начальные значения if (day == 6 || day == 0) { picker.update({ minHours: 10, maxHours: 16 }) } else { picker.update({ minHours: 9, maxHours: 18 }) } } })

Локализация

Вы можете добавить свою локализацию в объект $.fn.datepicker.language["my-lang"] и при вызове календаря передать название языка в параметр language

$.fn.datepicker.language["my-lang"] = {...} $(".my-datepicker").datepicker({ language: "my-lang" })

Также объект локализации можно передавать непосредственно в language

$(".my-datepicker").datepicker({ language: { days: [...] ... } })

Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию (русский язык).

Пример объекта локализации $.fn.datepicker.language["ru"] = { days: ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"], daysShort: ["Вос","Пон","Вто","Сре","Чет","Пят","Суб"], daysMin: ["Вс","Пн","Вт","Ср","Чт","Пт","Сб"], months: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"], monthsShort: ["Янв","Фев","Мар","Апр","Май","Июн","Июл","Авг","Сен","Окт","Ноя","Дек"], today: "Сегодня", clear: "Очистить", dateFormat: "dd.mm.yyyy", timeFormat: "hh:ii", firstDay: 1 }; Опцииclasses

Тип string

Значение по умолчанию ""

Дополнительные классы для календаря.

inline

Тип boolean

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

Если true, то календарь будет виден постоянно.

language

Тип string|object

Значение по умолчанию "ru"

Язык календаря. Если передается строка, то поиск языка будет осуществляться в объекте Datepicker.language Если передан объект, то данные будут браться из него.

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

startDate

Тип Date

Значение по умолчанию new Date()

Дата, которая будет отображаться при инициализации календаря.

firstDay

Тип number

Значение по умолчанию ""

Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 - воскресенье и 6 - суббота. По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.

weekends

Тип array

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

dateFormat

Тип string

Значение по умолчанию ""

Желаемый формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.

• @ - время в миллесекундах
• d - дата
• dd - дата с лидирующем нулем
• D - сокращенное наименование дня
• DD - полное наименование дня
• m - номер мясяца
• mm - номер месяца с лидирующем нулем
• M - сокращенное наименовение месяца
• MM - полное наименовение месяца
• yy - сокращенный номер года
• yyyy - полный номер года
• yyyy1 - первый год декады, в которую входит текущий год
• yyyy2 - последний год декады, в которую входит текущий год

altField

Тип string|jQuery

Значение по умолчанию ""

Альтернативное поле воода в значение которого будут попадать выбранные даты с форматом altFieldDateFormat .

altFieldDateFormat

Тип string

Значение по умолчанию "@"

Формат даты для альтернативного поля.

toggleSelected

Тип boolean

Значение по умолчанию true

Если true, то клик на выделенной дате снимет выделение.

keyboardNav

Тип boolean

Значение по умолчанию true

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

Сочетания клавиш:

• Ctrl + → | - переход на месяц вперед
• Ctrl + ← | ↓ - переход на месяц назад
• Shift + → | - переход на год вперед
• Shift + ← | ↓ - переход на год назад
• Alt + → | - переход на 10 лет вперед
• Alt + ← | ↓ - переход на 10 лет назад
• Ctrl + Shift + - переход на следующий вид
• Esc - закрывает календарь

position

Тип string

Значение по умолчанию "bottom left"

Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования, воторым - положение на этой оси. Например {position: "right top"} - утсановит позицию клаендаря справа вверху от текстового поля.

offset

Тип number

Значение по умолчанию 12

Отступ от основной оси позиционирования.

view

Тип string

Значение по умолчанию "days"

Начальный вид календаря. Возможноые значения:

• days - отображение дней месяца
• months - отображение месяцев одного года
• years - отображение годов одной декады

minView

Тип string

Значение по умолчанию "days"

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

showOtherMonths

Тип boolean

Значение по умолчанию true

Если true, то будут отображаться дни других месяцев.

selectOtherMonths

Тип boolean

Значение по умолчанию true

Если true, то можно будет выбрать дни из других месяцев.

moveToOtherMonthsOnSelect

Тип boolean

Значение по умолчанию true

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

showOtherYears

Тип boolean

Значение по умолчанию true

Если true, то при отображении декады, будут показаны годы из других декад.

selectOtherYears

Тип boolean

Значение по умолчанию true

Если true, то можно будет выбрать года из других декад

moveToOtherYearsOnSelect

Тип boolean

Значение по умолчанию true

Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде.

minDate

Тип Date

Значение по умолчанию ""

Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать.

maxDate

Тип Date

Значение по умолчанию ""

Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать.

disableNavWhenOutOfRange

Тип boolean

Значение по умолчанию true

Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации "вперед", "назад"

multipleDates

Тип boolean|number

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

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

multipleDatesSeparator

Тип string

Значение по умолчанию ","

Разделитель дат, который будет использован при объеденения нескольких дат в одну строку.

range

Тип boolean

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

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

todayButton

Тип boolean|Date

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

Если true, то будет отображена кнопка "Сегодня". Если передать объект даты, то при клике по кнопке будет осуществлен переход и последующий выбор этой даты.

// Выбор сегодняшнего дня $(".datepicker").datepicker({ todayButton: new Date() })

clearButton

Тип boolean

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

Если true, то будет отображена кнопка "Очистить".

showEvent

Тип string

Значение по умолчанию "focus"

Тип события, по наступлению которого будет показан календарь.

autoClose

Тип boolean

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

Если true, то при активации даты, календарь закроется.

prevHtml

Тип string

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

Контент кнопки "предыдущий месяц|год|декада".

nextHtml

Тип string

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

Контент кнопки "следующий месяц|год|декада".

navTitles

Тип object

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

NavTitles = { days: "MM, yyyy", months: "yyyy", years: "yyyy1 - yyyy2" };

Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозначения что и в dateFormat . Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги.

$("#my-datepicker").datepicker({ navTitles: { days: "Выберете дату заезда MM, yyyy" } })

monthsField

Тип string

Значение по умолчанию "monthsShort"

Какое поле из объекта локализации использовать в качестве названий месяцев, когда view = "months" .

timepicker

Тип boolean

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

Если true , то будет добавлена возомжность выбора времени.

dateTimeSeparator

Тип string

Значение по умолчанию " "

Разделитель между датой и временем.

timeFormat

Тип string

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

Формат времени. По умолчанию берется из локализации. Если передать значение сюда, то оно будет иметь больший приоритет. Для включения 12-ти часового режима добавьте "aa" или "AA" в параметр timeFormat , например {timeFormat: "hh:ii AA"} Возможные варианты:

• h - часы
• hh - часы, с лидирующим нулем
• i - минуты
• ii - минуты, с лидирующим нулем
• aa - период дня - "am" или "pm"
• AA - период дня заглавными буквами

minHours

Тип number

Значение по умолчанию 0

Минимальное значение часов от 0 до 23. Нельзя выбрать час меньше, чем переданное значение.

maxHours

Тип number

Значение по умолчанию 23

Максимальное значение часов от 0 до 23. Нельзя выбрать час больше, чем переданное значение.

minMinutes

Тип number

Значение по умолчанию 0

Минимальное значение часов от 0 до 59. Нельзя вустановить значение минут меньше, чем переданное значение.

maxMinutes

Тип number

Значение по умолчанию 59

Максимальное значение минут от 0 до 59. Нельзя вустановить значение минут больше, чем переданное значение.

hoursStep

Тип number

Значение по умолчанию 1

Шаг выбора часов.

minutesStep

Тип number

Значение по умолчанию 1

Шаг выбора минут.

СобытияonSelect(formattedDate, date, inst)

Тип function

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

Функция обратного вызова при выборе даты.

• formattedDate string - отформатированная дата.
• date Date|array - объект Date выбранной даты, если {multipleDates: true} , то будет передан массив таких объектов.
• inst object - экземпляр плагина.

onShow(inst, animationCompleted)

Тип function

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

Функция обратного вызова при появлении календаря.

• inst Object - экземпляр календаря.
• animationCompleted boolean

onHide(inst, animationCompleted)

Тип function

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

Функция обратного вызова при скрытии календаря.

• inst Object - экземпляр календаря.
• animationCompleted boolean - индикатор состояния анимации. если false , то анимация только началась, если true - уже закончилась.

onChangeMonth(month, year)

Тип function

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

Функция обратного вызова при изменении месяца.

• month number - номер месяца (от 0 до 12), к которому осуществлен переход.
• year number - номер года, к которому осуществлен переход.

onChangeYear(year)

Тип function

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

Функция обратного вызова при изменении года.

• year number - номер года, к которому осуществлен переход

onChangeDecade(decade)

Тип function

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

Функция обратного вызова при изменении декады.

• decade array - массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается.

onChangeView(view)

Тип function

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

Функция обратного вызова при изменении вида календаря

• view string - вид, к которому осуществлен переход (days, months, years).

onRenderCell(date, cellType)

Тип function

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

Функция обратного вызова при отрисовке ячейки календаря.

• date Date - объект даты текущей ячейки
• cellType string - тип текущей ячейки (day, month, year).

Функция должна возвращать объект, которой может состоять из трех полей:

{ html: "", // Кастомный контент ячейки classes: "", // Дополнительные классы для ячейки disabled: "" // true/false, если true, то ячейку нельзя будет выбрать }

Пример $("#my-datepicker").datepicker({ // Передаем функцию, которая добавляет 11 числу каждого месяца класс "my-class" // и делает их невозможными к выбору. onRenderCell: function(date, cellType) { if (cellType == "day" && date.getDate() == 11) { return { classes: "my-class", disabled: true } } } }) API

Досутп к экземпляру плагина осуществляется через data атрибут.

Var myDatepicker = $("#my-elem").datepicker().data("datepicker"); myDatepicker.show();

show()

Показывает календарь.

hide()

Скрывает календарь.

destroy()

Удаляет календарь.

next()

Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.

prev()

Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years.

selectDate(date)

• date Date|Array - дата в формате JavaScript, или массив дат

Выбирает переданную дату или несколько дат, если передан массив с датами. Если {multipleDates: false} и уже есть активная дата, то она будет деактивирована. Если {multipleDates: true} то будет добавлена еще одна активная дата.

removeDate(date)

• date Date - дата в формате JavaScript Date()

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

clear()

Убирает выделение со всех активных дат.

update(field[, value])

• field string|object - название поля значение которого нужно обновить.
• field string|* - новое значение параметра

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

Var datepicker = $("#my-elem").datepicker().data("datepicker"); // Обновление одного параметра datepicker.update("minDate", new Date()) // Обновление нескольких параметров datepicker.update({ position: "top right", maxDate: new Date(), todayButton: true })

view

Устанавливает новое представление для календаря.

Datepicker.view = "months";

date

Устанавливает новую отображаемую дату, нужно передать JavaScript Date()