how to do special date javascript with Chronoforms?

iaweb2 30 Jan, 2009
Ok, we did that before on the old Chronoforms for Joomla 1.0.x and never really got it to work, so now that everything on the pages we have is updated to Chronoform 3.0 and Joomla 1.5.9 I would like to try again to figure this out ... so please bear with me.

What the scripts (on a non-Joomla, non-Chronoforms page) do is basically the following:

a) It changes the 3 select fields of the Arrival Date DAY MONTH YEAR (needs to stay in 3 different fields, as that is what i need to send to the third party form handler) to today's date
b) it changes the 3 select fields of the Departure Date DAY MONTH YEAR (following the arrival date) to TODAY + 1 Day
c) on hitting the submit (book now) button it checks that the arrival date is not before at least today and that the departure date is at least 1 day later than the arrival date ...

OK, here is the HTML/JAVASCIPT code for the regular HTML PAGE (outside Joomal and outside Chronoforms):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<title>Search for a Plan</title>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3436700-10");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</head>
<body style="margin: 0;">

<table class="page">
<tr>
<td>

<table class="header">
<tr>
<td class="address" width="100%">

<table border=0>
   <tr>
      <td><img src="https://book.genares.net/logo?PropertyID=3083&ID=26712" border="0"></td>
      <td width=10> </td>
      <td>
         <div class="propertyName">Eclipse DEMO  Hotel </div>
         1102 Alabang Business Tower<br>
         1216 Acacia Road<br>
         Muntinlupa, Metro Manila PH 1780<br>
         Phone: 2 8078458
      </td>
  </tr>
</table>

</td>
</tr>
</table>

</td>
</tr>
<tr>
<td height="100%">
<script language="javascript">
<!--

function DateChanged(o){
        // Get arrival date
        var adate = new Date(document.getElementById('ArrivalDateYear').value,(document.getElementById('ArrivalDateMonth').value-1),document.getElementById('ArrivalDateDay').value);
        // Get departure date
        var ddate = new Date(document.getElementById('DepartureDateYear').value,(document.getElementById('DepartureDateMonth').value-1),document.getElementById('DepartureDateDay').value);
        if( o == "Arrival" ){
                // if arrival date is after departure date,
                // set departure date = arrival date + 1
                if( adate >= ddate ){
                        ddate = new Date( adate.getYear(), adate.getMonth(), adate.getDate()+1 );
                        document.getElementById('DepartureDateYear').value = ddate.getYear();
                        document.getElementById('DepartureDateMonth').value = ddate.getMonth()+1;
                        document.getElementById('DepartureDateDay').value = ddate.getDate();
                }
        }else{
                // if departure date is before arrival date,
                // set arrival date = departure date - 1
                if( ddate <= adate ){
                        adate = new Date( ddate.getYear(), ddate.getMonth(), ddate.getDate()-1 );
                        document.getElementById('ArrivalDateYear').value = adate.getYear();
                        document.getElementById('ArrivalDateMonth').value = adate.getMonth()+1;
                        document.getElementById('ArrivalDateDay').value = adate.getDate();
                }
        }
}

function daysInFebruary (year){
	// February has 29 days in any year evenly divisible by four,
	// EXCEPT for centurial years which are not also divisible by 400.
	return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 );
}

function DaysArray(month,year) {
	for (var i = 1; i <= month; i++) {
		this[i] = 31
		if (i==4 || i==6 || i==9 || i==11) {this[i] = 30}
		if (i==2) {this[i] = daysInFebruary(year)}
	} 
	return this
}

function ValidateDate(day,month,year){
	//alert( 'checking date '+year+'-'+month+'-'+day);
	// Check the year
	if( year < 2006 || year > 3000 ){ return false; }

	// Check the month
	if( month < 1 || month > 12 ){ return false; }

	// Get the number of days in the month
	var days_array = DaysArray(month,year);
	
	// Check the day
	if( day < 1 || day > days_array[month] ){ return false; }

	// Date must be good
	return true;
}

