JavaScript Forum

**xenia** · 06-12-2006, 11:48 AM

Hello everyone,

I have created a website for a rent a car company where the user select from a calendar the desired pick up date(with hour) and drop off date(hour).
I am using javascript for possible error trapping in order to check and prevent the user to select wrong dates for the following errors:

if the user select a pickup date that is earlier than the current
if the user select a drop off date earlier or the same with the pick up date
and if the user select a date for over a year

The problem I am getting is that the first two errors it catches but when I put correct dates it displays the third error trapping for the year

Here is the code I have written untill now:

Code:

<script type="text/javascript">



function check()
{
var s_dt1 = document.form1.pickupdate.value.substr(6,4) + ' ' + document.form1.pickupdate.value.substr(3,2) + ' ' + document.form1.pickupdate.value.substr(0,2) + ' ' + document.form1.pickuphours.value + document.form1.pickupmin.value;
var s_dt2 = document.form1.dropoffdate.value.substr(6,4) + ' ' + document.form1.dropoffdate.value.substr(3,2) + ' ' + document.form1.dropoffdate.value.substr(0,2) + ' ' + document.form1.dropoffhours.value + document.form1.dropoffmin.value;


var d=new Date();
var nextyear= (d.getFullYear()+1);

var t=new Date();
var todayYear=(t.getFullYear());
var todayMonth=(t.getMonth() < 9 ? '0' + (t.getMonth() + 1) : (t.getMonth() + 1));
var todayDay=(t.getDate());
var todayhour=(t.getHours());
var todaymin=(t.getMinutes());




if (s_dt1 >= s_dt2)
     {
     alert('Please select a pick up date that is before the drop off date!');
     
     return false;

     }
     
if ( s_dt1 < (todayYear + ' ' + todayMonth + ' '+ todayDay  + ' ' + todayhour + '' + todaymin) )
{
alert('You cannot select a date before the current');

return false;
}

     if ((s_dtl = nextyear) || ( s_dt2 == nextyear))
     {
     alert ('Sorry but we do not rent a car for more than one year. Please send an email for further assistant.');
     return false;
     }
     
     
else
     {
     return true;
     }
}

</script>

I would appreciate if you could help me.

Thanks,
xenia

**funkdaddu** · 03:10 PM

Could you do something similar to this:

Code:

var x = 105;
var y = 10;
var err = "";

if (x > y) {
	err += "I'm sorry x is greater than y\n";
	if (x > 100) {
		err += "I'm sorry x is greater than 100\n";
	}
}

if (x+y > 15) {
	err += "I'm sorry x and y are greater than 15\n";

}

if (err) {
	alert(err);
	return false;
}

**xenia** · 06-13-2006, 05:28 AM

with the existing code I have written can I adjust it in order to work as it has to work and catch the correct errors?

**higginbt** · 06-13-2006, 08:03 AM

Not helping you solve your problem, but why cant the user return his car on the same day he picks it up?

**mastercomputers** · 06-13-2006, 09:34 AM

You're using an assignment operator (=) not the equal to comparison operator (==) for this line:

Code:

if ((s_dtl = nextyear) || ( s_dt2 == nextyear))

Hopefully fix that, and it'd work as intended.

Cheers,

MC

**xenia** · 06-13-2006, 10:15 AM

Still not working,the customer that I am developing the website want ;s to have an error trapping to the same date.

Any other suggestions?

Thanks,
Xenia

**mastercomputers** · 06-13-2006, 01:56 PM

Actually the problem is your not comparing numbers but strings, The Date object only works in numbers, you'll need to either convert it to a string or convert what you're comparing to a number.

I find working with numbers is easier than strings in date formats, a timestamp is even better.

I could provide code to fix this up, but it's been a long night for me so I do apologise, but if you can work on what I've mentioned you'll solve your problem.

Cheers,

MC

**funkdaddu** · 06-13-2006, 04:42 PM

Yeah, you need to convert your dates from strings to date objects, then you can compare them. I replied to your question before in another thread but never got an answer if hte code helped. But using the code you gave before, here is a solution:

