«Caleran» – это плагин jQuery, который создан для помощи пользователю с выбором даты. В два клика задается диапазон календарных дней. Несколько разных вариантов оформления.
Также плагин можно использовать как выпадающий список с одной датой. Универсальный инструмент, который решит все вопросы с выбором даты пользователем.
Плагин является платным. Поэтому Вы можете рассчитывать на 100% поддержку от разработчика + обновления. Даже если Вы не очень разбираетесь в программировании, Вам помогут подключить и настроить jQuery выбор даты для сайта.
Основной файл плагина – caleran.min.js. Он предлагает свыше 20 опций по настройке и отображения всплывающего окна с датами.
Настройка и использование плагина jQuery для выбора даты
|
1 2 3 4 5 6 7 8 9 |
<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> <!-- конец файлов плагина --> |
Затем, чтобы определить плагин к конкретному элементы используйте это:
|
1 |
$(".caleran").caleran(); |
Вы можете настроить плагин с нужным Вам конфигом, используя функцию инициализации:
|
1 |
$(".caleran").caleran({inline: true, startOnMonday: true}); |
Или укажите это через атрибуты data-plugin-options:
|
1 |
<input class="caleran" data-plugin-options='{"calendarCount":1,"showHeader":true,"showFooter":true}' name="calendar-input" type="text" value="08.08.2017 - 08.09.2017"/> |
Все невероятно просто и удобно. Подробнее обо всех опциях, методах и событиях плагина можно узнать на страничке с документацией (ссылка выше).