От автора: приветствую вас, друзья. В этой статье мы с вами поговорим об одном из популярнейших решений для организации календаря в поле формы — речь идет о виджете jQuery UI календарь или jQuery UI Datepicker. Приступим.
Исходные файлы текущей статьи вы можете скачать по ссылке.
Как уже отмечалось в предыдущей статье, календарь для поля даты — практически неотъемлемый атрибут любой формы. Это и неудивительно, ведь календарь добавляет некоторую изюминку форме, избавляет пользователя от необходимости лишний раз кликать по клавишам.
Кроме того, календарь имеет и чисто практическую пользу, поскольку позволяет стандартизировать формат даты, получаемой от пользователя. Понятно, что от проверки формата даты на стороне сервера мы не избавляемся, но тем не менее.
Виджет Datepicker от библиотеки jQuery UI является отличным выбором и одним из первых решений по добавлению календаря к полям формы. Попробуем воспользоваться им. Начнем, как обычно, с получения и подключения библиотеки. Для работы используем простейшую форму с полем для ввода даты.
Перед скачиванием библиотеки можно выбрать только нужные вам виджеты и компоненты. Также можно выбрать тему оформления. Я оставлю полный комплект библиотеки и выберу тему Flick. Также вы можете даже сконструировать собственную тему, ну или изменить ее через стили самостоятельно.
Подключаем файл стилей и js библиотеки:
|
1 2 |
<link rel="stylesheet" href="ui/jquery-ui.css"> <script src="ui/jquery-ui.js"></script> |
Осталось инициализировать календарь. Для этого используем метод datepicker для поля формы:
|
1 2 3 |
$(function(){ $( "#date" ).datepicker(); }); |
Проверяем результат:
Просто замечательно. Буквально несколько минут времени, и мы получили симпатичный календарь для формы. Осталось произвести необходимые настройки календаря. Для этого достаточно передать нужные опции в метод datepicker.
Собственно, мне достаточно лишь изменить формат даты на более привычный нам:
|
1 2 3 4 5 |
$(function(){ $( "#date" ).datepicker({ dateFormat: "dd.mm.yy" }); }); |
Попробуйте другие опции и настройте календарь на свой вкус — это просто. На этом все. Удачи!
