Tue May 3, 2016, 10:01 pm
 Announcement  Locked  4  31048
Showing 1 to 5 of 5 entries.


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.


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
  8. [/list:o]

    Basic settings

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

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


  9. The language is English
  10. All dates are selectable
  11. A new form shows an empty input
  12. The date displayed is in dd-mm-yyyy hh:mm:ss format e.g. 16-10-2011 15:18:26
  13. The date submitted is in yyyy-mm-dd hh:mm:ss format e.g. 2011-10-16 15:18:26
  14. The date picker is enabled
  15. The time picker is enabled
  16. [/list:o]

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

    Time Picker Only this disables the datepicker


  17. The language is English
  18. All dates are selectable
  19. A new form shows an empty input
  20. The date displayed is in hh:mm:ss format e.g. 15:18:26
  21. The date submitted is in hh:mm:ss format e.g. 15:18:26
  22. The date picker is disabled
  23. The time picker is enabled
  24. [/list:o]

    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


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

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


ChronoForms technical support

If you'd like to buy me a coffee or two, thank you very much

44090 54260
Tue May 29, 2007, 6:15 pm

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


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

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

  • Test with a simple form that the standard datepicker is still working OK
  • [/list:o]

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


  • Date formatting uses the MooTools Date Object formats e.g. '%d-%m-%Y %H:%M:%S'

  • There is only a single format used for display and submission - the inputOutputFormat option is no longer used

  • The timePickerOnly option is no longer valid, use viewOnly: 'time' instead.

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

  • . . .
  • [/list:o]

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



    The replacement _loadDatePickerScripts() function

    Code: Select all    
     function _loadDatePickerScripts($form)
      $document =& JFactory::getDocument();
      $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';
      $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']}'), {
      $script = "
    window.addEvent('load', function() {

      if ( (bool)$form->form_params->get('dynamic_files', 0) === false ) {
      } else {
       //load the action class
       $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.js << existing file 

    ChronoForms technical support

    If you'd like to buy me a coffee or two, thank you very much

    44090 54260
    Tue May 29, 2007, 6:15 pm


    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.


    ChronoForms technical support

    If you'd like to buy me a coffee or two, thank you very much

    44090 54260
    Tue May 29, 2007, 6:15 pm

    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:

    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

    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.

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

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

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

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


    ChronoForms technical support

    If you'd like to buy me a coffee or two, thank you very much

    44090 54260
    Tue May 29, 2007, 6:15 pm

    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    
    $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.


  • On the Form General tab | DateTime Picker config box add these options:
    days: days_array, months: months_array

  • 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#);

  • 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'
  • [/list:o]

    07-04-2012 21-53-27.png
    07-04-2012 21-53-27.png (17.22 KiB) Viewed 14154 time(s).

    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');


    * 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.

    ChronoForms technical support

    If you'd like to buy me a coffee or two, thank you very much

    44090 54260
    Tue May 29, 2007, 6:15 pm
    Showing 1 to 5 of 5 entries.

    Powered by ChronoForums - ChronoEngine.com

    ChronoForms Book

    The ChronoForms Book, written for ChronoForms v3 contains 350 pages of invaluable ChronoForms How-tos hints and tips.

    Note: many of the ideas can be used in ChronoForms v4 but the admin interface is very different and code examples may need to be modified.


    Members Login


    2CheckOut.com Inc. (Ohio, USA) is an authorized retailer for
    goods and services provided by ChronoEngine.com