HTML Code:

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

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<script type="text/javascript"><!--
function checkDates() {
	var err = "";
	
	var pickupDateBox = document.form1.pickupdate;
	var dropoffDateBox = document.form1.dropoffdate;
	
	var puTimeBox = document.form1.pickuphours;
	var doTimeBox = document.form1.dropoffhours;

	//split date in to array
	var pickupDateParts = pickupDateBox.value.split("/");
	var dropoffDateParts = dropoffDateBox.value.split("/");
	
	//split hr/min into an array
	var puTime = puTimeBox.value.split(":");
	var doTime = doTimeBox.value.split(":");

	var pickupDate = new Date(2000+parseInt(pickupDateParts[2]),pickupDateParts[0]-1,pickupDateParts[1],puTime[0],puTime[1],0,0);
	var dropoffDate = new Date(2000+parseInt(dropoffDateParts[2]),dropoffDateParts[0]-1,dropoffDateParts[1],doTime[0],doTime[1],0,0);
	
	var yearLater = new Date(parseInt(pickupDate.getFullYear())+1,pickupDate.getMonth(),pickupDate.getDate());

	// are boxes filled in?
	if (pickupDateBox.value != "" && dropoffDateBox.value != "" && puTime != "" && doTimeBox != "") {
		//is do later than pu?
		if (dropoffDate > pickupDate) {
			//is do longer than 1 yr from pu date?
			if (dropoffDate > yearLater) {
				err = "Your Drop Off date needs to be less than 1 year after your pickup date";
			}
		} else {
			err = "Your Drop Off date needs to be later than your Pick Up date";
		}
	} else {
		err = "Please choose both a pickup date and time as well as a drop off date and time.";
	}
	
	//if there's an error, return it, else submit
	if (err) {
		alert(err);
		return false;
	} else {
		return true;
	}
}
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
<form action="price_cars2_test.php" method="post" name="form1" id="form1" onsubmit="return checkDates();">
			<input name="pickupdate" type="text" size="18" id ="pickupdate" value="05/11/06" class="body"/><select name="pickuphours" class="body">
                    <option selected value=""> Pick up hour</option>
                    <option value="08:00">08:00</option>
                    <option value="09:00">09:00</option>
                    <option value="10:00">10:00</option>
                    <option value="11:00">11:00</option>
                    <option value="12:00">12:00</option>
                    <option value="13:00">13:00</option>
                    <option value="14:00">14:00</option>
                    <option value="15:00">15:00</option>
                    <option value="16:00">16:00</option>
                    <option value="17:00">17:00</option>
                    <option value="18:00">18:00</option>
                    <option value="19:00">19:00</option>
                    <option value="20:00">20:00</option>
                    </select>
                    
<input name="dropoffdate" type="text" size="18" value="05/11/06" class="body" id="dropoffdate" /><select name="dropoffhours" class="body" onfocus="calcDays()">
                      <option selected value=""> Drop off hour</option>
                      <option value="08:00">08:00</option>
                      <option value="09:00">09:00</option>
                      <option value="10:00">10:00</option>
                      <option value="11:00">11:00</option>
                      <option value="12:00">12:00</option>
                      <option value="13:00">13:00</option>
                      <option value="14:00">14:00</option>
                      <option value="15:00">15:00</option>
                      <option value="16:00">16:00</option>
                      <option value="17:00">17:00</option>
                      <option value="18:00">18:00</option>
                      <option value="19:00">19:00</option>
                      <option value="20:00">20:00</option>
                      </select>
                      <input name="submit"  type="submit"/>
</form>	</body>

</html>

You should be able to use that to modify your current script.

**xenia** · 06-14-2006, 01:11 PM

funkdaddu thank you for the code you post.

I tryied to test if it is working but everytime was displaying the same error:

"Your Drop Off date needs to be later than your Pick Up date"

When I put correct pickup and drop off information again it displayed the error.

What you think might cause this problem?

Thank you,
Xenia

**funkdaddu** · 06-14-2006, 02:05 PM

What browser are you using? I've checked it on Safari, Firefox and IE6 and it works for me.
Are you using the format MM/DD/YY for the date boxes?

What are your inputs? (Date/time)

