FAQs

This tutorial will lead you through setting up two linked datepickers step by step. If this kind of process is new to you then I suggest that you use a trial form to get familiar with the steps before adding the code to a more compex form.

1. Create a form and add two Text box elements to it.
2. Open the configuration for the first element, the start date, and set the Label text to 'Start date' and the Field Name and Field ID to start_date; click Apply to save the element.
3. Open the configuration for the second element, the end date, and set the Label text to 'End date' and the Field Name and Field ID to end_date; click Apply to save the element.
4. Click the Events tab and drag in three actions: a Custom Code action; a Load JS action from the Utilities group; and a Show HTML action.
5. Open the configuration for the Custom Code action and add this code to load the necessary datepicker scripts and stylesheets

6. <?php
   $document =& JFactory::getDocument();
   JHTML::_( 'behavior.mootools' );
   $cf_url = JURI::root().'components/com_chronoforms/js/datepicker_moo/';
   
   $datepicker_style = $form->form_params->get( 'datepicker_moo_style', 'datepicker_dashboard' );
   $document->addStyleSheet( $cf_url.$datepicker_style.'/'.$datepicker_style.'.css' );
   
   $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;
   }
   $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' );
   ?>
   

   You can change the highlighted locale to your site default if necessary.
7. Click Apply to save the Custom Code and close the configuration.
8. Open the configuration for the Load JS action and add this code

9. window.addEvent('load', function() {
     var start_date_dp, end_date_dp, start_date, end_date;
     start_date = $('start_date');
     end_date = $('end_date');
     start_date_dp = new Picker.Date(start_date, {
       pickerClass: 'datepicker_dashboard',
       format: '%Y-%m-%d',
       allowEmpty: false,
       useFadeInOut: !Browser.ie
     });
   
     end_date.addEvent('focus', function() {
       if ( typeOf(end_date_dp) == 'null' ) {
         end_date_dp = new Picker.Date(end_date, {
           pickerClass: 'datepicker_dashboard',
           format: '%Y-%m-%d',
           allowEmpty: true,
           useFadeInOut: !Browser.ie,
           // change the following lines to set the allowable range for the end date.
           //minDate: start_date_dp.date.clone().decrement('week', 1),
           minDate: start_date_dp.date.clone(),
           maxDate: start_date_dp.date.clone().increment('week', 4)
         });
         end_date_dp.currentDate = start_date_dp.date;
         if ( end_date.value === '' && start_date_dp.date != end_date_dp.date ) {
           end_date.value = start_date.value;
         }
         // Code to show the stay length
   /*
         end_date_dp.addEvent('select', function() {
           if ( typeOf(end_date_dp) == 'object' ) {
             end_date_dp.currentDate = start_date_dp.date;
             $('diff').innerHTML = start_date_dp.date.diff(end_date_dp.date)+' days';
           }
         });
   */
       }
     });
     start_date_dp.addEvent('select', function() {
       if ( typeOf(end_date_dp) == 'object' ) {
         end_date_dp.currentDate = start_date_dp.date;
         end_date.value = '';
       }
     });
   });

   You can change the highlighted text if your input elements have different ids.
10. Click Apply to save the Load JS action and close it.
11. Save your form and click the Test Form icon or the Frontend View link to see it in the front end of your site. once you have selected a Start Date the End Date datepicker should start from that date and allow the selection of dates up to four weeks after the Start Date. You can adjust this range where it is commented.

<div id='diff'></div>