jQuery UI календар

40

Від автора: вітаю вас, друзі. У цій статті ми з вами поговоримо про одному з найпопулярніших рішень для організації календаря в поле форми — мова йде про віджеті jQuery UI календар або jQuery UI Datepicker. Приступимо.

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

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

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

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

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

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

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

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

Перевіряємо результат:

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

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

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

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