function ValidateForm(){
	// Validate the arrival and departure dates
	var arrival_date_day = document.getElementById('ArrivalDateDay').value;
	var arrival_date_month = document.getElementById('ArrivalDateMonth').value;
	var arrival_date_year = document.getElementById('ArrivalDateYear').value;
	var adate = new Date( arrival_date_year, arrival_date_month-1, arrival_date_day);

	var departure_date_day;
	var departure_date_month;
	var departure_date_year;

	if( '0' == '1' ){
		var nights = Number(document.getElementById('Nights').value);

		// Add the number of nights to the arrival date to get the departure date
		// ======================================================================
		// Convert the arrival date to milliseconds
		var arrival_ms = Date.parse(adate);

		// Convert the number of nights (days) into milliseconds
		var nights_ms = nights*24*3600*1000;

		// Add the nights_ms to the arrival_ms : nights_ms + arrival_ms = departure_ms
		var departure_ms = arrival_ms + nights_ms;

		// Convert the departure_ms to a valid date
		var tmpDate = new Date(departure_ms);

		// Get the year, month and day of the departure
		departure_date_day	= tmpDate.getDate();
		departure_date_month	= tmpDate.getMonth()+1;
		departure_date_year	= tmpDate.getFullYear();
	}else{
		departure_date_day = document.getElementById('DepartureDateDay').value;
		departure_date_month = document.getElementById('DepartureDateMonth').value;
		departure_date_year = document.getElementById('DepartureDateYear').value;
	}

	var ddate = new Date( departure_date_year, departure_date_month-1, departure_date_day);

	// Get today's date
	var today = new Date();
	today.setHours(0,0,0,0);

	// Get the time in milliseconds since the epic of each date
	var time_adate = adate.getTime();
	var time_ddate = ddate.getTime();
	var time_today = today.getTime();

	//alert( "time_adate = "+ time_adate +"\ntime_ddate = "+ time_ddate +"\ntime_today = "+ time_today);

	// Is the arrival date valid
	if( !ValidateDate(arrival_date_day,arrival_date_month,arrival_date_year) ){
		alert('Invalid arrival date');
		return false;
	}
	
	// Is the departure date valid
	if( !ValidateDate(departure_date_day,departure_date_month,departure_date_year) ){
		alert('Invalid departure date');
		return false;
	}

	// Is the arrival date prior to today
	if( time_adate < time_today ){
		alert('Arrival date is prior to today');
		return false;
	}

	// Is the departure date prior to today
	if( time_ddate < time_today ){
		alert('Departure date must be after today');
		return false;
	}

	// Is the arrival date after the departure date
	if( time_ddate <= time_adate ){
		alert('Departure date must be after arrival date');
		return false;
	}

	// Dates must be good
	return true;
}

-->
</script>
<table class="box" cellspacing="0" cellpadding="0">
<tr>
   <td class="pageTitle">Search for a Room <span class="pageSubTitle">( New Reservation )</span></td>
</tr>
<tr>
   <td class="boxContent">

<div class="textDescription">To find a list of available rooms and rates enter the search criteria (including arrival/departure dates, occupancy, room information, etc.).  Click the <b> Search </b> button to view a list of available rate plans based on the search criteria entered.</div>

<!-- begin plan search form -->
<center>
<table>
<form name="Search" method="post" action="planSearchResults" onSubmit="return ValidateForm();">
<input type="hidden" id="PropertyID" name="PropertyID" value="3083">
<input type="hidden" id="SubSource" name="SubSource" value="BookingEngine">
<input type="hidden" id="Action" name="Action" value="Book">

