Бібліотека jQuery UI. Віджет календар

19

Від автора: вітаю вас, друзі. У цій статті ми з вами продовжимо знайомитися з бібліотекою jQuery UI. У статті ми дізнаємося, як встановити та налаштувати віджет календаря (datepicker), який ідеально підходить для заповнення поля дати, оскільки замість ручного заповнення дати пропонує симпатичний календарик, в якому можна вибрати потрібну дату.

Отже, наступний на черзі плагін бібліотеки jQuery UI, з яким ми попрацюємо, буде віджет Datepicker (календар). Як випливає з назви, плагін пропонує нам віджет календаря, який можна додати до поля форми для вибору дати.

Навіщо нам може знадобитися цей віджет? Наприклад, у нас є форма реєстрації користувачів, в якій є поле для введення дати народження користувача. При цьому дата народження нам потрібно в строго визначеному форматі. Календар ідеально тут допоможе, оскільки ми не даємо користувачеві вводити дату вручну, а надаємо вибрати дату з календаря, ну а календар вже вставить в поле обрану дату в потрібному форматі.

Це перший і головний з плюсів віджета Datepicker. Другий важливий плюс – це краса. Відвідувачам подобаються різні красиві і незвичайні штуки на сайті, а календар, безумовно, є такою. І хоча багато хто вже звикли до таких календарів, все одно календарі не втратили своєї привабливості, це зручно, практично і красиво. До всього іншого, Календар, як і інші плагіни jQuery UI, встановлюється в лічені хвилини і гнучко настроюється.

Приклади і документацію по плагіну можна знайти на відповідній сторінці документації. У базовому прикладі ми бачимо поле форми, клік по якій викликає компактний календарик.

Библиотека jQuery UI. Виджет календарь

Отже, давайте створимо аналогічне поле для вводу дати на нашій сторінці:

Дата:

Библиотека jQuery UI. Виджет календарь

А тепер, як зазвичай, трохи магії jQuery UI для додавання календаря до наявного поля:

$(function(){
$(«#date»).datepicker();
});

Библиотека jQuery UI. Виджет календарь

Супер! Календар з’явився, плагін Datepicker працює і дуже простий у використанні. Давайте тепер спробуємо вибрати яку-небудь дату, скажімо 31 грудня 2016 року.

Библиотека jQuery UI. Виджет календарь

Дата вибирається і підставляється в полі, от тільки формат дати для нас не дуже звичний. Однак це легко виправити за допомогою налаштувань плагіна Datepicker. Зокрема, нам допоможе опція dateFormat:

$(«#date»).datepicker({
dateFormat: «yy-mm-dd»
});

Библиотека jQuery UI. Виджет календарь

Ось тепер відмінно, дата представлена в більш зрозумілому вигляді – Рік-Місяць-Число. У наступних статтях ми продовжимо знайомитися з іншими плагінами бібліотеки jQuery UI. Ну а поки що все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!