how to validate two dates (date from.....date to ....)

Hi,I need to make a form with two dates ("date from" and "date to").
I need "date from" is not bigger than "date to"
How can I validate theese two dates?
I think this is a range validator question.
Thanks

Hi,
If you are using ServerSide Validation, there's the DateTime php class which provides the diff() method for comparing two different dates. You could do the validation with JScript, though I'm not familiar enough with LiveValidation to say whether you can use this library, or have to add some custom JS-code.

/Fredrik

Hi,
If you are using ServerSide Validation, there's the DateTime php class which provides the diff() method for comparing two different dates. You could do the validation with JScript, though I'm not familiar enough with LiveValidation to say whether you can use this library, or have to add some custom JS-code.

/Fredrik

Ok Fredrik,
where can I find a tutorial to insert custom code on chronoforms for this purpose?
I think to use ServerSide Validation from validation menu of my form, is this correct?

This is rather schetchy, as I'm not the ultimate javascripter, and not that familiar with LiveValidation..

<?
$script = "var datecompare = function(value, args){
  date1 = new Date($value);
  date2 = new Date($('ChronoContact_" . $MyForm->formrow->name . "').getInputByName(args.testAgainst).value);
  return (date2 > date1);
};

window.addEvent('domReady', function() {
  var datelarger = new LiveValidation($('ChronoContact_" . $MyForm->formrow->name . "').getInputByName('date1'), { validMessage: ' ' });
  datelarger.add( Validate.Custom, { against: datecompare, args: { testAgainst: 'date2' } } );
};";

global $mainframe;
if ($mainframe->isSite()) {
  $doc = JFactory::getDocument();
  $doc->addScriptDeclaration($script);
}
?>

Using serverside validation, on the other hand, would use the code below:

<?php
$date1 = new DateTime(JRequest::getVar('date1', '', 'post'));
$date2 = new DateTime(JRequest::getVar('date2', '', 'post'));
if ($date2 > $date1) {
  return "The end date must be past the start date!"
}
?><

/Fredrik

Hi rainbow,

The *best* way to do this is with a pair of linked date-time fields. You can set them up to require that the second one is at least x days after the first.

The code is in the forums somewhere :-( don't have time to search it out now. It was quite a few months ago.

Bob

Hi rainbow,

The *best* way to do this is with a pair of linked date-time fields. You can set them up to require that the second one is at least x days after the first.

The code is in the forums somewhere :-( don't have time to search it out now. It was quite a few months ago.

Bob

Hi Bob,
thanks for your attention, I'll search the code on forum and I'll test it together to other solutions.

Hi rainbow,

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'.

<?php
$script = "
new Calendar({ date_1: 'd/m/Y', date_2: 'd/m/Y' }, 
  { 
    direction: 1, 
    pad: 2,
    classes: ['dashboard']
  }); 
";
jimport('joomla.environment.browser'); 
$browser = JBrowser::getInstance(); 
if ( $browser->getBrowser() == 'msie' ) {
  $loader = 'load';
} else { 
  $loader = 'domready';
}  
$doc =& JFactory::getDocument();
$script = "window.addEvent('$loader', function() { $script });";
$doc->addScriptDeclaration($script);
?>
<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>

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 clendar styling.

Bob

Thanks Bob, you opened me a new world with these scripts.
I'll try the code as soon as possible.😀

Hi rainbow,

Enjoy :-) . . . forgot to post an image.

Bob

Excellent solution Bob, I also add required and title attributes for empty fields and they work perfectly.
I only need to translate calendar to italian language and customize calendar to a lighter color.
I'm findind around the forum but your experience is appreciated.
Thanks again.

Hi rainbow,

Add

days : ['domenica', 'lunedi', 'martedi', . . .],
months : ['gennaio', 'febbraio', 'marzo', . . .], 

to the arguments list* (take care to get the final commas right).

You can style with CSS see here - near the end for the info. You could also edit the 'dashboard' class that ChronoForms is using.

Bob

* Unfortunately I don't know any way to fix the ordinals without hacking the code so you will get 1st, 2nd, etc in English :-(

Excellent support again 🙂

Hi there,

is there also a way to implement three dates which are validated with eachother?
I need three different calendars: arrival Date, tour Date and departure Date and the should be validated as follows:

[list]
- arrival Date: can be any date, even in the past
- tour Date: must be after arrival Date, at least 24hours from now and before departure Date. Should also have the posibility to manually disable certain dates on the calendar i.e. every Wednesday, Friday, Sunday or should get a list of disabled days.
- departure Date: can be any Date, but must be after arrival Date
[/list]

I have a booking form on: http://www.bluestars.biz/booking/order1.php which does all this, but so far I have not found a solution, to integrate the js functions to CF Forms.

Your help would be highly appreciated

Kind regards,

Bromm

Hi Bromm,

You'll need to set up the code by hand but I think the Aeron Calendar that ChronoForms uses will support all of this see "Multi-calendar support (with padding)" here

Bob

Dear Bob,

thank your, for your reply.
I have now achieved, that all three calendars are displayed with this code:

<?php
$script = "
new Calendar({ date_1: 'd/m/y'}, { direction: 0, navigation: 1, classes: ['dashboard']});
new Calendar({ date_2: 'd/m/y'}, { blocked: ['1-30 11','1-15 12'], direction: 1, navigation: 1, classes: ['dashboard']});
new Calendar({ date_3: 'd/m/y'}, { direction: 1, navigation: 1, classes: ['dashboard'] })
";
	

jimport('joomla.environment.browser');
$browser = JBrowser::getInstance();
if ( $browser->getBrowser() == 'msie' ) {
  $loader = 'load';
} else {
  $loader = 'domready';
} 
$doc =& JFactory::getDocument();
$script = "window.addEvent('$loader', function() { $script });";
$doc->addScriptDeclaration($script);
?>

http://www.bluestars.info/index.php?option=com_chronocontact&chronoformname=test_neu

Which is one part, of what I was trying to achieve. But if I now try to validate the calendars (date fields) against eachother, it doesn't do anything. I tried to put in custom jas code into the "Javascript Code" on the "Form Code" section, but somehow regular js does not work. Any idea?

Could you please give me some further assistance on this issue?

Another question would be:
Do you know if it would be possible to get the available days from the two other calendars (arrival date & departure date) and show on the "tour date" calendar only the date which are in between the arrival date and the departure date but not the current Date (today) and not the dates which are blocked manually?

I would appreciate your help and would like to thank you in advance for your time.
Kind regards

Bromm

Hi Bromm,

It looks as though you missed the bit I referred to:"

Multi-calendar support (with padding)

Applying a single Calendar instance to multiple date elements invokes the class's multi-calendar functionality. In this mode Calendar will automatically adjust each date element to ensure the values remain chronologically in the order they were passed to the class. Calendar uses an optional pad property to calculate the minimum number of days between picked dates (default 1). myCal = new Calendar({
day1: { monthyear1: 'Y-m', day1: 'd' },
day2: { monthyear2: 'Y-m', day2: 'd' },
day3: { monthyear3: 'Y-m', day3: 'd' }
}, { pad: 2 });
Plan your itinerary (minimum 2 days between each date)