<input type="hidden" id="CnfNum" name="CnfNum" value="">
<input type="hidden" id="PlanCode" name="PlanCode" value="">
<input type="hidden" id="FirstName" name="FirstName" value="">
<input type="hidden" id="LastName" name="LastName" value="">
<input type="hidden" id="GuestEmail" name="GuestEmail" value="">
<input type="hidden" id="GuestPhone" name="GuestPhone" value="">
<input type="hidden" id="GuestAddressLine1" name="GuestAddressLine1" value="">
<input type="hidden" id="GuestAddressLine2" name="GuestAddressLine2" value="">
<input type="hidden" id="GuestCity" name="GuestCity" value="">
<input type="hidden" id="GuestState" name="GuestState" value="">
<input type="hidden" id="GuestCountry" name="GuestCountry" value="PH">
<input type="hidden" id="GuestZIP" name="GuestZIP" value="">
<input type="hidden" id="CCType" name="CCType" value="">
<input type="hidden" id="CCNumber" name="CCNumber" value="">
<input type="hidden" id="CCName" name="CCName" value="">
<input type="hidden" id="CCExpMonth" name="CCExpMonth" value="">
<input type="hidden" id="CCExpYear" name="CCExpYear" value="">
<input type="hidden" id="FrequentGuestID" name="FrequentGuestID" value="">
<input type="hidden" id="IATA" name="IATA" value="">
<input type="hidden" id="ReferralCode" name="ReferralCode" value="">

	<tr>
		<td class="label"><nobr>Arrival Date:</nobr></td>
		<td><!-- default : 2009-01-30 --> 
<!-- <SCRIPT SRC="/js/calendar.js" language="JavaScript"></SCRIPT> -->
<nobr><select name="ArrivalDateMonth"  onchange id="ArrivalDateMonth">
<option selected="selected" value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select><select name="ArrivalDateDay"  onchange id="ArrivalDateDay">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option selected="selected" value="30">30</option>
<option value="31">31</option>
</select><select name="ArrivalDateYear"  onchange id="ArrivalDateYear">
<option selected="selected" value="2009">2009</option>
<option value="2010">2010</option>
</select> </nobr>
</td>
	</tr>
	<tr>
		<td class="label"><nobr>Departure Date:</nobr></td>
		<td><!-- default : 2009-01-31 --> 
<!-- <SCRIPT SRC="/js/calendar.js" language="JavaScript"></SCRIPT> -->
<nobr><select name="DepartureDateMonth"  onchange id="DepartureDateMonth">
<option selected="selected" value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select><select name="DepartureDateDay"  onchange id="DepartureDateDay">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option selected="selected" value="31">31</option>
</select><select name="DepartureDateYear"  onchange id="DepartureDateYear">
<option selected="selected" value="2009">2009</option>
<option value="2010">2010</option>
</select> </nobr>
</td>
	</tr>


<tr><td colspan="2"> </td></tr>
<tr>
   <td class="label"><nobr>Number of Adults per Room:</nobr></td>
   <td><select name="NumberOfAdults"  id="NumberOfAdults">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></td>
</tr>
<tr>
   <td class="label"><nobr>Number of Children per Room:</nobr></td>
   <td><select name="NumberOfChildren"  id="NumberOfChildren">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select></td>
</tr>
<tr>
   <td class="label"><nobr>Number of Rooms:</nobr></td>
   <td><select name="NumberOfRooms"  id="NumberOfRooms">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select></td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
   <td class="label"><nobr>Currency:</nobr></td>
   <td><select id="Currency" Name="Currency"  style="font-size: 9pt;" >
