Datepicker что это
Перейти к содержимому

Datepicker что это

  • автор:

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

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

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

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

Синтаксис

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

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

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

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

Опции

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

События

$(селектор).datepicker(>)

Обратите внимание: например для того, чтобы привязать к виджету с обработчик события create, который выводит сообщение «привет» необходимо будет написать следующий код: $(«#test»).datepicker(>).

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

Wisdomweb.ru © 2023.
Все права защищены. Любое использование материалов данного сайта без разрешения администрации запрещено.
Онлайн учебники по HTML, HTML5, CSS, JavaScript, AJAX, HDOM, jQuery.

Datepicker что это

DatePicker это компонент для выбора даты. Он выглядит так же, как выпадающий календарь в DateField.

gui datepicker mini

XML-имя компонента: datePicker .

DatePicker реализован для блока Web Client.

  • Для создания DatePicker , связанного с данными, необходимо использовать атрибуты dataContainer и property:
  id="orderDc" class="com.company.sales.entity.Order" view="_local"> />    id="datePicker" dataContainer="orderDc" property="date"/> 

Как видно из примера, в экране описывается источник данных orderDc для некоторой сущности Заказ ( Order ), имеющей атрибут date . В компоненте ввода даты в атрибуте dataContainer указывается ссылка на источник данных, а в атрибуте property − название атрибута сущности, значение которого должно быть отображено в компоненте.

  • Вы можете указать доступные для выбора даты с помощью атрибутов rangeStart и rangeEnd . Если вы их установите, даты, выходящие за пределы указанного промежутка, будут недоступны.
 id="datePicker" rangeStart="2016-08-15" rangeEnd="2016-08-19"/>

gui datepicker month range

  • Точность выбора даты определяется атрибутом resolution . Значение атрибута должно соответстовать перечислению DatePicker.Resolution − DAY , MONTH , YEAR . Значение по умолчанию: DAY .
 id="datePicker" resolution="MONTH"/>

gui datepicker month resolution

 id="datePicker" resolution="YEAR"/>

Виджет Datepicker

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

Создание виджета Datepicker

Существуют два основных способа создания виджета Datepicker. Чаще всего его присоединяют к элементу input с помощью метода datepicker(). Немедленного изменения внешнего вида элемента при этом не происходит, но как только элемент получит фокус ввода (при выполнении щелчка на нем или переходе к нему от других элементов с помощью клавиши ), рядом с ним отобразится календарь, с помощью которого можно будет выбрать требуемую дату.

Календари описанного типа называются всплывающими календарями. Пример создания такого календаря приведен ниже:

    jQuery UI    input    

На рисунке показано, что происходит при перемещении фокуса в поле ввода:

Открытие всплывающего календаря Datepicker при получении элементом input фокуса ввода

Пользователь может либо ввести дату вручную, либо выбрать ее с помощью календаря. Как только элемент 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 input #wrapper > *    

В этом примере в качестве базового HTML-элемента для создания виджета Datepicker используется элемент span. Результат представлен на рисунке:

Встроенный календарь Datepicker

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

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

Настройка виджета Datepicker

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

Базовые настройки

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

Базовые свойства виджета Datepicker

Свойство Описание
altField Позволяет задать дополнительное поле, которое будет обновляться при выборе даты в календаре
buttonImageOnly Указывает, что вместо вспомогательной кнопки, позволяющей открыть календарь, должно использоваться изображение, заданное опцией buttonImage
buttonImage Определяет URL-адрес изображения, используемого для вспомогательной кнопки открытия всплывающего календаря. По умолчанию не используется
buttonText Определяет текст, который будет отображаться на кнопке открытия всплывающего календаря. Текстом по умолчанию является многоточие (. )
defaultDate Позволяет установить дату, которая будет подсвечена при открытии календаря
disabled Указывает, должен ли виджет быть первоначально отключен. Значение по умолчанию — false
showOn Определяет действие, инициирующее открытие всплывающего календаря. Значение по умолчанию — focus
Указание даты, используемой по умолчанию

Простейшая настройка одновременно является и наиболее полезной. С помощью опции defaultDate можно указать дату, которая будет автоматически подсвечиваться при открытии календаря.

Если значение опции defaultDate не установлено, вместо него используется текущая дата. (Разумеется, здесь имеется в виду дата, установленная в пользовательской системе. Установка часовых поясов, переход на летнее время, неправильно настроенная конфигурация — все это может стать причиной того, что отображаемая для пользователя дата не будет совпадать с той, на которую вы рассчитываете.)

Эта опция используется лишь в случае отсутствия атрибута value в элементе input. Если этот атрибут присутствует (независимо от того, включен ли он в документ вами или появился в результате предварительного выбора пользователем), то виджет Datepicker будет использовать его значение value.

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

Возможные значения опции defaultDate

Значение Описание
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 года:

Отображение в календаре будущей даты с использованием опции defaultDate

Описанный формат указания относительных дат встретится вам еще не раз. Это очень гибкий формат, обеспечивающий необходимую точность. Точно так же, как это сделано в примере, можно опустить любой интервал, который не собираетесь изменять. Например, вместо значения «+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.

Добавление кнопки в документ в ответ на действие, заданное опцией showOn

Кнопка, добавляемая виджетом 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 input #dpcontainer * #dpcontainer img    
id="dpcontainer" >

В этом примере задается изображение right.png, а для опции buttonImageOnly устанавливается значение true. Кроме того, в документ добавлено несколько CSS-стилей, управляющих размещением изображения относительно элементов label и input. Виджет Datepicker не может самостоятельно определить, куда именно следует поместить элемент img, и поэтому для правильного расположения этого элемента img в документе пришлось применить стили CSS. Результат использования изображения вместо кнопки представлен на рисунке:

Использование изображения вместо кнопки во всплывающем календаре

Управление выбором даты

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

Свойства виджета 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: [1,3] >); >);

