регистрация
856материалов
3297комментариев
235тем на форуме
6899пользователей

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


Описание:

Если у Вас на сайте при заполнении форм требуется указывать дату, то данное решение именно для Вас. Хочу представить Вам легкий (~36kb минифицированный js файл и ~9kb gziped), кастомизируемый, кроссбраузерный календарь, написан с использованием es5 и css flexbox . Работает во всех современных браузерах: IE 10+, Chrome, Firefox, Safari 8+, Opera 17+. Как уже было сказано выше, данный вид календаря для форм очень легок и прост в установке, но на сайте первоисточника (разработчика) есть плюшки и для продвинутых пользователей системы

Установка:

  • 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>

Для продвинутых:

Для более продвинутых пользователей системы uCoz, полная инструкция и дополнения к календарю можете посмотреть здесь


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 22.02.2017 в 18:00
Материал просмотрен: 436 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 3 комментария

Пожаловаться
Сказать спасибо
Источник

3 комментария


Unbearable
Debora Richter @Unbearable 22.02.2017 18:541
0
Полезная вещь, особенно здесь на сайте может пригодится
promonik1
А источник указывать стало не модно? Текст описания копировать тоже в порядке вещей?

https://proucoz.site/scripts/air-datepicker
drn
Роман Домнин @drn 01.03.2017 14:593
+1
Источник указан, описание не брали, взяли только инструкцию по установке.
avatar
uLike – кнопка «Мне нравится»
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0