От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Давайте поработаем с еще одним плагином – речь идет о расширении jQuery календарь под названием DateDropper. Уверен, вам понравится этот jQuery календарь даты – смотрится он очень интересно.
В сети можно найти множество различных видов плагинов jQuery календарь для выбора даты. Это и известные jQuery UI календарь, и jQuery календарь даты для Bootstrap, и десятки других календарей. Мы сегодня рассмотрим один из таких плагинов jQuery календаря даты.
Итак, познакомиться с документацией к плагину jQuery календарь и примерами его использования можно на этом сайте. Там же можно и скачать сам плагин календаря. Также можете взять его файлы из исходников статьи. Подключим файл стилей и сам скрипт календаря.
|
1 2 3 |
<link href="css/datedropper.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/datedropper.js"></script> |
Теперь нам потребуется поле для ввода некоторой даты, именно к этому полю мы и прикрутим jQuery календарь.
|
1 |
<input type="text" class="form-control" id="date"> |
Осталось инициализировать плагин вызовом метода dateDropper().
|
1 2 3 |
$(function(){ $('input').dateDropper(); }); |
Посмотрим, получилось ли у нас что-то. Для этого кликнем по полю формы.
Великолепно! Плагин jQuery календарь работает и смотрится очень круто. При наведении на элемент даты (месяц, число, год) появляются стрелки влево и вправо, которые позволяют листать соответствующие части даты. Также мы можем сделать быстрый выбор просто кликнув по нужному сегменту, например кликнем по месяцу.
В общем, все интуитивно понятно и, главное, полученный календарь смотрится очень оригинально. Также плагин jquery datedropper имеет множество опций, с полным списком которых можно ознакомиться в документации. Например, давайте русифицируем плагин и изменим формат даты, которая будет добавлена в поле даты после выбора:
|
1 2 3 4 5 6 |
$(function(){ $('input').dateDropper({ lang: 'ru', format: 'd-m-Y' }); }); |
После этого календарик будет русифицирован:
И выбранная дата примет привычный нам формат: день-месяц-год.
Надеюсь, данный вариант jQuery календаря вам пришелся по нраву, и вы найдете ему применение. На этом у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!
