На одном из уроков мы научились как разными способами подключать библиотеку jQuery UI . Сегодня темой урока будет виджет выбора даты - jQuery UI Datapicker .
На одном из уроков мы научились как разными способами подключать библиотеку jQuery UI. Сегодня темой урока будет виджет выбора даты - jQuery UI Datapicker.
Зачем нужен этот виджет? Чтобы предоставить пользователю при вводе даты календарь, при заполнении формы ему не надо думать в каком формате вбивать даты. В свою очередь админ ресурса получает данные в одинаковом формате.
По этому адресу: https://jqueryui.com/datepicker/ вы увидите несколько вариантов виджета datapicker, рассмотрим только два основных.
jQuery UI Datepicker - Display month & year menus
Когда пользователь щёлкает мышкой в текстовое поле ввода input, появляется календарь с выбором даты и дополнительного меню с выбором месяца и года. Вариант с одной датой, подходит на сайтах, где клиент указывает, например дату своего визита.
HTML-код состоит из одиночного тега input с идентификатором "datapicker" обёрнутого в абзац - тег p. Вместо абзаца, этот input можно поместить в любой блочный элемент сайта.
<p>Date: <input type="text" id="datepicker"></p>
Код jQuery необходимо скопировать (view source) и вставить на свой сайт, как в примере. После загрузки DOM дерева, будем получать элемент по идентификатору #datapicker в текстовое поле и вызывать метод .datepicker. Теперь надо в метод передать объект, в котором описать дополнительные настройки: changeMonth: true, changeYear: true. Теперь появилась возможность через выпадающий список выбрать месяц и год, это немного удобнее, чем делать аналогичный выбор через календарь.
$( function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
jQuery UI Datepicker - Select a Date Range
Виджет Datapicker с выбором диапазона даты Date Range подходит сайтам с системой бронирования. Пользователь указывает в первом календаре начальную дату, а во втором календаре конечную. Создадим два текстовых поля input c идентификатором "from" и "to" и два label привязанные к своим текстовым полям.
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
Получаем элемент с идентификатором #from - первое текстовое поле, в нем вызываем метод datapicker.
$( function() {
var dateFormat = "mm/dd/yy",
from = $( "#from" )
.datepicker({
Зададим дату по умолчанию плюс одну неделю.
defaultDate: "+1w",
Возможность менять месяц с помощью выпадающего списка.
changeMonth: true,
numberOfMonths: 3
})
Когда произойдет событие on, то есть пользователь что-нибудь выберет из выпадающего списка, то при смене выбранной даты находим второй datepicker и устанавливаем минимальную дату, равную выбранной.
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to" ).datepicker
При смене выбранной даты находим первый datepicker и устанавливаем максимальную дату, равную выбранной.
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
Весь код и визуальные примеры всех вариантов с разными параметрами виджета jQuery Datapicker, есть на сайте jqueryui.com.
jQuery UI Datepicker - Localize calendar
По умолчанию календарь отображается на английском языке, но это можно изменить, библиотека jQuery UI поддерживает мультиязычность.
Скачиваем нужный языковой файл на Github
Подключаем нужный языковой модуль в тег head.
<script src="../jquery.ui.datepicker-ru.js"></script>
Создаем текстовое поле для календаря и выпадающий список с id "locale" c перечислением нужных языков.
<p>Date: <input type="text" id="datepicker">
<select id="locale">
<option value="">English</option>
<option value="ru">Russian (Русский)</option>
</select></p>
После загрузки DOM дерева, ищем объект datapicker. Меняем настройки для всех datepicker.
$( function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "ru" ] );
Смена локализации для "datepicker".
$( "#locale" ).on( "change", function() {
Смена локализации при выборе нового значения в выпадающем списке.
$( "#datepicker" ).datepicker( "option",
$.datepicker.regional[ $( this ).val() ] );
});
} );
