Jquery ui календар

Вихідні файли поточної статті ви можете завантажити за посиланням.

Як уже зазначалося в попередній статті, календар для поля дати - практично невід'ємний атрибут будь-якої форми. Це й не дивно, адже календар додає деяку родзинку формі, позбавляє користувача від необхідності зайвий раз клікати по клавішах.

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

Віджет Datepicker від бібліотеки jQuery UI є відмінним вибором і одним з перших рішень по додаванню календаря до полів форми. Спробуємо скористатися ним. Почнемо, як завжди, з отримання та підключення бібліотеки. Для роботи використовуємо найпростішу форму з полем для введення дати.

Jquery ui календар

Практичний курс по верстці адаптивного Лендінзі з нуля!

Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів

Перед скачуванням бібліотеки можна вибрати тільки потрібні вам віджети і компоненти. Також можна вибрати тему оформлення. Я залишу повний комплект бібліотеки і виберу тему Flick. Також ви можете навіть сконструювати власну тему, ну або змінити її через стилі самостійно.

Підключаємо файл стилів і js бібліотеки:

Залишилося форматувати календар. Для цього використовуємо метод datepicker для поля форми:

Jquery ui календар

Просто чудово. Буквально кілька хвилин часу, і ми отримали симпатичний календар для форми. Залишилося зробити необхідні настройки календаря. Для цього достатньо передати потрібні опції в метод datepicker.

Власне, мені достатньо лише змінити формат дати на більш звичний нам:

Спробуйте інші опції і налаштуйте календар на свій смак - це просто. На цьому все. Успіхів!

Jquery ui календар

Практичний курс по верстці адаптивного Лендінзі з нуля!

Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі

Схожі статті