Створення віджета Datepicker
Існують два основні способи створення віджета Datepicker. Найчастіше його приєднують до елементу input за допомогою методу datepicker (). Негайної зміни зовнішнього вигляду елемента при цьому не відбувається, але як тільки елемент отримає фокус введення (при виконанні клацання на ньому або перехід до нього від інших елементів за допомогою клавіші
Календарі описаного типу називаються спливаючими календарями. Приклад створення такого календаря наведено нижче:
На малюнку показано, що відбувається при переміщенні фокуса в поле введення:
Користувач може або ввести дату вручну, або вибрати її за допомогою календаря. Як тільки елемент input втратить фокус або користувач натисне клавішу
Локалізація віджета Datepicker
Файл jquery-ui-i18n.js знаходиться в папці development-bundle / ui / i18n архівного файлу бібліотеки jQuery UI, який ви повинні були завантажити з сайту jqueryui.com. Скопіюйте його в ту ж папку, в якій знаходиться вихідний файл, і додайте його в документ як показано в коді. Результат представлений на малюнку:
Створення вбудованого календаря Datepicker
Другий спосіб використання віджету Datepicker передбачає його вбудовування в документ. Для цього слід вибрати елемент div або span за допомогою jQuery і викликати метод datepicker (). Вбудований календар відображається весь час, поки видно HTML-елемент, на основі якого він створений. Приклад створення вбудованого календаря наведено нижче:
У цьому прикладі в якості базового HTML-елемента для створення віджета Datepicker використовується елемент span. Результат представлений на малюнку:
Вбудований календар може бути корисний, якщо ви не хочете працювати з спливаючими об'єктами. Звичайно, існують додатки, в яких робота з датами ведеться настільки інтенсивно, що має сенс постійно мати календар під рукою. Але в більшості випадків доцільно залишати календар прихованим доти, поки в ньому не виникне необхідність.
Труднощі з приховуванням і відображенням вбудованого віджета Datepicker обумовлені тим, що його додавання в документ тягне за собою необхідність зміни компонування сторінки, що може породжувати проблеми уявлення. З моєї точки зору, в більшості ситуацій набагато зручніше використовувати спливає віджет.
Налаштування віджета Datepicker
базові настройки
Деякі конфігураційні опції використовуються для настройки базових властивостей спливаючих і вбудованих календарів. Ці властивості дуже важливі, оскільки дозволяють управляти інтеграцією віджета в документ. Їх перелік наведено в таблиці нижче:
Базові властивості віджета Datepicker
Встановлює вказане значення в якості обраної дати календаря
Отримання і зміна дати програмним шляхом
Найчастіше я вдаюся до використання методів getDate і setDate в тих випадках, коли хочу надати користувачам можливість вибору цілих діапазонів дат за допомогою декількох віджетів Datepicker. У подібних ситуаціях я вважаю за краще не відображати вибрані дати в текстових полях і виводжу лише кількість днів між заданими граничними датами. Відповідний приклад наведено нижче:
У цьому прикладі створюються два календаря, один з яких відразу після завантаження документа знаходиться у відключеному стані. Для реагування на вибір дат користувачем використовується подія onSelect (про який ми докладніше поговоримо далі).
Як тільки користувач вибирає дату в першому календарі, ми застосовуємо метод setDate для підготовки другого календаря, а метод getDate - для отримання дат з обох календарів і подальшого обчислення різниці в днях між першою і другою датами (для простоти передбачається, що обидві дати відносяться до одного і того ж місяця). Вид документа у вікні браузера представлений на малюнку:
Події віджета Datepicker
Як і всі віджети jQuery UI, віджет Datepicker підтримує набір подій, що дозволяють отримувати повідомлення про важливі зміни в стані додатки. Ці події приведені в таблиці нижче:
Події віджета Datepicker