Using the Date Picker in CFV4 RC2.0

[GreyHead]

Hi,

It looks as though the DatePicker has become the most difficult element to configure in ChronoForms V4 and also that it may have some bugs. In this post I'll try to draw together some the information that I can gather from posts in the forums and my own tests.

Background

The DatePicker uses the JavaScript created by MonkeyPhysics and documented here. It's a fairly flexible MooTools date and time picker but hasn't been updated for a while and may not be fully compatible with the more recent MooTools 1.3 library used in Joomla! 1.6/1.7. There is a forked version here that is compatible with MooTools 1.3 but may not run correctly with earlier releases of MooTools on Joomla! 1.5 the recent releases of CFv4 include this as an option you can select on the form General tab.

Note: the following notes are from the ChronoForms v4 RC2.0 release - earler releases and different settings and code.

The Basic DatePicker

If you drag an DatePicker Element into the Form Wizard preview window and save it with the default settings it has this set of characteristics (and maybe some others too).

1. The language is English
2. All dates are selectable
3. A new form shows an empty input
4. The date displayed is in yyyy-mm-dd format e.g. 2011-10-15
5. The date submitted is in yyyy-mm-dd format e.g. 2011-10-15
6. The date picker is enabled
7. The time picker is disabled

Basic settings

The DatePicker element only has two settings that affect the picker:

Enable Time Picker: this shows a time picker after the calendar

1. The language is English
2. All dates are selectable
3. A new form shows an empty input
4. The date displayed is in dd-mm-yyyy hh:mm:ss format e.g. 16-10-2011 15:18:26
5. The date submitted is in yyyy-mm-dd hh:mm:ss format e.g. 2011-10-16 15:18:26
6. The date picker is enabled
7. The time picker is enabled

NB; The displayed and submitted formats are independent. Changing one does not affect the other.

Time Picker Only this disables the datepicker

1. The language is English
2. All dates are selectable
3. A new form shows an empty input
4. The date displayed is in hh:mm:ss format e.g. 15:18:26
5. The date submitted is in hh:mm:ss format e.g. 15:18:26
6. The date picker is disabled
7. The time picker is enabled

Note : if Time Picker Only is selected the Enable Time Picker makes no difference.

DateTime Picker config

This is an options box at the bottom of the Form General tab (click the form Name link in the Forms Manager to open it).

This box allows you to apply some options (see the Monkey Physics link above) to all 'default' datepicker inputs. It should not affect inputs using the Custom settings (see below) - but there may still be some bugs

Some examples

• format: 'd M Y' changes the displayed format e.g. 14 Oct 2011
• inputOutputFormat: 'j F Y' changes the submitted format e.g. 2 October 2011
• allowEmpty: false sets the new form to display today's date by default instead of a empty input.
• days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] changes the day names used in the datepicker (but not the submitted language)
• yearPicker: true enables a year picker view (click the yellow header year twice to open)
• startView: 'decades' opens the datepicker with a display of years to choose from
• . . .

Where it makes sense these options can be concatenated in a comma separated list.

Note : The minDate and MaxDate options work correctly in Joomla! 1.5 but not in Joomla! 1.6/1.7. This may be true for others as well.

Coming shortly . . . the Custom DatePicker action

Bob

[GreyHead]

Important: Form ChronoForms v4 RC3.2 the MooTools DatePicker is installed for Joomla! 1.6-2.5 and can be selected on the form General tab.
Please use that option if possible. You no longer need the changes posted here.

Part 2

As we saw in Part 1 the MonkeyPhysics datepicker class has some problems with MooTools 1.3

There is a forked version the "MooTools-DatePicker" that has more features and will work with MooTools 1.3 (but not with MooTools 1.2 or earlier in the code used here).

Installing the MooTools Date Picker
For Joomla! 1.6/1.7 only !!!

1. Download the attached zip file and copy the contents to the components/com_chronoforms/js/datepicker folder on your site. There will already be a datepicker.js file there that you can leave in place.
   
   Note that these files are slightly modified from the standard distribution. I modified the CSS to stop it breaking in the Beez template.
   
   
