При заполнении форм на сайте требуется указывать дату? Облегчите ввод данных при помощи календаря Air Datepicker. Конечно, для этих целей можно использовать маску ввода, однако она не столь информативна и удобна, ведь пользователю нужно будет вводить эти данные с клавиатуры. Календарь Air Datepicker позволит в несколько кликов получить в поле дату в нужном формате.
Установка
1. Загрузка файлов
Скачайте архив, распакуйте его и загрузите файлы к себе на сайт: datepicker.min.js — в папку js, datepicker.css — в папку css.
2. Установка кода
Теперь подключим эти файлы на сайте. На страницах, где будете использовать календарь, между тегами <head></head> установите код:
Код
<script src="/js/datepicker.min.js"></script>
<link type="text/css" rel="StyleSheet" href="/css/datepicker.css" />
Файл стилей также можно подключить в общий, для этого в панели управления в верхнем баре выберите Дизайн - Управление дизайном (CSS). На открывшейся странице на самой первой строке устанавливаем строку кода:
Код
@import url('/css/datepicker.css');
3. Инициализация
Календарь будет автоматически применен к элементам с классом .datepicker-here. Для ручного вызова воспользуйтесь следующим кодом:
Код
<script>$('.element').datepicker();</script>
Где .element — класс или ID нужного элемента (поля ввода, например).
4. Возможности
Календарь может выводить не только дату, но и время, позволяет выбирать интервалы и обладает большим набором функций. Ознакомиться с полной документацией можно здесь: Air Datepicker.
Приведу пример использования плагина с опциями. Вот такой код не позволит выбрать на календаре дату ранее, чем сегодня:
Код
<script>
$('.element').datepicker({
minDate: new Date()
});
</script>
2017-Мар-18 758 0
2017-Мар-17 682 4
2017-Мар-12 654 0
2017-Мар-07 768 0