How can I select a range of dates - part 1?

Posted
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 :-(