Wed Apr 23, 2014, 7:59 pm
Showing 1 to 5 of 5 entries.

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
  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
    [list=a]

  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
    [list=a]

  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
    [list]

  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

Bob


ChronoForms technical support
If you'd like to buy me a coffee, thank you very much

GreyHead
Moderator
35747
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 !!!

[list=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.


  • 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:
    [list=a]

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

    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


    ChronoForms technical support
    If you'd like to buy me a coffee, thank you very much

    GreyHead
    Moderator
    35747
    Tue May 29, 2007, 6:15 pm

    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


    ChronoForms technical support
    If you'd like to buy me a coffee, thank you very much

    GreyHead
    Moderator
    35747
    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'

    Bob


    ChronoForms technical support
    If you'd like to buy me a coffee, thank you very much

    GreyHead
    Moderator
    35747
    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
    <?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.

    [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
    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 11270 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');
    });

    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.


    ChronoForms technical support
    If you'd like to buy me a coffee, thank you very much

    GreyHead
    Moderator
    35747
    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.

    SSL

    Members Login

     

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