2. Open the administrator/components/com_chronoforms/form_actions/show_html/cfaction_show_htmp.php file in an editor and find the _loadDatePickerScripts($form) function at about line 225. Comment out the existing function by putting /* before it and */ after it (around line 272). Copy and paste in the following replacement function below. Save the file.
   
3. Test with a simple form that the standard datepicker is still working OK

Note that there are some important differences in the Options formatting. So far I've noticed:

1. Date formatting uses the MooTools Date Object formats e.g. '%d-%m-%Y %H:%M:%S'
   
2. There is only a single format used for display and submission - the inputOutputFormat option is no longer used
   
3. The timePickerOnly option is no longer valid, use viewOnly: 'time' instead.
   
4. There are three included dashboard display options, you can switch between them at the moment by uncommenting one of the lines in the function below.
   
5. . . .

Oh and the minDate options does now work in Joomla! 1.7.

Bob

+++++

The replacement _loadDatePickerScripts() function

Code: Select all

   function _loadDatePickerScripts($form)
   {
      $document =& JFactory::getDocument();
      JHTML::_('behavior.mootools');
      $mainframe =& JFactory::getApplication();
      $uri =& JFactory::getURI();
      $cf_url = ($mainframe->isSite()) ? JURI::Base() : $uri->root();
      $cf_url .= 'components/com_chronoforms/js/datepicker/';
      
      // you can change the uncommented line here to change the style
      $datepicker_style = 'datepicker_dashboard';
      //$datepicker_style = 'datepicker_jqui';
      //$datepicker_style = 'datepicker_vista';
      $document->addStyleSheet($cf_url.$datepicker_style.'/'.$datepicker_style.'.css');
      $document->addScript($cf_url.'Locale.en-US.DatePicker.js');
      $document->addScript($cf_url.'Picker.js');
      $document->addScript($cf_url.'Picker.Attach.js');
      $document->addScript($cf_url.'Picker.Date.js');
      
      $settings = array();
      
      // Settings for standard date picker
      $settings[1]['class'] = '.cf_date_picker';
      $settings[1]['options'] = array(
         "pickerClass: '{$datepicker_style}'",
         "format: '%Y-%m-%d'",
         "allowEmpty: true",
         "useFadeInOut: !Browser.ie"
      );
      
      // Settings for standard date + time picker
      $settings[2]['class'] = '.cf_datetime_picker';
      $settings[2]['options'] = array(
         "pickerClass: '{$datepicker_style}'",
         "format: '%d-%m-%Y %H:%M:%S'",
         "timePicker: true",
         "allowEmpty: true",
         "useFadeInOut: !Browser.ie"
      );
      
      // Settings for standard time picker
      $settings[3]['class'] = '.cf_time_picker';
      $settings[3]['options'] = array(
         "pickerClass: '{$datepicker_style}'",
         "format: '%H:%M:%S'",
         "pickOnly: 'time'",
         "allowEmpty: true",
         "useFadeInOut: !Browser.ie"
      );
      
      $datepicker_ext = $form->form_params->get('datepicker_config', '');
      $script = "";
      foreach ( $settings as $s ) {
         $options = implode(', ', $s['options']);
         if ( $datepicker_ext ) {
            $options .= ', '.$datepicker_ext;
         }
         $script .= "
new Picker.Date($$('{$s['class']}'), {
   {$options}
});
         ";
      }
      $script = "
window.addEvent('load', function() {
   {$script}
});
      ";

      if ( (bool)$form->form_params->get('dynamic_files', 0) === false ) {
         $document->addScriptDeclaration($script);
      } else {
         //load the action class
         $form->loadActionHelper('load_js');
         $CfactionLoadJsHelper = new CfactionLoadJsHelper();
         $JSactiondata = new stdClass();
         $JSactiondata->content1 = $script;
         $JSParams = new JParameter('');
         $JSParams->set('dynamic_file', $form->form_params->get('dynamic_files', 0));
         $JSactiondata->params = $JSParams->toString();
         $CfactionLoadJsHelper->load($form, $JSactiondata);
      }
   }

