Сегодня постоянно растёт необходимость в хорошем календаре для сайта – сервисы, организующие различные квесты, развиваются семимильными шагами, и тема очень и очень популярна. Тривиальный пример - это сайт бронирования мест и мероприятий, квестов, зон отдыха, да и просто записи исторических событий. Как всегда, есть два варианта добыть нужный код: писать скрипт самостоятельно или использовать уже готовое решение. Сегодня я предлагаю рассмотреть второй вариант и воспользоваться jQuery плагином date dropper. Данное решение я отношу к разряду must have, оно удобно в использование и просто в настраивании.
Перед тем, как рассмотреть плагин, стоит упоминуть о его официальном месте обитания - date dropper. Там же можно найти хорошую документацию по скрипту, где подробно описано как его настроить под себя.
Date dropper обладает хорошим набором преимуществ, о которых далее:
- Установка и настройка в пару копи-пастов и кликов;
- Меньше возни с JavaScript, все настройки плагина в последней версии вынесены в атрибуты;
- Ненужно заморачиваться с переводом, за нас уже всё сделано, стоит только указать какой язык мы хотим в соответствующем параметре;
- Набор готовых тем «из коробки»;
- На одной странице можно добавить несколько календарей, разбив настройку по дням месяцам и годам.
Теперь, пожалуй, можно попробовать создать простой календарь и первым делам подключим все необходимый стили и скрипты:
<link href="datedropper.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="datedropper.min.js"></script>
Добавляем input через который пользователь будет менять дату:
<input type="text" />
А после воспользуемся новым методом dateDropper();
$("input").dateDropper();
Вот и всё, изначально мы получим дефолтную версию на английском языке. Предлагаю настроить календарь, добавив несколько параметров:
<input type="text" data-lang="ru" data-format="d-m-Y" data-large-default="true" data-large-mode="true" />
Мы изменили язык, поменяли формат вывода даты и включили расширенную версию. Результат можно увидеть на странице демо. Получился приятный на вид, а главное удобный для посетителя календарь.