плагин даты jQuery

Caleran — выбор диапазона даты (от — до) с помощью jQuery

«Caleran» – это плагин jQuery, который создан для помощи пользователю с выбором даты. В два клика задается диапазон календарных дней. Несколько разных вариантов оформления.

Также плагин можно использовать как выпадающий список с одной датой. Универсальный инструмент, который решит все вопросы с выбором даты пользователем.

функционал плагина

Плагин является платным. Поэтому Вы можете рассчитывать на 100% поддержку от разработчика + обновления. Даже если Вы не очень разбираетесь в программировании, Вам помогут подключить и настроить jQuery выбор даты для сайта.

Основной файл плагина – caleran.min.js. Он предлагает свыше 20 опций по настройке и отображения всплывающего окна с датами.

Настройка и использование плагина jQuery для выбора даты

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.4.min.js" type="text/javascript"><\/script>')</script>
<!-- файлы плагина -->
<link href="build/css/caleran.min.css" rel="stylesheet"/>
<script src="build/js/moment.min.js"></script>
<script src="build/js/caleran.min.js"></script>
<!-- конец файлов плагина -->

Затем, чтобы определить плагин к конкретному элементы используйте это:

$(".caleran").caleran();

Вы можете настроить плагин с нужным Вам конфигом, используя функцию инициализации:

$(".caleran").caleran({inline: true, startOnMonday: true});

Или укажите это через атрибуты data-plugin-options:

<input class="caleran" data-plugin-options='{"calendarCount":1,"showHeader":true,"showFooter":true}' name="calendar-input" type="text" value="08.08.2017 - 08.09.2017"/>

Все невероятно просто и удобно. Подробнее обо всех опциях, методах и событиях плагина можно узнать на страничке с документацией (ссылка выше).

3386 просмотров