<option value="">
<option value="AED">AED - United Arab Emirates Dirhams
<option value="AFA">AFA - Afghanistan Afghanis
<option value="ALL">ALL - Albania Leke
<option value="ARS">ARS - Argentina Pesos
<option value="AUD">AUD - Australia Dollars
<option value="BBD">BBD - Barbados Dollars
<option value="BGL">BGL - Bulgaria Leva
<option value="BGN">BGN - Bulgaria Leva
<option value="BMD">BMD - Bermuda Dollars
<option value="BRL">BRL - Brazil Reais
<option value="BSD">BSD - Bahamas Dollars
<option value="CAD">CAD - Canada Dollars
<option value="CHF">CHF - Switzerland Francs
<option value="CLP">CLP - Chile Pesos
<option value="CNY">CNY - China Yuan Renminbi
<option value="COP">COP - Colombia Pesos
<option value="CRC">CRC - Costa Rica Colones
<option value="CYP">CYP - Cyprus Pounds
<option value="CZK">CZK - Czech Republic Koruny
<option value="DKK">DKK - Denmark Kroner
<option value="DZD">DZD - Algeria Dinars
<option value="EGP">EGP - Egypt Pounds
<option value="EUR">EUR - Euro
<option value="FJD">FJD - Fiji Dollars
<option value="GBP">GBP - United Kingdom Pounds
<option value="HKD">HKD - Hong Kong Dollars
<option value="HUF">HUF - Hungary Forint
<option value="IDR">IDR - Indonesia Rupiahs
<option value="ILS">ILS - Israel New Shekels
<option value="INR">INR - India Rupees
<option value="ISK">ISK - Iceland Kronur
<option value="JMD">JMD - Jamaica Dollars
<option value="JOD">JOD - Jordan Dinars
<option value="JPY">JPY - Japan Yen
<option value="KRW">KRW - South Korea Won
<option value="KWD">KWD - Kuwait Dinars
<option value="LBP">LBP - Lebanon Pounds
<option value="MAD">MAD - Morocco Dirhams
<option value="MTL">MTL - Malta Liri
<option value="MXN">MXN - Mexico Pesos
<option value="MYR">MYR - Malaysia Ringgits
<option value="NGN">NGN - Nigeria Nairas
<option value="NOK">NOK - Norway Kroner
<option value="NZD">NZD - New Zealand Dollars
<option value="OMR">OMR - Oman Rials
<option value="PGK">PGK - Papua New Guinea Kina
<option value="PHP">PHP - Philippines Pesos
<option value="PKR">PKR - Pakistan Rupees
<option value="PLN">PLN - Poland Zlotych
<option value="ROL">ROL - Romania Lei
<option value="RON">RON - Romania New Lei
<option value="RUR">RUR - Russia Rubles
<option value="SAR">SAR - Saudi Arabia Riyals
<option value="SDD">SDD - Sudan Dinars
<option value="SEK">SEK - Sweden Kronor
<option value="SGD">SGD - Singapore Dollars
<option value="SKK">SKK - Slovakia Koruny
<option value="THB">THB - Thailand Baht
<option value="TRL">TRL - Turkey Liras
<option value="TTD">TTD - Trinidad and Tobago Dollars
<option value="TWD">TWD - Taiwan New Dollars
<option selected value="USD">USD - United States Dollars
<option value="VEB">VEB - Venezuela Bolivares
<option value="VND">VND - Vietnam Dong
<option value="XAG">XAG - Silver Ounces
<option value="XCD">XCD - East Caribbean Dollars
<option value="XOF">XOF - CFA Francs BCEAO
<option value="ZAR">ZAR - South Africa Rand
<option value="ZMK">ZMK - Zambia Kwacha
</select>
</td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
   <td class="label"><nobr>Promotional/Negotiated Code:</nobr></td>
   <td><input type="text" id="PromoCode" name="PromoCode" size="10" maxlength="20" value=""></td>
</tr>
<tr>
   <td class="label"><nobr>Group ID:</nobr></td>
   <td><input type="text" id="GroupCode" name="GroupCode" size="10" maxlength="20" value=""></td>
</tr>
<tr>
	<td class="label">Rate Category: </td>
	<td><select name="RateCat"  id="RateCat">
<option value="">All</option>
<option value="COR">Corporate</option>
<option value="CVN">Convention</option>
<option value="FAM">Family</option>
<option value="GOV">Government</option>
<option value="MIL">Military</option>
<option value="PKG">Package</option>
<option value="PRO">Promotion</option>
<option value="RAC">Rack</option>
<option value="SNR">Senior</option>
<option value="TRV">Travel</option>
<option value="TUR">Tour</option>
<option value="WKD">Weekend</option>
</select></td>
</tr>
<tr>
   <td colspan="4" class="buttonRow">
      <input type="submit" name="submitButton" value="Search" id="submitButton" />
      <input type="reset"  name="resetButton" value="Reset" id="resetButton" />
   </td>
</tr>
</form>
</table>
</center>
<!-- end plan search form -->

   </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer">
<a href="www.eclipsehotels.com" target="_top">Home</a>  | 
<a href="planSearchForm?PropertyID=3083&SubSource=BookingEngine">Make a Reservation</a>
 | 
<a href="reservationSearchForm?PropertyID=3083&SubSource=BookingEngine">Modify or Cancel a Reservation</a>
<br>
<br>
</td>
</tr>
</table>
</body>
</html>


