Попался мне очень удобный и функциональный 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 контейнер:
Подключить скрипт для быстрой установки даты в поле не сложно и JS скриптов для этого в сети хватает. А в этой статье я выложу готовый код для WordPress.
Задача такая: у нас есть input поле и нам нужно сделать так, чтобы при установке курсора в это поле появлялся календарь, где бы можно было выбрать дату (день месяца) и поле автоматически заполнилось выбранным числом в нужном формате. Календарь должен быть с русской локализацией. Такая задача встречается часто и я подумал будет удобно иметь под рукой готовый код.
- Страница подбора css тем под jQuery UI - http://jqueryui.com/themeroller/ - здесь вы можете выбрать готовую тему jQuery UI или во вкладке Roll Your Own - настроить дефолтную тему под себя: цвета, фоны, закругление углов и т.д.;
Главная страница jQuery плагина Datepicker: https://jqueryui.com/datepicker/ - здесь вы найдете разные пример использования Datepicker;
В 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 и его виджету выбора дат.
Часто бывает, что на странице необходимо сделать выбор периода дат (а иногда даже нескольких разрозненных дат). Но Datepicker от jQuery UI позволяет выбирать только одну дату в пределах одного календаря.
Поэтому частым решением на практике является создание двух полей ввода с контролем по типу «от и до». Также можно найти много «костыльных» способов для решения данной задачи - это нам не подходит.
Итак, наша цель - решить задачу самыми минимальными усилиями используя только jQuery UI Datepicker .
Для решения этой задачи существует небольшое расширение для jQuery UI Datepicker, которое увеличивает его стандартные возможности без подключения сторонних виджетов, плагинов и стилей.
Для тех, кому не принципиально использовать стандартный виджет $.datepicker(), я приготовил пару ссылок, надеюсь вы также сочтете их полезными:
Статья о на хабре (выбор нескольких дат, выбор периода).
- Прекрасный плагин DateTimePicker от XDSoft (выбор периода дат, возможность выбора времени и другие разнообразные фичи), стоит посмотреть
Есть и другие решения, но я не буду на них останавливаться. Если у вас есть свои любимые календари выбора дат, буду рад прочитать о них в комментариях к статье.
Описание расширения Расширение представляет собой файл, который расширяет возможности виджета $.datepicker(), используя его объектную модель. Не влияет на работоспособность 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{} /* последняя дата месяца */
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) – извлекает дату из строковой переменной на оснвое определенного формата.
$(document).ready(function(){ $(function() { $("#datepicker").datepicker(); }); });
Date:
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.
Параметры
Опция: altField
Опция определяет jQuery селектор поля, которое обновляется при выборе даты из календаря. Используйте указанную ниже опцию altFormat, для изменения формата даты внутри поля. Остаётся пустым для не выбранного поля.
"По умолчанию установлено" "
Установить календарь с опцией altField.
$(".selector").datepicker({ altField: "#actualDate" });
Получить или установить опцию altField после запуска.
//получить опцию
var altField = $(".selector").datepicker("option", "altField");
//установить опцию
$(".selector").datepicker("option", "altField", "#actualDate");
Опция: altFormat
Опция dateFormat предназначена для опции altField. Данная опция позволяет показывать пользователю дату одного формата, в то время как дата другого формата отправляется позади изображения. Полный лист форматов дат указан в функции formatDate.
"По умолчанию установлено" "
Установить календарь с опцией 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
"По умолчанию установлено" 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
"По умолчанию установлено" Today
Установить календарь с опцией currentText.
$(".selector").datepicker({ currentText: "Now" });
Получить или установить опцию currentText после запуска.
//получить опцию
var currentText = $(".selector").datepicker("option", "currentText");
//установить опцию
$(".selector").datepicker("option", "currentText", "Now");
Опция: dateFormat
Разобранный и отображаемый формат дат. Данный атрибут одни из регионализированных атрибутов. Полный лист доступных форматов указан в функции formatDate..
"По умолчанию установлено" 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
"По умолчанию установлено" normal
Опция: 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
"По умолчанию установлено" 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
Опция определяет скорость, с которой появляется календарь, это может быть время в миллисекундах, либо строка, представленная одним из трех выражений ("slow", "normal", "fast"), или пусчтые кавычки " " для немедленного появления.
"По умолчанию установлено" 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
"По умолчанию установлено" Next
Установить календарь с опцией nextText.
$(".selector").datepicker({ nextText: "Later" });
Получить или установить опцию nextText:после запуска.
//получить опцию
var nextText = $(".selector").datepicker("option", "nextText");
//установить опцию
$(".selector").datepicker("option", "nextText", "Later");
Опция: numberOfMonths
Опция позволяет установить количество отображаемых месяцев за один раз, то есть одновременно. Значение может начинаться с целого числа или может быть массивом, состоящим из двух элементов, определяющих количество отображаемых строк и столбцов, в которые умещается календарь.
"По умолчанию установлено" 1
Установить календарь с опцией numberOfMonths.
$(".selector").datepicker({ numberOfMonths: });
//получить опцию
var numberOfMonths = $(".selector").datepicker("option", "numberOfMonths");
//установить опцию
$(".selector").datepicker("option", "numberOfMonths", );
Опция: prevText
"По умолчанию установлено" 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
Опция: 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 относительно верхнего левого угла.
"По умолчанию установлено" 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);
