Добавление datepicker — виджет календаря на jQuery. JQuery Datepicker: выбор даты для поля input в WordPress Datepicker русский язык
Виджет Datepicker
Эта статья посвящена виджету Datepicker - удобному интерактивному календарю, облегчающему ввод дат. Получение от пользователей календарной информации в виде текста всегда является источником проблем, поскольку для выражения дат существует множество различных форматов. Виджет Datepicker упрощает выбор даты и ее представление в унифицированном виде, тем самым снижая вероятность появления ошибок.
Создание виджета DatepickerСуществуют два основных способа создания виджета Datepicker. Чаще всего его присоединяют к элементу input с помощью метода datepicker() . Немедленного изменения внешнего вида элемента при этом не происходит, но как только элемент получит фокус ввода (при выполнении щелчка на нем или переходе к нему от других элементов с помощью клавиши ), рядом с ним отобразится календарь, с помощью которого можно будет выбрать требуемую дату.
Календари описанного типа называются всплывающими календарями . Пример создания такого календаря приведен ниже:
jQuery UI input {width: 200px; text-align: left} $(function() { $("#datep").datepicker(); }); Дата:
На рисунке показано, что происходит при перемещении фокуса в поле ввода:
Пользователь может либо ввести дату вручную, либо выбрать ее с помощью календаря. Как только элемент input потеряет фокус или пользователь нажмет клавишу (или ), календарь исчезнет.
Локализация виджета DatepickerКак вы видите, в показанном примере календарь отображается на английском языке. В виджете jQuery UI Datepicker обеспечена довольно исчерпывающая поддержка различных стандартов форматирования дат, используемых по всему миру, которая включает 61 вариант локализации. Для получения доступа к ним необходимо импортировать в документ один вспомогательный сценарий JavaScript и указать виджету Datepicker, какой вариант локализации должен использоваться. Соответствующий пример приведен ниже:
... ... $(function() { $("#datep").datepicker($.datepicker.regional["ru"]); }); ...
Файл jquery-ui-i18n.js находится в папке development-bundle/ui/i18n архивного файла библиотеки jQuery UI, который вы должны были загрузить с сайта jqueryui.com . Скопируйте его в ту же папку, в которой находится исходный файл, и добавьте его в документ как показано в коде. Результат представлен на рисунке:
Создание встроенного календаря DatepickerВторой способ использования виджета Datepicker предполагает его встраивание в документ. Для этого следует выбрать элемент div или span с помощью jQuery и вызвать метод datepicker(). Встроенный календарь отображается все время, пока виден HTML-элемент, на основе которого он создан. Пример создания встроенного календаря приведен ниже:
jQuery UI label {margin-right:12px; } input {width: 200px; text-align: left; margin-right: 10px} #wrapper > * {float: left} $(function() { $("#inline").datepicker($.datepicker.regional["ru"]); }); Дата:
В этом примере в качестве базового HTML-элемента для создания виджета Datepicker используется элемент span. Результат представлен на рисунке:
Встроенный календарь может быть полезен, если вы не хотите работать с всплывающими объектами. Конечно, существуют приложения, в которых работа с датами ведется настолько интенсивно, что имеет смысл постоянно иметь календарь под рукой. Но в большинстве случаев целесообразно оставлять календарь скрытым до тех пор, пока в нем не возникнет необходимость.
Трудности с сокрытием и отображением встроенного виджета Datepicker обусловлены тем, что его добавление в документ влечет за собой необходимость изменения компоновки страницы, что может порождать проблемы представления. С моей точки зрения, в большинстве ситуаций гораздо удобнее использовать всплывающий виджет.
Настройка виджета DatepickerЕсли до этого вам уже приходилось иметь дело с обработкой дат, то вам хорошо известно, насколько сложно работать с этой категорией данных. Отражением этой сложности является многочисленность свойств, поддерживаемых виджетом Datepicker. Описанию групп родственных свойств, с помощью которых настраивается данный виджет, посвящено несколько следующих разделов.
Базовые настройкиНекоторые конфигурационные опции используются для настройки базовых свойств всплывающих и встроенных календарей. Эти свойства очень важны, поскольку позволяют управлять интеграцией виджета в документ. Их перечень приведен в таблице ниже:
altField | Позволяет задать дополнительное поле, которое будет обновляться при выборе даты в календаре |
buttonImageOnly | Указывает, что вместо вспомогательной кнопки, позволяющей открыть календарь, должно использоваться изображение, заданное опцией buttonImage |
buttonImage | Определяет URL-адрес изображения, используемого для вспомогательной кнопки открытия всплывающего календаря. По умолчанию не используется |
buttonText | Определяет текст, который будет отображаться на кнопке открытия всплывающего календаря. Текстом по умолчанию является многоточие (...) |
defaultDate | Позволяет установить дату, которая будет подсвечена при открытии календаря |
disabled | Указывает, должен ли виджет быть первоначально отключен. Значение по умолчанию - false |
showOn | Определяет действие, инициирующее открытие всплывающего календаря. Значение по умолчанию - focus |
Простейшая настройка одновременно является и наиболее полезной. С помощью опции defaultDate можно указать дату, которая будет автоматически подсвечиваться при открытии календаря.
Если значение опции defaultDate не установлено, вместо него используется текущая дата. (Разумеется, здесь имеется в виду дата, установленная в пользовательской системе. Установка часовых поясов, переход на летнее время, неправильно настроенная конфигурация - все это может стать причиной того, что отображаемая для пользователя дата не будет совпадать с той, на которую вы рассчитываете.)
Эта опция используется лишь в случае отсутствия атрибута value в элементе input. Если этот атрибут присутствует (независимо от того, включен ли он в документ вами или появился в результате предварительного выбора пользователем), то виджет Datepicker будет использовать его значение value.
Если необходимо, чтобы календарь открывался с другой начальной датой, можно установить ее, воспользовавшись одним из способов, описанных в таблице ниже:
null | Используется текущая дата |
Объект Date | Используется значение, представленное в виде JavaScript-объекта Date |
+дни, -дни | Используется дата, отличающаяся от текущей даты на указанное количество дней. Так, +3 означает дату, которая наступит через три дня после текущей, а -2 - дату двухдневной давности |
+1d +7w -1m +1y | Используется дата, которая отсчитывается от текущей даты и выражается посредством количества дней (d), недель (w), месяцев (m) и лет (y), определяющих величину сдвига даты вперед (+) или назад (-) по времени. Допускается смешивание положительных и отрицательных значений в одной дате. Например, комбинации значений -1d +1m, используемой совместно с датой 12 ноября 2011 года, соответствует 11 декабря 2011 |
Пример использования опции defauitDate для указания даты, которая наступит через пять лет, приведен ниже:
$(function() { $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker({ defaultDate: "+5y" }); });
Предположим, текущей дате соответствует декабрь 2013 года. Тогда, как показано на рисунке ниже, дате, определяемой значением опции defauitDate, соответствует декабрь 2018 года:
Описанный формат указания относительных дат встретится вам еще не раз. Это очень гибкий формат, обеспечивающий необходимую точность. Точно так же, как это сделано в примере, можно опустить любой интервал, который не собираетесь изменять. Например, вместо значения "+0d +0w +0m +5y" вполне можно использовать значение "+5y". В этом формате удобно то, что он допускает смешивание положительных и отрицательных значений для различных интервалов, что позволяет точно определить нужную дату.
Определение события, инициирующего открытие всплывающего календаряОпция showOn позволяет управлять событием, в ответ на которое должен отображаться всплывающий календарь. Эта опция может принимать одно из трех значений:
focusВсплывающий календарь открывается при получении фокуса ввода элементом input. Это значение используется по умолчанию.
buttonВсплывающий календарь открывается щелчком на кнопке.
bothВсплывающий календарь отображается как после щелчка на кнопке, так и после получения фокуса элементом input.
В случае использования значений button или both виджет Datepicker создает элемент button и помещает его в документ непосредственно после элемента input. Пример использования опции showOn приведен ниже:
$(function() { $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker({ showOn: "both" }); });
Как показано на рисунке, в документе появилась кнопка. Поскольку в этом примере опции showOn присвоено значение both, всплывающий календарь будет отображаться как при щелчке на кнопке, так и при получении фокуса элементом input.
Кнопка, добавляемая виджетом Datepicker, не является виджетом Button jQuery UI. Если вы хотите, чтобы все кнопки были однотипными, выберите элемент button и вызовите метод button() jQuery UI.
Элемент button можно стилизовать с помощью опций buttonImage и buttonText. Если задать в опции buttonImage URL-адрес изображения, то виджет Datepicker поместит это изображение на кнопку. Кроме того, связанный с кнопкой текст, заданный по умолчанию (многоточие), можно заменить другим текстом с помощью опции buttonText, как показано в примере ниже:
$(function() { $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker({ showOn: "both", buttonText: "Выбрать" }); });
Совместно используя опции buttonImage и buttonImageOnly, можно вообще избавиться от кнопки, заменив ее изображением. Соответствующий пример приведен ниже:
jQuery UI label {margin-right:12px} input {width: 200px; text-align: left} #dpcontainer * {vertical-align: middle} #dpcontainer img {width: 35px;} $(function() { $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker({ showOn: "both", buttonImage: "right.png", buttonImageOnly: true }); }); Дата:
В этом примере задается изображение right.png, а для опции buttonImageOnly устанавливается значение true. Кроме того, в документ добавлено несколько CSS-стилей, управляющих размещением изображения относительно элементов label и input. Виджет Datepicker не может самостоятельно определить, куда именно следует поместить элемент img, и поэтому для правильного расположения этого элемента img в документе пришлось применить стили CSS. Результат использования изображения вместо кнопки представлен на рисунке:
Управление выбором датыНазначение виджета Datepicker - предоставить пользователю возможность выбрать дату, но во многих случаях в этот процесс требуется вводить некоторые ограничения. В таблице ниже описаны настройки, позволяющие устанавливать ограничения, вынуждающие пользователя выбирать лишь допустимые даты:
changeMonth | Если эта опция равна true, то в календаре отображается раскрывающийся список, обеспечивающий возможность непосредственной навигации по месяцам. Значение по умолчанию - false |
changeYear | Если эта опция равна true, то в календаре отображается раскрывающийся список, обеспечивающий возможность непосредственной навигации по годам. Значение по умолчанию - false |
constrainInput | Если эта опция равна true, то виджет Datepicker проверяет соответствие содержимого поля ввода заданному формату даты. Значение по умолчанию - true |
hideIfNoPrevNext | Если эта опция равна true, то значки, позволяющие перемещаться по календарю вперед и назад относительно отображаемой даты, полностью скрываются, а не просто отключаются. Значение по умолчанию - false |
maxDate | Определяет максимальную дату, доступную для выбора. По умолчанию это ограничение отсутствует |
minDate | Определяет минимальную дату, доступную для выбора. По умолчанию это ограничение отсутствует |
numberOfMonths | Определяет количество месяцев, одновременно отображаемых в календаре. Значение по умолчанию - 1 |
showCurrentAtPos | Если для календаря задано одновременное отображение нескольких месяцев, то данная опция определяет номер позиции, в которой должен отображаться текущий или заданный по умолчанию месяц. Значение по умолчанию - 0 |
stepMonths | Определяет, на сколько месяцев вперед или назад должна сдвигаться отображаемая в календаре дата при щелчке на кнопке перехода вперед или назад во времени |
yearRange | Определяет диапазон лет, доступных для выбора в раскрывающемся списке, добавляемом с помощью опции changeYear. По умолчанию этот список включает десять предыдущих и десять последующих лет, а также текущий год |
Присвоив опции constrainInput значение true, можно ограничить ввод символов в текстовом поле лишь теми символами, которые соответствуют строго определенному формату. Допустимый набор символов определяется настройками локализации, о которой говорилось выше. Если локализация виджета Datepicker не выполнялась, то следует ожидать, что в набор допустимых символов будут входить лишь цифры и символ косой черты (/).
Использование указанного значения опции constrainInput еще не означает, что пользователь не сможет ввести недопустимую дату, например 99/99/99, но способствует значительному уменьшению вероятности возникновения ошибок. Значение этой настройки еще более возрастает, если для опции showOn установлено значение button, поскольку в этом случае всплывающий календарь не будет автоматически открываться при получении фокуса полем ввода.
Обычно пользователи охотно используют календарь для выбора даты, но для этого они должны его видеть. Если же календарь не отображается на экране, то далеко не каждый пользователь догадается, что для открытия календаря достаточно щелкнуть на кнопке. Любая возможность непосредственного ввода даты в текстовом поле, которую вы предоставляете пользователю, увеличивает вероятность того, что формат введенной им даты окажется неверным. Пример использования опции constrainInput приведен ниже:
$(function() { $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker({ constrainInput: true, minDate: "-3", maxDate: "+1" }); });
Здесь значение true присваивается опции constrainInput лишь для наглядности, поскольку оно является значением по умолчанию для этой опции. Остальные две опции позволяют ограничить диапазон дат доступных для выбора, минимальной и максимальной датой.
Как и в случае опции defaultDate, которая рассматривалась ранее, в качестве значений опций minDate и maxDate могут использоваться null (дата не определена), JavaScript-объект Date, число дней и строка относительной даты. В данном примере выбрано числовое представление, указывающее количество дней, отсчитываемых относительно текущей даты.
На рисунке видно, что Datepicker отключает ячейки календаря, недоступные для выбора:
Обратите внимание, что кнопки листания месяцев автоматически отключаются, если в них нет необходимости. Эти кнопки располагаются слева и справа вверху календаря и позволяют быстро переходить к следующему или предыдущему месяцам. Как показано на рисунке, все доступные для выбора даты относятся к текущему месяцу, и поэтому обе кнопки отключены. В подобных ситуациях эти кнопки при необходимости можно полностью скрыть, установив для опции hideIfNoPrevNext значение true.
Значение minDate не обязательно должно относиться к прошлому, а значение maxDate - к будущему, равно как вовсе не обязательно задавать одновременно оба значения. Чтобы предоставить пользователю возможность выбирать даты из диапазона, которому предшествует некий "подготовительный" период, можно присвоить опции minDate значение, относящееся к будущему, и тем самым лишить пользователя возможности выбора дат, относящихся к упомянутому периоду, как показано в примере ниже:
$(function() { $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker({ minDate: "+4" }); })
В этом примере мы указали, что пользователю не должны быть доступны для выбора даты, предшествующие той, которая наступит через 4 дня после текущей даты. Значение опции maxDate не определено, и это означает, что пользователь сможет выбрать любую дату, следующую за указанным "периодом задержки". Результат представлен на рисунке:
Обратите внимание, что кнопка перехода к следующему месяцу в данной ситуации включена, тогда как кнопка перехода к предыдущему месяцу отключена (ввиду отсутствия дат, относящихся к прошлому, которые были бы доступны пользователю для выбора).
Опции minDate и maxDate работают в сочетании с опцией defaultDate, откуда следует, что привязка диапазонов к текущей дате не является обязательной.
Создание календаря, отображающего одновременно несколько месяцевВиджет Datepicker позволяет установить количество месяцев, которые должны одновременно отображаться в календаре, посредством опции numberOfMonths. Это можно сделать, указав либо требуемое количество месяцев, либо массив из двух элементов, определяющий размеры месячной календарной сетки.
В примере ниже реализован подход, основанный на использовании массивов, который я считаю наиболее приспособленным для встроенных виджетов Datepicker, поскольку для всплывающих виджетов размер сетки часто оказывается слишком большим (к обсуждению этого вопроса мы еще вернемся).
$(function() { $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker({ numberOfMonths: }); });
В этом примере задана календарная сетка, высота которой соответствует одному месяцу, а ширина - трем. Результат представлен на рисунке:
Массив из двух элементов эквивалентен числовому значению 3. Если значение опции numberOfMonths задано в виде числа, то виджет отображает соответствующее количество месяцев в одном ряду.
Причина, по которой я редко использую описанный подход, когда работаю с всплывающими календарями, заключается в том, что в случае больших сеток приходится делать определенные предположения относительно размеров окна браузера и дисплея. Окно всплывающего виджета Datepicker не является диалоговым окном операционной системы. Оно представляет собой искусно стилизованный HTML-элемент, который отображается как часть HTML-документа. Это означает, что при отображении крупных календарных сеток на небольшом экране или в маленьком окне браузера значительная часть остальной информации, содержащейся в документе, окажется смещенной за пределы экрана.
Предоставление прямого доступа к месяцам и годамВместо того чтобы просто отображать месяцы и годы в заголовке календаря, можно обеспечить прямой доступ к соответствующим периодам времени с помощью раскрывающихся списков. Эта возможность позволяет ускорить работу в тех случаях, когда пользователям приходится выбирать даты в широком диапазоне возможных значений, и реализуется с помощью опций changeMonth и changeYear.
Присвоение значения true любой из этих опций активизирует соответствующий раскрывающийся список, причем допускается независимое управление активизацией этих списков. Пример использования этих опций приведен ниже:
$(function() { $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker({ changeMonth: true, changeYear: true, yearRange: "-1:+2" }); });
В этом сценарии активизированы оба раскрывающихся списка. Кроме того, для ограничения диапазона лет, между которыми пользователю разрешены переходы, используется опция yearRange. Требуемый диапазон указан с помощью значения "-1:+2", которое означает, что в календаре пользователю разрешены переходы в пределах одного года назад и двух лет вперед относительно текущего года.
Раскрывающиеся списки и заданный диапазон лет отображены на рисунке:
При определении годовых диапазонов с помощью опции yearRange можно указывать фактические годы. Так, в данном примере можно было бы указать значение: "2012:2015".
Управление внешним видом виджета DatepickerСуществует целый ряд свойств, позволяющих настраивать внешний вид виджета Datepicker при его отображении для пользователя. Для выполнения обычных задач, связанных с выбором даты, можно удовлетвориться внешним видом календаря, используемым по умолчанию, с которым вы уже знакомы по предыдущим примерам, однако возможность настройки внешнего вида в соответствии с задачами конкретного веб-приложения чрезвычайно полезна.
Свойства, обеспечивающие возможность изменения внешнего вида виджета Datepicker, приведены в таблице ниже:
appendText | Задает текст подсказки, содержащий дополнительную информацию, например пояснения относительно форматирования даты, который будет вставлен в документ после элемента input |
closeText | Задает текст для кнопки закрытия календаря, отображающейся на панели вспомогательных кнопок, если она включена. Значение по умолчанию - "Закрыть" |
currentText | Задает текст для кнопки возврата к текущему месяцу, отображающейся на панели вспомогательных кнопок, если она включена. Значение по умолчанию - "Сегодня" |
duration | Задает скорость или длительность выполнения анимации, заданной опцией showAnim. Значение по умолчанию - normal |
gotoCurrent | Если эта опция равна true, то кнопка "Сегодня", находящаяся на панели вспомогательных кнопок, если она включена, будет осуществлять возврат к выбранной, а не к текущей дате. Значение по умолчанию - false |
selectOtherMonths | Если эта опция равна true, то становятся доступными для выбора даты, отображаемые в результате установки равным true значения опции showOtherMonths |
showAnim | Определяет тип анимации, используемой для отображения и сокрытия всплывающих календарей. Значение по умолчанию - false |
showButtonPanel | Если эта опция равна true, то в календаре будет отображаться вспомогательная панель с кнопками, с помощью которых пользователь сможет переходить к текущей дате и (если используется всплывающий виджет) закрывать календарь. Значение по умолчанию - false |
showOptions | Задает опции анимации, указанной опцией showAnim |
showOtherMonths | Если эта опция равна true, то пустые поля в календарной сетке будут заполняться датами из предыдущих и последующих месяцев. Значение по умолчанию - false |
showWeek | Если значение этой опции равно true, то в календаре будет отображаться столбец с номерами недель. Значение по умолчанию - false |
weekHeader | Задает заголовок столбца календаря с номерами недель, включенной с помощью опции showWeek. Значение по умолчанию - "Нед" |
В некоторых приложениях важно знать номер недели в году, на которую приходится та или иная дата. Например, это требуется во многих программах бухгалтерского учета. В виджете Datepicker управление отображением информации о неделях осуществляется с помощью опций showWeek и weekHeader, как показано в примере ниже:
$(function() { $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker({ showWeek: true, weekHeader: "№ недели" }); });
Если опция showWeek имеет значение true, то в календаре отображается столбец с номерами недель. По умолчанию заголовком этого столбца является "Нед", однако его можно изменить с помощью опции weekHeader. В примере включено отображение столбца недель, название которого изменено на "№ недели":
Заполнение пустых ячеек календаря датами соседних месяцевПо умолчанию в календаре отображаются лишь даты, относящиеся к текущему месяцу. Это означает, что в календарной сетке могут присутствовать пустые ячейки. Можно разрешить заполнение пустых ячеек датами предыдущего и последующего месяцев, установив значение опции showOtherMonths равным true, как показано в примере ниже:
$(function() { $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker({ showOtherMonths: true }); });
Результат представлен на рисунке ниже. В этом случае даты, относящиеся к другим месяцам, становятся доступными, если для опции selectOtherMonths установлено значение true:
Использование вспомогательной панели для дополнительных кнопокУстановка значения true для опции showButtonBar приводит к добавлению панели дополнительных кнопок, располагающейся в нижней части окна виджета Datepicker. В случае всплывающего календаря панель содержит две кнопки: "Сегодня" и "Закрыть". Кнопка "Сегодня" позволяет вернуться к текущей дате, а кнопка "Закрыть" предназначена для закрытия окна календаря. Текст, используемый для этих кнопок, можно изменить с помощью опций currentText и closeText.
Если для опции goToCurrent установить значение true, то календарь будет возвращаться к выбранной дате, а не текущей. Это средство удобно использовать, если виджет Datepicker сконфигурирован с определенным значением опции defaultDate. Если цель выбора даты связана с прошлыми или будущими событиями, то возврат к текущей дате не всегда целесообразен. Соответствующий пример приведен ниже:
$(function() { $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker({ showButtonPanel: true, currentText: "Перейти", gotoCurrent: true, defaultDate: "+1m +1y" }).val("20.12.2014"); });
Обратите внимание, что использование опции goToCurrent приводит к тому, что нажатие кнопки вызывает переход к выбранной дате. В данном примере такой выбранной датой служит значение атрибута value элемента input, но если пользователь выберет другую дату, а затем вновь откроет календарь, то нажатие кнопки будет возвращать календарь к дате, выбранной пользователем, а не к той, которая указана вами.
Методы виджета DatepickerМетоды, поддерживаемые виджетом Datepicker, приведены в таблице ниже:
datepicker("destroy") | Полностью удаляет функциональность виджета Datepicker из базового элемента |
datepicker("disable") | Приостанавливает работу виджета Datepicker для базового элемента |
datepicker("enable") | Возобновляет работу ранее приостановленного виджета Datepicker для базового элемента |
datepicker("option", опции) | Позволяет получить или установить значения одной или нескольких опций виджета Datepicker |
datepicker("isDisabled") | Возвращает true, если виджет Datepicker отключен |
datepicker("hide") | Скрывает всплывающий календарь, если он видимый |
datepicker("show") | Отображает всплывающий календарь, если он невидимый |
datepicker("refresh") | Обновляет календарь для отражения выполненных в базовом элементе изменений |
datepicker("getDate") | Получает дату, выбранную в календаре |
datepicker("setDate", дата) | Устанавливает указанное значение в качестве выбранной даты календаря |
Чаще всего я прибегаю к использованию методов getDate и setDate в тех случаях, когда хочу предоставить пользователям возможность выбора целых диапазонов дат с помощью нескольких виджетов Datepicker. В подобных ситуациях я предпочитаю не отображать выбранные даты в текстовых полях и вывожу лишь количество дней между заданными граничными датами. Соответствующий пример приведен ниже:
jQuery UI label {margin:12px} input {width: 200px; text-align: left} #wrapper > * {float: left} #result {margin: auto; padding: 10px; width: 200px; clear: left} $(function() { $("#result").hide(); $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#dateStart, #dateEnd").datepicker({ minDate: "-7d", maxDate: "+7d", onSelect: function(date, datepicker) { if (datepicker.id == "dateStart") { $("#dateEnd").datepicker("setDate", date) .datepicker("enable").datepicker("option", "minDate", date) } if (!$("#dateEnd").datepicker("isDisabled")) { var startDate = $("#dateStart").datepicker("getDate"); var endDate = $("#dateEnd").datepicker("getDate"); var diff = endDate.getDate() - startDate.getDate(); $("#dayCount").text(diff).parent().show(); } } }).filter("#dateEnd").datepicker("disable"); }); Начало: Конец: Количество дней:
В этом примере создаются два календаря, один из которых сразу после загрузки документа находится в отключенном состоянии. Для реагирования на выбор дат пользователем используется событие onSelect (о котором мы подробнее поговорим далее).
Как только пользователь выбирает дату в первом календаре, мы применяем метод setDate для подготовки второго календаря, а метод getDate - для получения дат из обоих календарей и последующего вычисления разницы в днях между первой и второй датами (для простоты предполагается, что обе даты относятся к одному и тому же месяцу). Вид документа в окне браузера представлен на рисунке:
События виджета DatepickerКак и все виджеты jQuery UI, виджет Datepicker поддерживает набор событий, позволяющих получать уведомления о важных изменениях в состоянии приложения. Эти события приведены в таблице ниже:
Я не буду повторно демонстрировать, как работает метод onSelect, поскольку он уже использовался в паре примеров, включая тот, который был рассмотрен в предыдущем разделе. Единственное, на что я хочу обратить ваше внимание, - это то, что аргументами, передаваемыми обработчику события, служат строковые представления выбранной даты и экземпляра Datepicker, породившего данное событие.
Событие onChangeMonth позволяет реагировать на событие, которое происходит при выборе пользователем другого месяца или года, будь то с помощью раскрывающихся списков, включенных посредством использования опций changeMonth и changeYear или кнопок листания месяцев.
Используя метод onClose, можно реагировать на закрытие всплывающего календаря. Это событие запускается даже в том случае, если пользователем не была выбрана дата в календаре. Аргументами обработчика события являются строковое представление даты (или пустая строка, если пользователь закрыл окно, не сделав выбора) и экземпляр Datepicker, породивший данное событие.
Описание: Из всплывающего окна или инлайн календаря, чтобы выбрать дату.
Новая версия: 1.0
JQuery UI дата подборщика (Datepicker) Выберите дату, чтобы добавить высоту страницы, чтобы настроить плагин. Вы можете настроить формат даты и язык, ограничить выбираемый диапазон дат, добавить кнопки и другие параметры навигации.
По умолчанию, когда связанный с ним текстовое поле фокус, в небольшом наложенной открытой выбора даты. Для календаря инлайн, просто выберите даты прилагается к DIV или интервала.
взаимодействие клавиатурыКогда дата выбирающий открыт, следующие команды клавиатуры:
- PAGE UP: переход к предыдущему месяцу.
- PAGE DOWN: Переход к следующему месяцу.
- CTRL + PAGE UP: Перемещение в предыдущем году.
- CTRL + PAGE DOWN: Переход к следующему году.
- CTRL + HOME: Переместить текущий месяц. Если выбора даты закрыта открыта.
- CTRL + ЛЕВЫЙ: перейти на день.
- CTRL + ПРАВЫЙ: перейти на следующий день.
- CTRL + UP: переход к предыдущей неделе.
- CTRL + DOWN: Переход к следующей неделе.
- ENTER: Выберите дату фокусировки.
- CTRL + END: Закрыть выбора даты и очистить дату.
- ПОБЕГ: Дата закрытия сборщика, без какого-либо выбора.
Изменение параметров по умолчанию для всех выбора даты.
20.08.2012 Ромчик
Доброго времени суток. На днях столкнулся с проблемой — пользователь в input должен указать дату в определенном формате. Не долго ломая голову решил сделать так, чтобы при нажатии на input появлялся календарь. Реализовать это не сложно, но зачем? Если есть замечательный виджет календаря на jQuery — datepicker. Дальше речь и пойдет об установке, настройке и подключения datepicker.
Для начала я приведу наглядный пример того, что я хочу сделать:
Ну, и понятно, что после выбора даты календарь исчезает, а в текстовом поле появляется выбранная дата.
Приступим к реализации.
Заходим на официальный сайт jQueryUI . Чтобы ничего лишнего не качать — жмем “Deselect all components”
И выбираем “Core”:
На этом в принципе все. Но у данного виджета есть предустановленные отображения (темы)
В правом верхнем углу Вы можете выбрать подходящую тему, выбрать версию виджета и нажать “Download”:
На следующем этапе распаковываем архив.
Давайте сразу договоримся о структуре нашей страницы:
Теперь файлы jquery-1.8.0.min.js и jquery-ui-1.8.23.custom.min.js из скачанного архива помещаем в папку js. Теперь папку с названием темы для datepicker (в моем случае это ui-lightness) из папки css скачанного архива помещаем в папку css для нашей страницы. На этом установка календаря — виджета jQuery Datepicker закончена.
Давайте приступим к подключению Datepicker. Как я уже говорил, что я хочу вызывать календарь по клику на текстовом поле. Добавим к нашему input id=”datepicker” для того, чтобы мы могли с легкостью к нему обратиться.
Теперь напишем небольшой скрипт на jQuery, который будет вызывать календарь при клике по данному тестовому полю:
$(function(){ $("#datepicker").datepicker(); });
Сохраняем и проверяем.
Настройка календаря — виджета на jQuery Datepicker.Первое, что настроим это тему для нашего календаря. Ниже я приведу таблицу с названием темы для Datepicker и ее отображение:
UI lightness | |
UI darkness | |
Smoothness | |
Start | |
Redmond | |
Sunny | |
Overcast | |
Le Frog | |
Flick | |
Pepper Grinder | |
Eggplant | |
Dark Hive | |
Cupertino | |
South Street | |
Blitzer | |
Humanity | |
Hot Sneaks | |
Excite Bike | |
Vader | |
Dot Luv | |
Mint Chock | |
Black Tea | |
Trontastic | |
Swanky Purse |
Как видите тем достаточно, чтобы выбрать подходящую, но если по каким-либо причинам Вы не нашли такую тему, то Вы запросто можете изменить одну из стандартных путем изменения файла стилей для datepicker.
На этом настройки datepicker не заканчиваются и при вызове функции datepicker мы можем передать дополнительные параметры:
Параметр | Описание | Пример |
disable: true(false) По умолчанию: false | Включение или отключение datepicker | $(«.selector»).datepicker({ disabled: true }); |
altField По умолчание: пусто | Указывается селектор элемента, который будет обновляться | $(«.selector»).datepicker({ altField: «#actualDate» }); |
altFormat По умолчанию: пусто | dateFormat — формат даты, который будет использоваться для altField | $(«.selector»).datepicker({ altFormat: «yy-mm-dd» }); |
appendTex По умолчанию: пусто | Текст, который будет отображен после каждого поля даты | $(«.selector»).datepicker({ appendText: «(yyyy-mm-dd)» }); |
autoSize: true(false) По умолчанию: false | Авторазмер элемента | $(«.selector»).datepicker({ autoSize: true }); |
dateFormat: По умолчанию: mm/dd/yy В таблице ниже я приведу какие значения может принимать. | Указывает формат даты | $(«.selector»).datepicker({ dateFormat: «yy-mm-dd» }); |
dayNames По умолчанию [«Sunday», «Monday», «Tuesday», «Wednesday», «Thursday», «Friday», «Saturday»] | Полное название дней недели | $(«.selector»).datepicker({ dayNames: [«Понедельник», «Вторник», «Среда», «Четверг», «Пятница», «Суббота», «Воскресенье»] }); |
dayNamesMin По умолчанию: [«Su», «Mo», «Tu», «We», «Th», «Fr», «Sa»] | Сокращенное название дней недели | $(«.selector»).datepicker({ dayNamesMin: [“Пн”,”Вт”,”Ср”,”Чт”,”Пт”,”Сб”,”Вс”] }); |
dayNamesShort По умолчанию: [«Sun», «Mon», «Tue», «Wed», «Thu», «Fri», «Sat»] | Укороченноеназвание дней недели | $(«.selector»).datepicker({ dayNamesShort: [«Пон», «Вто», «Сре», «Чет», «Пят», «Суб», «Вос»] }); |
defaultDate По умолчанию: пусто В качестве параметров использует параметры dateFormat | Указывает дату по умолчанию | $(«.selector»).datepicker({ defaultDate: +7 }); |
monthNames По умолчанию: [«January», «February», «March», «April», «May», «June», «July», «August», «September», «October», «November», «December»] | Полное название месяцев | $(«.selector»).datepicker({ monthNames: [«Январь»,»Февраль»,»Март»,»Апрель»,»Май»,»Июнь»,»Июль»,»Август»,»Сентябрьr»,»Октябрь»,»Ноябрь»,»Декабрь»] }); |
monthNamesShort По умолчанию [«Jan», «Feb», «Mar», «Apr», «May», «Jun», «Jul», «Aug», «Sep», «Oct», «Nov», «Dec»] | Сокращенное название месяцев | $(«.selector»).datepicker({ monthNamesShort: [«Янв»,»Фев»,»Мар»,»Апр»,»Май»,»Июн»,»Июл»,»Авг»,»Сен»,»Окт»,»Ноя»,»Дек»] }); |
Тут я привел только основные параметры, которые могут Вам пригодиться. Если Вы хотите увидеть полный список параметров, то вперед к официальной документации
Теперь давайте остановимся на значениях, которые принимает параметр dateFormat
Вот теперь все.
Мы с Вами рассмотрели установку, подключение и настройку одного из замечательных виджетов jQuery — виджет календаря datepicker.
Надеюсь, что статья Вам понравилась. Если у Вас возникли вопросы, то пишите в комментариях.
А на этом я с Вами прощаюсь и удачной web-разработки.
Календарь для движка сайта - вещь не только нужная, но и полезная. Помимо того, что они позволяют смотреть календарь (неужели?! - прим.ред. ), они носят массу полезных функций (не может быть! - прим.ред. ), начиная от обычной "пробы пипеткой" до составления календаря событий (да что вы говорите! - прим.ред.).
В данной статье будет рассмотрено большинство плагинов календарей и datepicker"ов для jQuery. Однако в конце статьи вас будет ждать один плагин, не на jQuery, который я для себя отметил уже давно, и который проходить мимо мне не позволяет совесть. Итак…
jQuery Date PickersПожалуй для jQuery это передовой календарь, а точнее datepicker. Работает везде и безоговорочно. Правда замечено в Опере 9.26 (в 10 нормально всё) и в ишаках ниже 7 включительно некоторая тормознутость. Однако это не меняет того, что работает он более чем исправно. Есть поддержка скинов. И, что немаловажно, поддержка кучи различных языков. Чтобы вы не искали, даю сразу .
Основан на jQuery UI Datepicker, но отделён от него в связи с тем, что разработчики jQuery UI Datepicker захотели более простой функционал. То есть данный плагин обладает дополнительными функциями, которых у первого нет. Перечислять их нет смысла, нужно смотреть. Пробегитесь по ссылке с примерами по различным вкладкам и сами поймёте. Его возможности очень и очень радуют.
Очень похож на предыдущего собрата, только функционал может быть чутка поменьше. Хотя не уверен в этом.
Date Picker - jQuery plugin
. Хотел бы я назвать этот плагин лучшим, но не могу, так как кроссбраузерность у него хромает. В Опере 9.26 календарь напрочь не откликается на воздействия, в Опере 10 у него проблемы с отображением (правда небольшие), в IE6 отображается криво насколько это возможно. Если вас всё это не смущает, то использовать крайне рекомендуется! Возможностей у него уйма, можете посмотреть по ссылке примера.
Простой datepicker, особенностью которого является работа ещё и со временем.
Уникальный календарь, который позволяет работать с событиями. Календарю лишь надо подпихнуть массив событий и всё. В Опере 9.26 слегка нестабилен, а так всё нормально. Советую ознакомиться.
FullCalendar
. Календарь похож на предыдущий, но только гораздо лучше. Он по праву может называться органайзером - можно расписать все дела и посмотреть их в календаре на месяц, на неделю или день, всё как в КПК. Стабилен, кроссбраузерен, пока аналогов не встречено, посему зе бест.
Календарь дел на неделю. В Опере 9.26 не работает. Поскольку предыдущий плагин имеет и функцию этого плагина, то пожалуй предыдущий будет лучшим выбором.
Очень симпатичный плагин с возможностью выбора нескольких дат. Кроссбраузерен вроде как. Не проходите мимо, он стоит вашего внимания.
Календарь в стиле айфона с возможностью записи событий.
Календарь без претензий на гениальность. Всё просто.
Подключите стили и скрипты из папки /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 - последний год декады, в которую входит текущий год
Тип string|jQuery
Значение по умолчанию ""
Альтернативное поле воода в значение которого будут попадать выбранные даты с форматом altFieldDateFormat .
altFieldDateFormatТип string
Значение по умолчанию "@"
Формат даты для альтернативного поля.
toggleSelectedТип boolean
Значение по умолчанию true
Если true, то клик на выделенной дате снимет выделение.
keyboardNavТип boolean
Значение по умолчанию true
Если true, то по календарю можно будет осуществлять навигацию с помощью клавиатуры.
Сочетания клавиш:
- Ctrl + → | - переход на месяц вперед
- Ctrl + ← | ↓ - переход на месяц назад
- Shift + → | - переход на год вперед
- Shift + ← | ↓ - переход на год назад
- Alt + → | - переход на 10 лет вперед
- Alt + ← | ↓ - переход на 10 лет назад
- Ctrl + Shift + - переход на следующий вид
- Esc - закрывает календарь
Тип string
Значение по умолчанию "bottom left"
Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования, воторым - положение на этой оси. Например {position: "right top"} - утсановит позицию клаендаря справа вверху от текстового поля.
offsetТип number
Значение по умолчанию 12
Отступ от основной оси позиционирования.
viewТип string
Значение по умолчанию "days"
Начальный вид календаря. Возможноые значения:
- days - отображение дней месяца
- months - отображение месяцев одного года
- years - отображение годов одной декады
Тип 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 - период дня заглавными буквами
Тип 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 - экземпляр плагина.
Тип function
Значение по умолчанию null
Функция обратного вызова при появлении календаря.
- inst Object - экземпляр календаря.
- animationCompleted boolean
Тип function
Значение по умолчанию null
Функция обратного вызова при скрытии календаря.
- inst Object - экземпляр календаря.
- animationCompleted boolean - индикатор состояния анимации. если false , то анимация только началась, если true - уже закончилась.
Тип function
Значение по умолчанию null
Функция обратного вызова при изменении месяца.
- month number - номер месяца (от 0 до 12), к которому осуществлен переход.
- year number - номер года, к которому осуществлен переход.
Тип function
Значение по умолчанию null
Функция обратного вызова при изменении года.
- year number - номер года, к которому осуществлен переход
Тип function
Значение по умолчанию null
Функция обратного вызова при изменении декады.
- decade array - массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается.
Тип function
Значение по умолчанию null
Функция обратного вызова при изменении вида календаря
- view string - вид, к которому осуществлен переход (days, months, years).
Тип 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()