As you can see the changing of the dates is part of the regular html as script, BUT it calls another Javascript within the form called calendar.js (which I attach to this post as well... but needed to rename it into calendar.txt, as the attachment does not allow .js files...)

So, how can I do the same thing in Chronoforms???

1) I created the form (that was the easy part and it works, it sends all the info over to my third party handler ...)
2) I tried to copy and paste the Javascript code from the sample above into the FORM JAVASCRIPT box as follows:

<!--

function DateChanged(o){
        // Get arrival date
        var adate = new Date(document.getElementById('ArrivalDateYear').value,(document.getElementById('ArrivalDateMonth').value-1),document.getElementById('ArrivalDateDay').value);
        // Get departure date
        var ddate = new Date(document.getElementById('DepartureDateYear').value,(document.getElementById('DepartureDateMonth').value-1),document.getElementById('DepartureDateDay').value);
        if( o == "Arrival" ){
                // if arrival date is after departure date,
                // set departure date = arrival date + 1
                if( adate >= ddate ){
                        ddate = new Date( adate.getYear(), adate.getMonth(), adate.getDate()+1 );
                        document.getElementById('DepartureDateYear').value = ddate.getYear();
                        document.getElementById('DepartureDateMonth').value = ddate.getMonth()+1;
                        document.getElementById('DepartureDateDay').value = ddate.getDate();
                }
        }else{
                // if departure date is before arrival date,
                // set arrival date = departure date - 1
                if( ddate <= adate ){
                        adate = new Date( ddate.getYear(), ddate.getMonth(), ddate.getDate()-1 );
                        document.getElementById('ArrivalDateYear').value = adate.getYear();
                        document.getElementById('ArrivalDateMonth').value = adate.getMonth()+1;
                        document.getElementById('ArrivalDateDay').value = adate.getDate();
                }
        }
}

function daysInFebruary (year){
	// February has 29 days in any year evenly divisible by four,
	// EXCEPT for centurial years which are not also divisible by 400.
	return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 );
}

function DaysArray(month,year) {
	for (var i = 1; i <= month; i++) {
		this[i] = 31
		if (i==4 || i==6 || i==9 || i==11) {this[i] = 30}
		if (i==2) {this[i] = daysInFebruary(year)}
	} 
	return this
}

function ValidateDate(day,month,year){
	//alert( 'checking date '+year+'-'+month+'-'+day);
	// Check the year
	if( year < 2006 || year > 3000 ){ return false; }

	// Check the month
	if( month < 1 || month > 12 ){ return false; }

	// Get the number of days in the month
	var days_array = DaysArray(month,year);
	
	// Check the day
	if( day < 1 || day > days_array[month] ){ return false; }

	// Date must be good
	return true;
}

function ValidateForm(){
	// Validate the arrival and departure dates
	var arrival_date_day = document.getElementById('ArrivalDateDay').value;
	var arrival_date_month = document.getElementById('ArrivalDateMonth').value;
	var arrival_date_year = document.getElementById('ArrivalDateYear').value;
	var adate = new Date( arrival_date_year, arrival_date_month-1, arrival_date_day);

	var departure_date_day;
	var departure_date_month;
	var departure_date_year;

	if( '0' == '1' ){
		var nights = Number(document.getElementById('Nights').value);

		// Add the number of nights to the arrival date to get the departure date
		// ======================================================================
		// Convert the arrival date to milliseconds
		var arrival_ms = Date.parse(adate);

		// Convert the number of nights (days) into milliseconds
		var nights_ms = nights*24*3600*1000;

		// Add the nights_ms to the arrival_ms : nights_ms + arrival_ms = departure_ms
		var departure_ms = arrival_ms + nights_ms;

		// Convert the departure_ms to a valid date
		var tmpDate = new Date(departure_ms);

		// Get the year, month and day of the departure
		departure_date_day	= tmpDate.getDate();
		departure_date_month	= tmpDate.getMonth()+1;
		departure_date_year	= tmpDate.getFullYear();
	}else{
		departure_date_day = document.getElementById('DepartureDateDay').value;
		departure_date_month = document.getElementById('DepartureDateMonth').value;
		departure_date_year = document.getElementById('DepartureDateYear').value;
	}

	var ddate = new Date( departure_date_year, departure_date_month-1, departure_date_day);

	// Get today's date
	var today = new Date();
	today.setHours(0,0,0,0);

	// Get the time in milliseconds since the epic of each date
	var time_adate = adate.getTime();
	var time_ddate = ddate.getTime();
	var time_today = today.getTime();

	//alert( "time_adate = "+ time_adate +"\ntime_ddate = "+ time_ddate +"\ntime_today = "+ time_today);

	// Is the arrival date valid
	if( !ValidateDate(arrival_date_day,arrival_date_month,arrival_date_year) ){
		alert('Invalid arrival date');
		return false;
	}
	
	// Is the departure date valid
	if( !ValidateDate(departure_date_day,departure_date_month,departure_date_year) ){
		alert('Invalid departure date');
		return false;
	}

	// Is the arrival date prior to today
	if( time_adate < time_today ){
		alert('Arrival date is prior to today');
		return false;
	}

	// Is the departure date prior to today
	if( time_ddate < time_today ){
		alert('Departure date must be after today');
		return false;
	}

	// Is the arrival date after the departure date
	if( time_ddate <= time_adate ){
		alert('Departure date must be after arrival date');
		return false;
	}

	// Dates must be good
	return true;
}

