Forums

I have Chronoform for a Hotel website. I have two DateTimePicker fields: field A and field B. Date range example where field A (arrival date) does not influences field B (checkout date). How can I set the DateTimePicker fields A and B so that the arrival date (field A) to be set allways previously to the checkout date (field B)?

Please help, Thank you!

Hi grigores2900,

Updated from an old post:

Here's the code for two linked calendars. Set the form up with two plain text inputs (not datepickers). Here I've changed the names and ids of both to 'date_1' and 'date_2'.

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Arrival</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="date_1" name="date_1" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Departure</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="date_2" name="date_2" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_2" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

Form Javascript

window.addEvent('domready', function() {
  new Calendar({ date_1: 'd/m/Y', date_2: 'd/m/Y' }, 
    { 
      direction: 1, 
      pad: 2,
      classes: ['dashboard']
  }); 
});

There are three parameters in the calendar setup: direction : 1 allows only future dates; pad : 2 requires two days between the calendars; classes: ['dashboard'] sets the calendar styling.

Bob

Very good JavaScript code. Now it works!

Tank you very much!

How would you create a textbox with the number of days picked between that 2 dates?

Hi zperona,

Probably I'd write some JavaScript to get the two dates and calculate the difference.

Bob