В этом примере задана календарная сетка, высота которой соответствует одному месяцу, а ширина — трем. Результат представлен на рисунке:

Календарная сетка

Массив из двух элементов [1, 3] эквивалентен числовому значению 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, приведены в таблице ниже:

Свойства, позволяющие управлять внешним видом виджета 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. В примере включено отображение столбца недель, название которого изменено на «№ недели»:

Отображение информации о неделях в виджете Datepicker

Заполнение пустых ячеек календаря датами соседних месяцев

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

Метод Описание
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 input #wrapper > * #result    
Количество дней:

В этом примере создаются два календаря, один из которых сразу после загрузки документа находится в отключенном состоянии. Для реагирования на выбор дат пользователем используется событие onSelect (о котором мы подробнее поговорим далее).

Как только пользователь выбирает дату в первом календаре, мы применяем метод setDate для подготовки второго календаря, а метод getDate — для получения дат из обоих календарей и последующего вычисления разницы в днях между первой и второй датами (для простоты предполагается, что обе даты относятся к одному и тому же месяцу). Вид документа в окне браузера представлен на рисунке:

Использование методов getDate и setDate

События виджета Datepicker

Как и все виджеты jQuery UI, виджет Datepicker поддерживает набор событий, позволяющих получать уведомления о важных изменениях в состоянии приложения. Эти события приведены в таблице ниже:

События виджета Datepicker

Событие Описание
create Происходит при создании экземпляра Datepicker
onChangeMonthYear Происходит, когда пользователь переходит к другому месяцу или году в календаре
onClose Происходит при закрытии всплывающего календаря
onSelect Происходит, когда пользователь выбирает дату

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

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

Используя метод onClose, можно реагировать на закрытие всплывающего календаря. Это событие запускается даже в том случае, если пользователем не была выбрана дата в календаре. Аргументами обработчика события являются строковое представление даты (или пустая строка, если пользователь закрыл окно, не сделав выбора) и экземпляр Datepicker, породивший данное событие.

Vue 3 как использовать Datepicker

The component is packaged mainly for use with bundlers, if you require a browser build — post an issue.

То есть без сборщика этот компонент нельзя использовать

CodesandBox — вот тут пример работы

Процесс интеграции

  1. Создать проект vue create my-project
  2. npm i vue3-datepicker (в cmd из папки если что)
  3. Можешь и в App.vue либо создать свой компонент
import Datepicker from 'vue3-datepicker' 

Если template нету

Если template есть

data() < return < date: new Date(), >; >, components: < Datepicker, >, 
  

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *