jQuery календарь

Предположим, что в вашей HTML форме необходимо заполнять дату. Для этого есть текстовое поле ввода и подсказка сообщающая нам формат заполнения. Вручную вбивать дату всегда неудобно, кроме вбивания цифр часто используется разделитель, например точка.

Случаются моменты в юзабилити, когда нужно, например указать число вашего похода в кинотеатр. Вы точно помните что это было в прошлое воскресенье, но число не запомнили. Как вы уже догадались во всех этих случаях на помощь приходит календарь. Плагинов для jQuery - календарей достаточно, но все они различаются как сложностью/простотой интеграции, так и удобством использования.

В своих проектах я всегда использую jQuery календарь - jQuery UI Date Picker, о нем сегодня и хочу рассказать, т.к. отличие календаря от всех остальных - всего два файла, легкая смена стилей, легкая интеграция и настройка.
Рассмотрим самый простой способ интеграции календаря:

// Подключаем файлы и сам jquery
<script src="jquery.js" type="text/javascript"></script>
<script src="jdate.js" type="text/javascript"></script>
<link rel="stylesheet" href="jdate.css" type="text/css />
// Поле ввода даты
<input type="text" name="date" id="formDate" />
// Прикрепляем календарь к полю ввода даты
<script type="text/javascript">
	$(document).ready(function(){
		$("#formDate).attachDatepicker();
	});
 </script>

Все! Теперь по клику поля ввода даты - будет появляться календарь.

Так же можно задавать опции, тогда код вызова календаря будет такой:

$("#formDate").attachDatepicker({
rangeSelect: true,
dateFormat: "yy-mm-dd",
yearRange: "2000:2010",
firstDay: 1
});

Вообще у календаря настроек очень много, достаточно заглянуть в файл jdate.js.

Скачать исходные коды календаря jQuery.

(5 votes, average: 5,00 из 5)

 Loading ...