Validate selection of dates

**xenia** · 05-08-2006, 08:04 AM

Hello,

I have a form where the user selects a pick up date ,drop off date from a pop up calendar and displays the date in a textfield.It also selects the pick up time and drop off time from a drop down menu.

I would like to check if the drop off date that the user select to be always greater than the pick up date.

I though doing that using javascript and I would appreciate any suggestions how I can do it.

Thank you in advance,
Xenia

**funkdaddu** · 10:10 AM

You need to convert your dates to JS date objects and then compare them:

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 pickupDate = new Date(document.FormName.puYear.value,document.FormName.puMonth.value-1,document.FormName.puDay.value,0,0,0,0);
	var dropoffDate = new Date(document.FormName.doYear.value,document.FormName.doMonth.value-1,document.FormName.doDay.value,0,0,0,0);
	
	if (dropoffDate > pickupDate) {
		return true;
	} else {
		alert("Your Drop Off date needs to be later than your Pick Up date");
		return false;
	}
}
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
		<form id="FormName" action="submit.php" method="get" name="FormName" onsubmit="return checkDates();">
			Pickup: <input type="text" name="puMonth" value="05" size="2" maxlength="2">/<input type="text" name="puDay" value="10" size="2" maxlength="2">/<input type="text" name="puYear" value="2006" size="4" maxlength="4">(MM/DD/YYYY)
			<p>Drop Off:  <input type="text" name="doMonth" value="05" size="2" maxlength="2">/<input type="text" name="doDay" value="9" size="2" maxlength="2">/<input type="text" name="doYear" value="2006" size="4" maxlength="4"> (MM/DD/YYYY)</p>
			<p><input type="submit" name="submitButtonName"></p>
		</form>
		<p></p>
	</body>

</html>

More info on date objects here.

**xenia** · 05-08-2006, 10:25 AM

Actually, the textfield that keeps the pick up date and drop off date it has as one date, so I cannot separate the day-month and year and put it in the javascript as three different textfiles.

Is there any way to put in the function CheckDates to take as a whole date?

Thank you,
Xenia

**funkdaddu** · 05-08-2006, 11:14 AM

How is the date formatted? You should be able to parse the date into the date format.

**xenia** · 05-08-2006, 12:24 PM

Here is the code I have written for the textfields that hold the pick up date and drop off date and also the drop down menues for the hours

HTML Code:

<form action="price_cars2_test.php" method="post" name="form1" id="form1" >
<input name="pickupdate" type="text" size="18" id ="pickupdate" value="pick up date" class="body"/>
<a href="javascript:showCal('Calendar3')"><img src="datebutton.jpg" alt="dates" border="0" /></a>
                    
                    <select name="pickuphours" class="body">
                    <option selected value="pickuphour"> 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="drop off date" class="body" id="dropoffdate" />
<input name="date" type="text" size="4" value="days" class="body" id="date" style="position:absolute; left: 28px; top: 355px;"/>
<a href="javascript:showCal('Calendar4')"><img src="datebutton.jpg" alt="dates" border="0" /></a>

                      <select name="dropoffhours" class="body" onfocus="calcDays()">
                      <option selected value="dropoffhour"> 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="image" id="button" src="emver images/quotemebutt.jpg" style="position:absolute; left: 142px; top: 354px;" />
</form>

**funkdaddu** · 03:41 PM

Well, I still don't know what format the date is in as I'm guessing the calendar script puts it in there, but if it's in a format like mm/dd/yy, you can just get the value of the text box, split the month, day, year by the "/" and grab the time from the other field and insert them in to the dates, for example if the date format is mm/dd/yy you can do this:

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 pickupDateParts = document.form1.pickupdate.value.split("/");
	var dropoffDateParts = document.form1.dropoffdate.value.split("/");
	
	var puTime = document.form1.pickuphours.value.split(":");
	var doTime = document.form1.dropoffhours.value.split(":");

	var pickupDate = new Date(2000+pickupDateParts[2],pickupDateParts[0]-1,pickupDateParts[1],puTime[0],puTime[1],0,0);
	var dropoffDate = new Date(2000+dropoffDateParts[2],dropoffDateParts[0]-1,dropoffDateParts[1],doTime[0],doTime[1],0,0);
	
	if (dropoffDate > pickupDate) {
		return true;
	} else {
		alert("Your Drop Off date needs to be later than your Pick Up date");
		return false;
	}
}
//-->
</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"/>
<a href="javascript:showCal('Calendar3')"><img src="datebutton.jpg" alt="dates" border="0" /></a>
                    
                    <select name="pickuphours" class="body">
                    <option selected value="pickuphour"> 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/10/06" class="body" id="dropoffdate" />
<input name="date" type="text" size="4" value="days" class="body" id="date" style="position:absolute; left: 28px; top: 355px;"/>
<a href="javascript:showCal('Calendar4')"><img src="datebutton.jpg" alt="dates" border="0" /></a>

                      <select name="dropoffhours" class="body" onfocus="calcDays()">
                      <option selected value="dropoffhour"> 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="image" id="button" src="emver images/quotemebutt.jpg" style="position:absolute; left: 142px; top: 354px;" />
</form>	</body>

</html>

You would need to make a validator so that the dates are correct before running the script...