**xenia** · 06-15-2006, 05:08 AM

I am trying the page to both Mozilla Firefox and IE.The format of the date box is
DD/MM/YYYY HHMM(ex.15/06/2006 0800).

Do you think that the format of the data might mess it up?

Thanks,
Xenia

**xenia** · 06-15-2006, 09:06 AM

funkdaddu I think I manage to find out what is the problem but still I haven't sort it out,so I would like you help.

Here is the modifyied code I wrote:

Code:

        <script type="text/javascript"><!--
function checkDates() {
    var err = "";
    
    var pickupDateBox = document.form1.pickupdate;
    var dropoffDateBox = document.form1.dropoffdate;
    
    
    var puTimeBox = document.form1.pickuphours.value;
    var doTimeBox = document.form1.dropoffhours.value;
    
    var puMinBox = document.form1.pickupmin.value;
    var doMinBox = document.form1.dropoffmin.value;
    

    //split date in to array
    var pickupDateParts = pickupDateBox.value.split("/");
    var dropoffDateParts = dropoffDateBox.value.split("/");
    

     );

    
var pickupDate = new Date(2000+parseInt(pickupDateParts[2]),pickupDateParts[0]-1,pickupDateParts[1],puTimeBox,puMinBox);
alert(pickupDate);
    
var dropoffDate = new Date(2000+parseInt(dropoffDateParts[2]),dropoffDateParts[0]-1,dropoffDateParts[1],doTimeBox,doMinBox);
alert(dropoffDate);
    
   var yearLater = new Date(parseInt(pickupDate.getFullYear())+1,pickupDate.getMonth(),pickupDate.getDate());
alert(yearLater);

    // are boxes filled in?
    
if (pickupDateBox.value != "" && dropoffDateBox.value != "" && puTimeBox != "" && doTimeBox != "" && puMinBox != "" && doMinBox) {
        //is do later than pu?
        if (dropoffDate > pickupDate) {
            //is do longer than 1 yr from pu date?
            if (dropoffDate > yearLater) {
                err = "Your Drop Off date needs to be less than 1 year after your pickup date";
            }
        } else {
            err = "Your Drop Off date needs to be later than your Pick Up date";
        }
    } else {
        err = "Please choose both a pickup date and time as well as a drop off date and time.";
    }
    
    //if there's an error, return it, else submit
    if (err) {
        alert(err);
        return false;
    } else {
        return true;
    }
}
//-->
</script>

When I output the variables pickupDate, dropoffDate and yearLater with the changes I made displays the following:

pickupdate: Tue Mar 06 4007 08:00:00 GMT+0000(GMT Standart Time)
dropoffDate : Tue Mar 06 4007 08:00:00 GMT+0000(GMT Standart Time)(i select the same with pickupdate)
yearLater :Tue Mar 06 4008 00:00:00 GMT+0000(GMT Standart Time)

When the pickupdate is the same with the dropoffDate it catches the error.But when I tryied to select a pickupdate earleir than the current it didn't catch the error.The same when I test to see the next year.

I think that it is just a small modification in my code but I cannot find it.I would be greatful if you could help me.

Thanks,
Xenia

**xenia** · 06-15-2006, 10:06 AM

After some additional modifications I manage to put an error trapping if the user select a pickupdate earlier than today and is working,however afterwards if i put the correct pickup and drop off date it displays the same error.

Moreover, there is an error where it check for the dates after one year.When I select pickupdate the current (15/06/2006) and dropoff date after one year(23/06/2008) it correctly catchs the error. However,if I select as pickupdate (15/06/2007) and dropoff date (17/06/2007) it accept the dates but I wouldn't like to be done like this.
I would like the customer to book a car in the current year and not let him choose year later than the current.

Here is the latest code:

Code:

        <script type="text/javascript"><!--
function checkDates() {
    var err = "";
    
    var pickupDateBox = document.form1.pickupdate;
    var dropoffDateBox = document.form1.dropoffdate;
    
    
    var puTimeBox = document.form1.pickuphours.value;
    var doTimeBox = document.form1.dropoffhours.value;
    
    var puMinBox = document.form1.pickupmin.value;
    var doMinBox = document.form1.dropoffmin.value;
    
  

    //split date in to array
    var pickupDateParts = pickupDateBox.value.split("/");
    var dropoffDateParts = dropoffDateBox.value.split("/");
    

    

 );

    
