Календарь на JavaScript - date dropper

5 августа 2017 Антон Кулешов 1337 0

Сегодня постоянно растёт необходимость в хорошем календаре для сайта – сервисы, организующие различные квесты, развиваются семимильными шагами, и тема очень и очень популярна. Тривиальный пример - это сайт бронирования мест и мероприятий, квестов, зон отдыха, да и просто записи исторических событий. Как всегда, есть два варианта добыть нужный код: писать скрипт самостоятельно или использовать уже готовое решение. Сегодня я предлагаю рассмотреть второй вариант и воспользоваться jQuery плагином date dropper. Данное решение я отношу к разряду must have, оно удобно в использование и просто в настраивании.

Реклама

Перед тем, как рассмотреть плагин, стоит упоминуть о его официальном месте обитания - date dropper. Там же можно найти хорошую документацию по скрипту, где подробно описано как его настроить под себя.

Date dropper обладает хорошим набором преимуществ, о которых далее:

  1. Установка и настройка в пару копи-пастов и кликов;
  2. Меньше возни с JavaScript, все настройки плагина в последней версии вынесены в атрибуты;
  3. Ненужно заморачиваться с переводом, за нас уже всё сделано, стоит только указать какой язык мы хотим в соответствующем параметре;
  4. Набор готовых тем «из коробки»;
  5. На одной странице можно добавить несколько календарей, разбив настройку по дням месяцам и годам.

Теперь, пожалуй, можно попробовать создать простой календарь и первым делам подключим все необходимый стили и скрипты:

<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" />

Мы изменили язык, поменяли формат вывода даты и включили расширенную версию. Результат можно увидеть на странице демо. Получился приятный на вид, а главное удобный для посетителя календарь.

Реклама
Комментариев еще не оставлено
no_avatar