Published on
If you want the customer to enter a range of dates - for the start and end of a vacation for example - the simplest way is to use the DatePicker Range options. If you want to use two separate datepickers then it is possible with a little coding.
Note: for the DatePicker Range option see this FAQ.
To set the earliest End date equal to the Start date
To set a range using two datepeickers add two standard Text box elements to your form (not datepicker elements). In the code here they have ids 'start_date' and 'end_date'.
In the On Load event of your form add two extra actions, a Custom Code action and a Load JS action (or use the boxes on the Others tab of the Easy Form Wizard).
The Custom Code action (or Custom PHP code box) has this code to load the required datepicker files (normally this is done by ChronoForms):
<?php
$document =& JFactory::getDocument();
// make sure that MooTools is loaded
JHTML::_( 'behavior.mootools' );
$cf_url = JURI::root().'components/com_chronoforms/js/datepicker_moo/';
// you can change the uncommented line here to change the style
$datepicker_style = $form->form_params->get( 'datepicker_moo_style', 'datepicker_dashboard' );
$document->addStyleSheet( $cf_url.$datepicker_style.'/'.$datepicker_style.'.css' );
// set the datepicker language
$lang =& JFactory::getLanguage();
$tag = $lang->getTag();
if ( !$tag ) {
$tag = $lang->getDefault();
}
$use_tag = 'en-US';
if ( file_exists( $cf_url.'Locale.'.$tag.'.DatePicker.js' ) ) {
$use_tag = $this->tag;
}
// load the datpicker script files
$document->addScript( $cf_url.'Locale.'.$use_tag.'.DatePicker.js' );
$document->addScript( $cf_url.'Picker.js' );
$document->addScript( $cf_url.'Picker.Attach.js' );
$document->addScript( $cf_url.'Picker.Date.js' );
?>
If you prefer you can leave out this step and add a Custom MooTools DatePicker action to your form and leave the Class box empty. This will load the MooTools files but may not automatically select the correct language.
In the Load JS action (or the JavaScript Code box in the Easy Wizard) add this code:
window.addEvent('load', function() {
var start_date, end_date;
// set up the start datepicker
start_date = new Picker.Date($('start_date'), {
pickerClass: 'datepicker_dashboard',
format: '%Y-%m-%d',
allowEmpty: true,
useFadeInOut: !Browser.ie
});
// set up the end datepicker
end_date = new Picker.Date($('end_date'), {
pickerClass: 'datepicker_dashboard',
format: '%Y-%m-%d',
allowEmpty: true,
useFadeInOut: !Browser.ie
});
// add a check when the end datepicker is opened
end_date.addEvent('open', function() {
if ( start_date.date != end_date.date ) {
end_date.options.minDate = start_date.date;
}
});
});
Change the highlighted input IDs and date formats to meet your form needs.
You can also add or change the other datepicker options if necessary -- the default ChronoForms values are used here.
Set a minimum period between the Start and End dates
The JavaScript here sets the earliest date for the End date to be the selected Start date. To require a gap between them - for example to make the earliest End Date four days after the start date replace this line:
end_date.options.minDate = start_date.date;
with a line like this
end_date.options.minDate = start_date.date.increment('day', 4);