var pickupDate = new Date(2000+parseInt(pickupDateParts[2]),pickupDateParts[0]-1,pickupDateParts[1],puTimeBox,puMinBox);
//alert(pickupDate);
    
var dropoffDate = new Date(2000+parseInt(dropoffDateParts[2]),dropoffDateParts[0]-1,dropoffDateParts[1],doTimeBox,doMinBox);
//alert(dropoffDate);
    
    var yearLater = new Date(parseInt(pickupDate.getFullYear())+1,pickupDate.getMonth(),pickupDate.getDate());
    var t=new Date;
    var today=new Date();
//alert(today);

    // are boxes filled in?

    
    if (pickupDateBox.value != "" && dropoffDateBox.value != "" && puTimeBox != "" && doTimeBox != "" && puMinBox != "" && doMinBox) {
        //is do later than pu?
        if (dropoffDate > pickupDate) {
        
           if (pickupDate <  today){
        
            //is do longer than 1 yr from pu date?
            if (dropoffDate > yearLater) {
                err = "Your Drop Off date needs to be less than 1 year after your pickup date";
            }
        } else {
            err = "Your pick up date cannot be earlier than today";
         }
        } else {
            err = " Your Drop Off date needs to be later than your Pick Up date";
        }
        
    } else {
        err = "Please choose both a pickup date and time as well as a drop off date and time.";
    }
    
    //if there's an error, return it, else submit
    if (err) {
        alert(err);
        return false;
    } else {
        return true;
    }
}
//-->
</script>

Thanks,
Xenia

**funkdaddu** · 06-16-2006, 10:39 PM

Can you post the form code too? And yes, I was assuming the dates were US - formatted MM/DD/YY, not DD/MM/YY (which I always thought made more sense

) so that would mess things up. If you post the form code you are using, I can help you out.

**xenia** · 06-19-2006, 05:09 AM

Sorry that I reply late.

Here is my latest code of the javascript:

Code:

        <script type="text/javascript"><!--
function checkDates() {
    var err = "";
    
    var pickupDateBox = document.form1.pickupdate;
    var dropoffDateBox = document.form1.dropoffdate;
    
    
    var puTimeBox = document.form1.pickuphours.value;
    var doTimeBox = document.form1.dropoffhours.value;
    
    var puMinBox = document.form1.pickupmin.value;
    var doMinBox = document.form1.dropoffmin.value;

    var pickupDateParts = pickupDateBox.value.split("/");
    var dropoffDateParts = dropoffDateBox.value.split("/");

var pickupDate = new Date(2000+parseInt(pickupDateParts[2]),pickupDateParts[0]-1,pickupDateParts[1],puTimeBox,puMinBox);

var dropoffDate = new Date(2000+parseInt(dropoffDateParts[2]),dropoffDateParts[0]-1,dropoffDateParts[1],doTimeBox,doMinBox);

    var yearLater = new Date(parseInt(pickupDate.getFullYear())+1,pickupDate.getMonth(),pickupDate.getDate());
    var t=new Date;
    var today=new Date();

if (pickupDateBox.value != "" && dropoffDateBox.value != "" && puTimeBox != "" && doTimeBox != "" && puMinBox != "" && doMinBox) {
        //is do later than pu?
        if (dropoffDate > pickupDate) {
        
           //if (pickupDate <  today){
        
            //is do longer than 1 yr from pu date?
            if (dropoffDate > yearLater) {
                err = "Your Drop Off date needs to be less than 1 year after your pickup date";
            }
        //} else {
            //err = "Your pick up date cannot be earlier than today";
         //}
        } else {
            err = " Your Drop Off date needs to be later than your Pick Up date";
        }
        
    } else {
        err = "Please choose both a pickup date and time as well as a drop off date and time.";
    }
    
    //if there's an error, return it, else submit
    if (err) {
        alert(err);
        return false;
    } else {
        return true;
    }
}
//-->
</script>

