Перед тем, как рассмотреть плагин, стоит упоминуть о его официальном месте обитания - 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" />Мы изменили язык, поменяли формат вывода даты и включили расширенную версию. Результат можно увидеть на странице демо. Получился приятный на вид, а главное удобный для посетителя календарь.
