Using the Date Picker in CFV4 RC2.0

GreyHead , October 10 2011


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

  • The language is English

  • All dates are selectable

  • A new form shows an empty input

  • The date displayed is in yyyy-mm-dd format e.g. 2011-10-15

  • The date submitted is in yyyy-mm-dd format e.g. 2011-10-15

  • The date picker is enabled

  • The time picker is disabled
  • [/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
  • The language is English

  • All dates are selectable

  • A new form shows an empty input

  • The date displayed is in dd-mm-yyyy hh:mm:ss format e.g. 16-10-2011 15:18:26

  • The date submitted is in yyyy-mm-dd hh:mm:ss format e.g. 2011-10-16 15:18:26

  • The date picker is enabled

  • The time picker is enabled
  • [/list:o]

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

    Time Picker Only this disables the datepicker
  • The language is English

  • All dates are selectable

  • A new form shows an empty input

  • The date displayed is in hh:mm:ss format e.g. 15:18:26

  • The date submitted is in hh:mm:ss format e.g. 15:18:26

  • The date picker is disabled

  • The time picker is enabled
  • [/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
  • 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.

  • [*][color=#000080]days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'][/color] 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

  • . . .
  • [/list]

    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



    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
    				   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: !"
          // 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: !"
          // 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: !"
          $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
    datepicker.js << existing file

    (28.46 KiB)
    1179 Downloads/Views


    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.



    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'



    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.

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

    [list=a][*]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
    				var days_array = new Array(#DAYS#);
    var months_array = new Array(#MONTHS#);

    [*]In the Multi-Language actions define the matching language strings:
    				#DAYS#='Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'
    #MONTHS#='Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio​​', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'

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

    07-04-2012 21-53-27.png
    07-04-2012 21-53-27.png
    (17.22 KiB)
    14503 Downloads/Views
    Powered by ChronoForums -

    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

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