Files in js/datepicker folder

Code: Select all

datepicker_dashboard
  buttons.png
  datepicker_dashboard.css
  frame.png
datepicker_jqui
  arrows.png
  datepicker_jqui.css
  frame.png
datepicker_vista
  buttons.png
  datepicker_vista.css
  days.png
  frame.png
  months.png
  years.png
datepicker.css
datepicker.js << existing file
Locale.cs-CZ.DatePicker.js
Locale.de-DE.DatePicker.js
Locale.en-GB.DatePicker.js
Locale.en-US.DatePicker.js
Locale.es-ES-DatePicker.js
Locale.fr-FR.DatePicker.js
Locale.he-IL.DatePicker.js
Locale.it-IT.DatePicker.js
Locale.nl-NL.DatePicker.js
Locale.pl-PL.DatePicker.js
Locale.pt-BR.DatePicker.js
Locale.ru-RU.DatePicker.js
Picker.js
Picker.Attach.js
Picker.Date.js
Picker.Date.Range.js

[GreyHead]

Hi,

I've locked this topic and opened a new thread here for discussion. This is just to keep the reference content a bit cleaner and easier to access.

Bob

[GreyHead]

Variable start and end dates with the MooTools DatePicker

If you use the MooTools Datepicker then you can specify fixed start and finish dates with options like these in the Date Time Picker config box:

Code: Select all

minDate: '2011-1-19', maxDate: '2011-10-24'

You can also specify variable dates using the MooTools Date object. To specify a start date of today and block all past dates for example

Code: Select all

minDate: new Date()

To specify a variable date in the future you can use the increment method. This makes the start date four days in the future.

Code: Select all

minDate: new Date().increment('day', 4)

Similalry to specify a variable date in the past you can use the decrement

Code: Select all

minDate: new Date().decrement('day', 4)

These methods will accept 'year', 'month', 'week', 'day', 'hour', 'minute', 'second', and 'ms'

Bob

[GreyHead]

Multi-language DatePickers

The MooTools DatePicker* is easy, it comes with Locale files (see below). Set the Date Locale in a Load JS action using the current language tag.

Code: Select all

<?php
$lang =& JFactory::getLanguage();
$tag = $lang->getTag();
echo "Locale.use('{$tag}');";
?>

The current list of Date Locales is: "en-US", "ar", "ca-CA", "cs-CZ", "da-DK", "de-DE", "de-CH", "EU", "en-GB", "es-ES", "es-AR", "et-EE", "fa", "fi-FI", "fr-FR", "he-IL", "hu-HU", "it-IT", "ja-JP", "nl-NL", "no-NO", "pl-PL", "pt-PT", "pt-BR", "ru-RU", "ru-RU-unicode", "si-SI", "sv-SE", "uk-UA", "zh-CHS", "zh-CHT". If a language you need isn't here you can define a new one (see this post about adding a Turkish tr-TR Date Locale).

The MonkeyPhysics DatePicker* takes a bit more coding.

1. On the Form General tab | DateTime Picker config box add these options:

   Code: Select all

   days: days_array, months: months_array

   
   
2. In a Load JS action add the following code to define the days_array and months_array

   Code: Select all

   var days_array = new Array(#DAYS#);
var months_array = new Array(#MONTHS#);

   
   
3. In the Multi-Language actions define the matching language strings:

   Code: Select all

   #DAYS#='Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'
#MONTHS#='Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio​​', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'

07-04-2012 21-53-27.png (17.22 KiB) Viewed 5703 times

Because the autocomplete action of some browsers can get in the way of the date-picker it can help to set it off. ChronoForms doesn't allow you to add extra elements to the inputs directly but you can do it with JavaScript:

Code: Select all

window.addEvent('domready', function() {
  $('start_date').setProperty('autocomplete', 'off');
});

Bob


* The MooTools DatePicker is an option in ChronoForms v4 for Joomla! 1.6/1.7/2.5. The MonkeyPhysics DatePicker is the default for ChronoForms v4 in Joomla! 1.5 and 1.6/1.7/2.5.