Это расширение (плагин) для системы управления сайтом Cotonti. Цель этого расширения заменить стандартные элементы интерфейса для выбора даты/времени на более удобные и современные.
Стандартные для Cotonti элементы выбора даты/времени представляют из себя набор выпадающих меню, через которые пользователь может выбрать дату последовательно установив год, месяц, день, часы, минуты. Данный плагин призван заменить отдельные выпадающие меню на единые поля выбора даты и времени, позволяя при этом либо ввести дату/время в привычном формате (дд.мм.гггг чч:мм), либо быстро «в один клик» выбрать их, используя простые и понятные всплывающие элементы управления.
- Единое поле для выбора даты и времени
- Ввод данных в привычном формате, либо быстрый выбор через всплывающий элемент управления
- Поддержка интернационализации элемента выбора дат (формат даты, названия дней и месяцев)
- Т.к написан с использованием jQueryUI позволяет использовать темы jQueryUI (и переключать их на лету через ThemeRoller)
- По умолчанию загружается при добавлении/редактировании страниц и при редактировании профилей пользователей
- Дополнительный режим отслеживания элементов дата/время на всех страницах
- Поддерживает работу с экстра полями
- Cotonti Siena (0.9.x).
- jQuery версии 1.6 или выше
- Библиотека jQueryUI (поставляется с плагином) с компонентами
datepickerиslider.
Демонстрацию работы плагина можно увидеть здесь: Демо-страничка на ГитХаб
Текущая версия использует:
- jQueryUI (версии 1.10.3 с темой оформления Redmond, доп.темы можно скачать с сайта).
- jquery.timepicker.js - Timepicker плагин для jQuery от Trent Richardson (используется начиная с версии 1.6.0 расширения UI_datetime)
Плагин не требует специальных настроек и работает сразу после установки.
Протестирован на следующих темах оформления Nemesis, HTML Kickstart,
SymiSun-03 и должен работать на всех шаблонах или расширениях, которые
используют стандартные для Cotonti механизмы формирования элементов выбора
даты/времени (функцию cot_selectbox_date и массив ресурсов
$R['input_date*'].
Если вы все же не используете стандартные средства формирования полей для выбора даты/времени, то прочтите следующий подраздел, для понимания как настроить свой код для правильной работы этого расширения.
В двух словах плагин работает следующим образом - стандартные (старые) элементы скрываются от пользователя через внедренные (inline) стили, но продолжают оставаться на странице для полноценной передачи параметров на сервер при отправке страницы (сохранении данных). А новые элементы, использующие jQueryUI динамически создаются на месте «старых».
Реализовано это достаточно просто, путем замены стандартных строк ресурсов
$R['input_date'] и $R['input_date_short'], которые являются шаблонами для
формирования элементов интерфейса.
Плагин ui_date/time использует следующий ('short') шаблон для даты:
<div class="uidt mode-date" style="display:inline;">
<div class="common_date" style="display:none;">
{$day} {$month} {$year}
</div>
<div style="display:inline;" class="date_target">
</div>
</div>
Основные преобразования интерфейса происходят после загрузки страницы.
JS скрипт ищет на загруженной странице все блоки с классами uidt,
анализирует их и связывает с новыми элементами, которые
создаются в контейнерах с классами date_target и time_target соответственно.
Вид «новых» элементов ввода (<input>) определяется шаблоном. См. секцию NEWINPUT
в файле ui_datetime.tpl:
<!-- BEGIN: NEWINPUT -->
<input class="ui_input_tpl form-control" type="text" value="" /></div>
<!-- END: NEWINPUT -->
Здесь вы можете переопределить вид элемента ввода, добавив классы или добавив дополнительный html код.
Расширение так же поддерживает работу с экстра полями. Поэтому если вы, например к страницам, добавите
экстраполе с типом datetime, и включите соответствующий тег в шаблоны (page.add.tpl page.edit.tpl),
расширение автоматически их обработает и преобразует к новому виду.
Для полей ввода с помощью шаблона можно задать для поля ввода значение времени по умолчанию.
Задается это значение смещением в секундах относительно текущего момента и указывается в атрибуте
data-set-time в главном блоке (.uidt):
<div class="uidt mode-datetime-combined" data-set-date="+3600">...
По умолчанию (для снижения нагрузки на сервер) расширение загружается и работает только на страницах добавления/редактирования статей и при редактировании профиля пользователей. Вы можете включить режим global mode в настройках, тогда расширение будет загружаться на всех страницах и отслеживать все поля ввода дат/времени, вне зависимости от установленных или используемых расширений.
- Распаковать архив, скопировать файлы в корневую папку сайта (при этом файлы из папка JS должны попасть в папку JS сайта, а файлы из папки plugins соответственно в plugins).
- Установить через панель Администрирования → Расширения (
Управление сайтом→Расширения) - Если вы уже используете jQueryUI в своем проекте - укажите путь к файлам в настройках плагина.
!Внимание: Если вы обновляете плагин версии младше 1.6.0 на версию 1.6.0 и старше, то
потребуется полная деинсталляция плагина, и повторная установка. Обновить плагин через нажатие кнопки
«Обновить» может быть не достаточно (или как минимум проверьте актуальность пути к файлам новой
библиотеки js/time_picker). Обратите внимание, что в новой версии используется новая библиотека
time_picker для отображения диалога выбора времени. Файлы старой библиотеки time_pickr можно удалить.
Если вы произвели установку плагина на Cotonti версии ниже 0.9.14 и у вас ничего не работает — попробуйте один из более старых релизов плагина GitHub.
После установки вы можете увидеть работу и протестировать расширение
на странице инструментов администрирования (Управление сайтом → Расширения
→ UI date/time picker → Администрирование). В настройках плагина Вы можете
отдельно включить/отключить элементы для выбора даты и времени.
- Cotonti.com -- Сайт CMF Cotonti
- Discussion -- Обсуждение плагина (русская ветка форума)
- Discussion -- Обсуждение плагина (английская ветка форума)