UI_datetime

(перейти на демонстрационную страницу)

Это расширение (плагин) для системы управления сайтом Cotonti. Цель этого расширения заменить стандартные элементы интерфейса для выбора даты/времени на более удобные и современные, использующие jQueryUI.

#1. Описание

Стандартные для Cotonti элементы выбора даты/времени представляют из себя набор выпадающих меню, через которые пользователь может выбрать дату последовательно установив год, месяц, день, часы, минуты. Данный плагин призван заменить отдельные выпадающие меню на единые поля выбора даты и времени, позволяя при этом либо ввести дату/время в привычном формате (дд.мм.гггг чч:мм), либо быстро «в один клик» выбрать их, используя простые и понятные всплывающие элементы управления.

#2. Функционал

• Единое поле для выбора даты
• Единое поле для выбора времени
• Ввод данных в привычном формате, либо быстрый выбор через всплывающий элемент управления
• Поддержка интернационализации элемента выбора дат (формат даты, названия дней и месяцев)
• На основе библиотеки jQueryUI
• Позволяет использовать темы jQueryUI (и переключать их на лету через ThemeRoller)
• По умолчанию загружается при добавлении/редактировании страниц и при редактировании профилей пользователей
• Дополнительный режим отслеживания элементов дата/время на всех страницах

#2.1. Комментарии

Плагин не требует специальных настроек и работает сразу после установки. Протестирован на следующих темах оформления Nemesis, HTML Kickstart, SymiSun-03 и должен работать на всех шаблонах или расширениях, которые используют стандартные для Cotonti механизмы формирования элементов выбора даты/времени (функцию cot_selectbox_date и массив ресурсов $R['input_date*'].

Если вы все же не используете стандартные средства формирования полей для выбора даты/времени, то прочтите следующий подраздел, для понимания как настроить свой код для правильной работы этого расширения.

#2.2. Как это работает

В двух словах плагин работает следубщим образом - стандартные (старые) элементы скрываются от пользователя через внедренные (inline) стили, но продолжают оставаться на странице для полноценной передачи параметров на сервер при отправке страницы (сохранении данных). А новые элементы, использующие jQueryUI динамически создаются на месте «старых».

Реализовано это достаточно просто, путем замены стандартных строк ресурсов $R['input_date'] и $R['input_date_short'], которые являются шаблонами для формирования элементов интерфейса.

Плагин ui_date/time использует следующий ('short') шаблон для даты:

<div class="uidt_date">{$day} {$month} {$year}</div>
<div class="uidt_datetarget"></div> 

(Для подробностей см. ui_datetime.rc.php.)

Основные преобразования интерфейса происходят после загрузки страницы. JS скрипт ищет на загруженной странице все элементы с классами uidt_date и uidt_time, анализирует их и связывает с новыми элементами, которые создаются в контейнерах с классами uidt_datetarget и uidt_timetarget соответственно.

По умолчанию (для снижения нагрузки на сервер) расширение загружается и работает только на страницах добавления/редактирования статей и при редактировании профиля пользователей. Вы можете включить режим global mode в настройках, тогда расширение будет загружаться на всех страницах и отслеживать все поля ввода дат/времени, вне зависимости от установленных или используемых расширений.

#3. Установка и настройка

• Распаковать архив, скопировать файлы в корневую папку сайта (при этом файлы из папка JS должны попасть в папку JS сайта, а файлы из папки plugins соответственно в plugins).
• Установить через панель Администрирования → Расширения (Управление сайтом → Расширения)
• Если вы уже используете jQueryUI в своем проекте - укажите путь к файлам в настройках плагина.

#3.1. Комментарии

После установки вы можете увидеть работу и протестировать расширение на странице инструментов администрирования (Управление сайтом → Расширения → UI date/time picker → Администрирование). В настройках плагина Вы можете отдельно включить/отключить элементы для выбора даты и времени.

#3.2. Файлы

Плагин в находится разработке. Последнию версию вы всегда можете скачать на GitHub: https://github.com/macik/cot_ui_datetime

Там же более полная и актуальная инструкция.