Date range calculation

Hi,

I am using ChronoForms V4 with Joomla 2.5 to create a hotel booking request form. I have a datetime picker field for the guest check in date and another datetime picker field for guest check out date and I need to find a way to calculate the number of nights that the guest will be staying.

For example, if a guest checks in on 1 Jan 2013, then checks out on 10 Jan 2013, they have stayed for 9 nights. Can this be easily calculated in Chronoforms and dynamically updated as the guest changes their check in and check out dates before submitting the form?

Thanks,
Richard

Hi Richard,

Provided that you are using the MooTools datepicker then you should be able to use JavaScript to get the two dates and calculate the length of the stay.

Bob

PS Please see this FAQ about using the range-picker - that might be helpful here.

Hi Bob

Thank you for your suggestion, but unfortunately my knowledge of JavaScript is not good enough to make this work myself. Do you have any suggestions for where I can find a simple javascript that will convert two date fields into numbers and calculate the difference between them?

Thanks,
Richard

Hi Richard,

I've found an test form with two datepickers, added the calculation and written it up as a FAQ.

Bob

Hi Bob,

Your instructions in the FAQ article and the associated demo are exactly what I need.

Unfortunately however when I use either the Datetime picker element with MooTools (any style) or a text box with your PHP and JavaScript code (using MooTools with DashBoard style), the calendar boxes do not render correctly. The rectangular shape of the calendar loads, but I cannot see the number 1 - 31. This has been tested this on several browsers on both Mac and PC and the same problem occurs on all.

If I have a Datetime picker element that uses the default MonkeyPhysics, it renders correctly and looks very similar to MooTools Dashboard style. I click on the 'Test Form' button on CF, the form with your PHP and JavaScript loads on a plain white background and the calendar renders correctly.

Any thoughts on how to resolve this?

Thanks,
Richard

Hi Richard,

It's probably a conflict with the CSS in your template. Please post a link to the form so I can take a quick look.

Bob

Hi Bob,

The form is located at http://goldenbanana.sydrep.com/reservation-enquiry/bookingform-bb.html

Thank,
Richard

Hi Richard,

If you view the form without the template you can see that the basic CSS is OK.

Looking at the form with the template there seem to be two problems, one is the z-index settings that mean that the template places the form in front of the datepicker. You can get round that by adding CSS like this in a Load CSS action:

.datepicker_dashboard {
  z-index: 1000;
}

The second problem is from the nivoSlider CSS in the template:

.slider, .nivoSlider {
    background-color: #FFFFFF;
    background-image: none;
    box-shadow: none;
    height: auto;
    margin: 0;
    overflow: hidden;
    width: auto !important;
}

I think that the fix for this is to add this to the Load CSS action:

.datepicker_dashboard div.slider {
  background-color: black;
  width: 336px !important;
}

Bob

Hi Bob,

I have added the CSS modifications and the calendar is now rendering correctly.

For some reason, the calculation does not appear to be working the way it should. When I enter a start of 2013-02-01 and finish date of 2013-02-02 (both in YYYY-MM-DD format), the result should be 1, but it is appearing as 0. In the demo that is associated with the FAQ article, the same start and finish dates have a result of 1, which is correct. I am certain that I copied the code from the FAQ exactly as it was in the article, I even deleted the code and copied it again to make sure, but the problem still persists. Any ideas for how to correct this calculation error?

Also, is it possible to embed the calculation result in an email that gets sent to the form owner? When I tried to do this I just get a blank section in the email.

Thanks,
Richard

Hi Richard,

I'm not sure why the calculations should be different. Do you have the time included in your formats for the pickers? Maybe that has an effect?

You can modify the script to add the value of the difference to a hidden input, or you could re-calculate in PHP after the form is submitted. Either approach will work OK.

Bob

I was reading your interesting FAQ about how to calculate the date range.

THe final result will be shown as DIV.
Its' possible to assign it to have it as form_data?

Hi vismay,

If you use a hidden input with the id (and name 'diff') and change this line in the commented out section

$('diff').innerHTML = start_date_dp.date.diff(end_date_dp.date)+' days';

to

$('diff').value = start_date_dp.date.diff(end_date_dp.date);

then the length of the diff will be returned in $form->data['diff']

Though it might be just as easy to calculate it using PHP after the form submits.

Bob