I think this will do what you need.

Bob

Dear Bob,

thank you for your Email and again thank you for helping me regarding
this issue. I have managed to implement a valifdation for the three calendars
and it is working slmost perfectly. Except the fact, that the Calendar will show
now the year 1910, if the validation returns to the page, due to one of the defined
error messages.
http://www.bluestars.info/index.php?option=com_chronocontact&chronoformname=test_neu
[attachment=0]Bildschirmfoto 2010-10-15 um 17.26.12.png[/attachment]

This happens, if you enter the following dates for example:

arrival Date: 18/10/2010
tour Date: 31/10/2010
departure Date: 16/10/2010

The form will return to the calendar and if you than click on the calendar item, it will show the year 1910.

I would be very greatfull if you could check this and maybe you have a solution for this cas.
Kind regards,

Bromm

Hey Bob,

i fixed it....stupid me....
Should have thought about this before, if you create new Calendars make sure you create them with the right date format....

Sorry and Thank you again!

Bromm

Hi rainbow,

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'.

<?php
$script = "
new Calendar({ date_1: 'd/m/Y', date_2: 'd/m/Y' }, 
  { 
    direction: 1, 
    pad: 2,
    classes: ['dashboard']
  }); 
";
jimport('joomla.environment.browser'); 
$browser = JBrowser::getInstance(); 
if ( $browser->getBrowser() == 'msie' ) {
  $loader = 'load';
} else { 
  $loader = 'domready';
}  
$doc =& JFactory::getDocument();
$script = "window.addEvent('$loader', function() { $script });";
$doc->addScriptDeclaration($script);
?>
<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>

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 clendar styling.

Bob

that is nice but where must i write this code ????

greetings

Hi neyStyle,

That code is quite old, it was written for ChronoForms v3 and goes in the Form HTML box.

Bob

Hey everyone.

I need the date and time in second field to be more than in thr first one.
Do you have the solution for chronoforms V4? or maybe i've missed it somewhere?
I'm very interested in solving this problem...

p.s. and one more offtop thing - how do i change the datepicker color to match site style? thanks.

Any help? Please...

Hi,

I know that this is an old thread. I've just written this FAQ on linking two datepickers to handle a range of dates.

Bob