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).
[list=a]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
[list=a]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
[list=a]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
[list]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
. . . [/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
Bob
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).
[list=a]
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]
NB; The displayed and submitted formats are independent. Changing one does not affect the other.
Time Picker Only this disables the datepicker
[list=a]
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]
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
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
Files in js/datepicker folder
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]
Note that these files are slightly modified from the standard distribution. I modified the CSS to stop it breaking in the Beez template.
Note that there are some important differences in the Options formatting. So far I've noticed:
[list=a]
Oh and the minDate options does now work in Joomla! 1.7.
Bob
+++++
The replacement _loadDatePickerScripts() function
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
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
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
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
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:
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
To specify a variable date in the future you can use the increment method. This makes the start date four days in the future.
Similalry to specify a variable date in the past you can use the decrement
These methods will accept 'year', 'month', 'week', 'day', 'hour', 'minute', 'second', and 'ms'
Bob
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
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.
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:
In a Load JS action add the following code to define the days_array and months_array
In the Multi-Language actions define the matching language strings: [/list:o]
[attachment=0]07-04-2012 21-53-27.png[/attachment]
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:
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.
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.
<?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]
days: days_array, months: months_arrayvar days_array = new Array(#DAYS#);
var months_array = new Array(#MONTHS#);#DAYS#='Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'
#MONTHS#='Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'[attachment=0]07-04-2012 21-53-27.png[/attachment]
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');
});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.
This topic is locked and no more replies can be posted.
