Сайт ищет нового владельца по разумной цене :) По всем вопросам: promonik1@ya.ru, skype: nik-luck007, https://vk.com/promonik
2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии
Подключаем календарь в формах для uCoz

Подключаем календарь в формах для uCoz

Скрипты для uCoz 2017-Фев-11 proucoz 324 11 0

При заполнении форм на сайте требуется указывать дату? Облегчите ввод данных при помощи календаря 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>
Источник: http://t1m0n.name/air-datepicker/docs/index-ru.html
0 комментариев
avatar