-->



Now that points 1 and 2 are done, how do i call the calendar.js ?? and the changing of the date does not happen either !

What am I missing??


Any help is highly appreciated.

Thanks



Heiko
Max_admin 30 Jan, 2009
Hi Heiko,

you can add a script file to the page by adding this code at the top of the form HTML code box:

<?php
$doc =& JFactory::getDocument();
$doc->addScript('path/to/js/file/calendar.js');
?> 


Cheers
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
iaweb2 31 Jan, 2009
Hey Max..

EDITED = FIGURED IT OUT ....

"Thanks for that, just a quick question extra...

the "path/to/js/file/calendar.js"

should be based from the Joomla basepath or from the general basepath of my hosting account?

I mean like

images/stories/js/calendar.js"

iaweb2 31 Jan, 2009
Hey Max:

Thanks for that again, the Javascript loading works (at least firebug shows it loaded) and the Verification of the Arrival Date to be at least today and the departure day has to be 1 day later than the arrival day works now like a charm...

However somehow the automatic entry of todays rate into the Arrival date and the automatic entry of the Departure date does not work yet...

Any ideas?

this would be the url of the form ...

http://jeddah.palmeirah.com/

Thanks a million,


Heiko
GreyHead 31 Jan, 2009
Hi Heiko,

Here's a script that will do it I hope
<script type="text/javascript">
window.addEvent('domready', function() {
	var myDate = new Date();
	var monthOptions = $('ArrivalDateMonth').options;
	var thisMonth = myDate.getMonth() + 1;
	setOptions(monthOptions, thisMonth);

	var dayOptions = $('ArrivalDateDay').options;
	var thisDate = myDate.getDate();
	setOptions(dayOptions, thisDate);

	var yearOptions = $('ArrivalDateYear').options;
	var thisYear = myDate.getYear();
	setOptions(yearOptions, thisYear);

	myDate = new Date(myDate.getTime() + 1000*60*60*24);
	var monthOptions = $('DepartureDateMonth').options;
	var thisMonth = myDate.getMonth() + 1;
	setOptions(monthOptions, thisMonth);

	var dayOptions = $('DepartureDateDay').options;
	var thisDate = myDate.getDate();
	setOptions(dayOptions, thisDate);

	var yearOptions = $('DepartureDateYear').options;
	var thisYear = myDate.getYear();
	setOptions(yearOptions, thisYear);

	function setOptions(options, date) {
		for ( var i = 0; i < options.length; i++ ) {
			if ( options[i].value == date ) {
				options[i].selected = true;
			} else {
				options[i].selected = false;
			}
		}
	}
});
</script>
It uses the MooTools library just a little so that needs to be loaded.

Bob

PS As far as I can see you aren't using the calendar.js script on the page at the moment.
iaweb2 31 Jan, 2009
Hey Bob:

That did the trick, thanks a lot ... works now like a charm....

Really appreciate it,


Heiko
This topic is locked and no more replies can be posted.