And the following is the code for the form:

HTML Code:

<? $currentdate=date("d/m/Y");
$currentHour=date("H:i");

$tomorrow  = date($currentdate+2);
$tom=date("$tomorrow/m/Y");

<form action="quote.php" method="post" name="form1" id="form1" onsubmit="return checkDates();">
<table width="212" border="0">
  <tr>
    <td width="72"><input name="pickupdate" type="text" size="10" id ="pickupdate2" value="<? echo $currentdate; ?> " class="body"/></td>
    <td width="35"><a href="javascript:showCal('Calendar3')"><img src="datebutton.jpg" alt="dates" border="0" /></a></td>
    
    <td width="19"><select name="pickuphours" class="body">
      <option value="08" selected="selected">08</option>
      <option value="09">09</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>
    </select></td>
    <td width="60"><label>
      <select name="pickupmin" class="body">
        <option value="00">00</option>
        <option value="15">15</option>
        <option value="30">30</option>
        <option value="45">45</option>
      </select>
    </label></td>
  </tr>
  <tr>
   <td><input name="dropoffdate" type="text" size="10" class="body" id="dropoffdate" value="<? echo $currentdate; ?>"/></td>
    <td><a href="javascript:showCal('Calendar4')"><img src="datebutton.jpg" alt="dates" border="0" /></a></td>
    <td><select name="dropoffhours" class="body" >
      <option value="08" selected="selected">08</option>
      <option value="09">09</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>
    </select></td>
    <td><label>
      <select name="dropoffmin" class="body">
        <option value="00">00</option>
        <option value="15">15</option>
        <option value="30">30</option>
        <option value="45">45</option>
      </select>
    </label></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td> <input name="submit"  type="image" id="button" src="quotemebutt.jpg" /></td>
  </tr>
</table>


</form>

Thank you,
Xenia

**funkdaddu** · 06-20-2006, 12:51 PM

OK, this is the new script. I coded for US style dates - MM/DD/YY and I had to switch it for DD/MM/YY I also made it compare the 2 years to make sure they are in the same year. THough from a usage standpoint what about if someone rents over the new year? i.e. Dec 30, 2006 - Jan 3rd 2007? Might it be better to just set a max length of x many days for a rental?

Code:

<script type="text/javascript"><!--
function checkDates() {
    var err = "";
    
    var pickupDateBox = document.form1.pickupdate;
    var dropoffDateBox = document.form1.dropoffdate;
    
    
    var puTimeBox = document.form1.pickuphours.value;
    var doTimeBox = document.form1.dropoffhours.value;
    
    var puMinBox = document.form1.pickupmin.value;
    var doMinBox = document.form1.dropoffmin.value;

    var pickupDateParts = pickupDateBox.value.split("/");
    var dropoffDateParts = dropoffDateBox.value.split("/");

	var puYear = 2000+parseInt(pickupDateParts[2])
	var doYear = 2000+parseInt(dropoffDateParts[2])

	var pickupDate = new Date(puYear,pickupDateParts[1]-1,pickupDateParts[0],puTimeBox,puMinBox);
	var dropoffDate = new Date(doYear,dropoffDateParts[1]-1,dropoffDateParts[0],doTimeBox,doMinBox);
	
    var t=new Date;
    var today=new Date();

if (pickupDateBox.value != "" && dropoffDateBox.value != "" && puTimeBox != "" && doTimeBox != "" && puMinBox != "" && doMinBox) {
        //is do later than pu?
        if (dropoffDate > pickupDate) {
        
           //if (pickupDate <  today){
        
            //is do longer than 1 yr from pu date?
            if (doYear != puYear) {
                err = "Your Drop Off date needs to be in the same year as your pickup date.";
            }
        //} else {
            //err = "Your pick up date cannot be earlier than today";
         //}
        } else {
            err = " Your Drop Off date needs to be later than your Pick Up date";
        }
        
    } else {
        err = "Please choose both a pickup date and time as well as a drop off date and time.";
    }
    
    //if there's an error, return it, else submit
    if (err) {
        alert(err);
        return false;
    } else {
        return true;
    }
}
//-->
</script>