Published on
The MooTools Datepicker has a RangePicker version that isn't included in ChronoForms by default though all the necessary files are there.
Here is how it looks and there is a demo form {rokbox text=|here| size=|1000,600| }http://greyhead.org/index.php?option=com_chronoforms&chronoform=start_end_date{/rokbox}.
The test form is created using a text input with the id date_range and this code in a Load JS action in the On Load event:
<?php
JHTML::_('behavior.mootools');
$picker_array = array(
'Picker.js',
'Picker.Attach.js',
'Picker.Date.js',
'Picker.Date.Range.js',
'Locale.en-GB.DatePicker.js'
);
$doc =& JFactory::getDocument();
foreach ( $picker_array as $v ) {
$doc->addScript(JURI::base().'components/com_chronoforms/js/datepicker_moo/'.$v);
}
$doc->addStyleSheet(JURI::base().'components/com_chronoforms/js/datepicker_moo/datepicker.css');
$doc->addStyleDeclaration("
.datepicker tr, .datepicker td {
border:none;
}
");
?>
var dp, date_range;
window.addEvent('domready', function() {
date_range = $('date_range');
dp = new Picker.Date.Range(date_range, {
pickerClass: 'datepicker',
columns: 2,
minDate: new Date()
});
});
Note: Joomla! isn't too good at handling the order in which scripts get loaded in the header so the first half of this code is about fixing that :-(
You can change the column setting up to a maximum of 5 if needed. This will select a few weeks or a several years.
Unfortunately the CSS that comes with the DatePicker only supports the Range Picker in the default style-sheet. The other styles would need to be extended to add the extra columns and the footer :-(
Comments: