UI_date/time

Plugin for Cotonti CMF. It replaces common date/time selection controls with unified pretty style jQueryUI controls.

Authors: Andrey Matsovkin (https://github.com/macik), Alexey Kalnov (https://github.com/Alex300)
GitHub: https://github.com/Alex300/ui_datetime

#1. Description

Current date/time selection controls are presented as several separated dropdown select box. Separate for year, month, day for date and hour, minutes for time. The plugin hides this controls and bring to user unified one input field for date and one field for time respectively. In addition this fields supplied with easy-to-use dropdown UI controls to selec date/time in one-click.

#2. Features

• Unified input field for date selections
• Unified input field for time selections
• User friendly pop-up UI control attached for fast selection of date time
• I18n for date and time picker control (date format, month and day of weeks names)
• Using jQueryUI library
• jQueryUI ThemeRoller ready
• By default working in add/edit page, edit users, user profile, search options.
• Optional mode to track standard Cotonti date/time controls and replace with new one regardless opened page or extension

#3. Requirements

• Works with Cotonti Siena (0.9.x branch).
• Required jQuery to be updated to version 1.6 or higher
• Required jQueryUI (distributed with extension or your custom buld with at least datepicker and slider wigits)

#4. Version info

Current version uses:

• jQueryUI (version 1.10.3 with Redmond theme).
• jquery.timepicker.js - Timepicker jQuery plugin by Trent Richardson (from 1.6.0 version of UI_datetime)

#4.1. Comments

Plugin must works out from the box. Tested on Nemesis, HTML Kickstart, SymiSun-03 themes and must work on most common themes or extension that uses standard date/time controls that relies on cot_selectbox_date function and $R['input_date*'] resource strings.

But if your use highly customized theme or your custom resource strings ($R['input_date*']) than extension may work uncorrectly.

#5. How extension works

Old style controls simply hides with inline styles but still work as input fields for transfer parameters to server (while you save the data). New fancy style UI controls use jQuery UI library and dynamically added in pages in specially marked DIV containers.

Simply it maked by changing controls template in resource strings $R['input_date'] and $R['input_date_short'].

The default ui_date/time template for 'short' date is:

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

(See ui_datetime.global.php for details.)

Most part of magic happened after page loads. JS script searches for elements with uidt_date and uidt_time class then parse it and linked with new controls added in block with class uidt_datetarget and uidt_timetarget class respectively.

By default extension tracks controls only on these pages: add/edit page, edit users, user profile. You can switch on global mode in settings for trace all controls on all pages, but it's not recommened because will load extension files all the time.

#5.1. Comments

This implementation was relevant in older versions of Cotonti. In the modern versions, the cot_import_date() function can parse string dates and convert them to an integer timestamp. Supported date and time formats: https://www.php.net/manual/en/datetime.formats.php

#6. Install

• Unpack, copy files to root folder of your site.
• Install via Admin → Extensions menu (Administration panel → Extensions)
• If you already use jQueryUI in your project than setup path for jQueryUI library in ui_datetime settings. If you use custom downloaded bundle of jQueryUI - be sure this lib include datepicker and slider wigits required for date/time picker and its version higher than 1.8.0.

!Note: If you upgrade extension from version prior to 1.6.0 make full uninstall previous version through admin panel and install new one. Do not update it with «update» button, or be sure to check actual path for new timepicker library. After that you can delete old js time picker library time_pickr (./js/time_pickr - old folder for deletion. ./js/time_picker is new one. Do not delete).

#6.1. Comments

After install you can see and test extension on Admin → Tools page (Administration panel → Extensions → UI date/time picker → Administration). You can Enable/Disable date and time controls separately via settings.

#7. References

• Discussion -- Forum thread about extension (in russian)
• Discussion -- Forum thread about extension (in english)