PDA

Click to See Complete Forum and Search --> : Help - Comparing Two Dates in Select Box

webbie2k
09-25-2003, 07:20 PM
Hi, Please help me I am new at javascript.

The problem:
Compare and validate between two dates in a select field where End Date should always be greater than Start Date.
For example
1. Start Date 26/09/2003 when compare with End Date 26/07/2003 should return an error.

Note: The Start Date could be any future Date. The requirement is that Start Date have to always be less than or
equal to End Date. Else return and error.

I have no problem validating the difference in year and date, but the month is not responding.

The following is the code.
checkForm.js
/*********************/
function compareTwoDate(startDate, endDate, startMonth, endMonth, startYear, endYear){

if (endYear.value >= startYear.value && endMonth.value < startMonth.value){
alert("Expiry Month must be greater than or equal to Start Month");
return false;
}
else if (endYear.value >= startYear.value && endMonth.value >= startMonth.value){

if (endDate.value < startDate.value){
alert ("Expiry Date must be greater than or equal to Start Date");
}
else
return true;
}
else
alert("Expiry Year must be greater than or equal to Start Year");
return true;

}

/*********************************/
The above function is called within the date.html via check_form()
date.html
/********************************/
<html>
<head></head><body>

<script language="JavaScript" src="checkForm.js"></script>
<script language="JavaScript">
function check_form()
{
var startdate = document.date_form.startdate ;
var startmonth = document.date_form.startmonth;
var startyear = document.date_form.startyear;
var endDate = document.date_form.endDate ;
var endMonth = document.date_form.endMonth;
var endYear = document.date_form.endYear;

ok = false;
ok = (compareTwoDate (startday, endDay, startmonth, endMonth, startyear, endYear));

if(ok)
return true;
else
return false;
}

</script>
<form name="date_form" onSubmit="return(check_form())";>
Start Date
<select name="startdate">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">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>
<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 value="31">31</option>
</select>
<select name="startmonth">
<option value="01"> January</option>
<option value="02"> February</option>
<option value="03"> March</option>
<option value="04"> April</option>
<option value="05"> May</option>
<option value="06"> June</option>
<option value="07"> July</option>
<option value="08"> August</option>
<option value="09"> September</option>
<option value="10"> October</option>
<option value="11"> November</option>
<option value="12"> December</option>
</select>
<select name="startyear">
<option value="2002"> 2002</option>
<option value="2003"> 2003</option>
<option value="2004"> 2004</option>
<option value="2005"> 2005</option>
</select>
</p>
<p>Expired Date
<select name="endDate">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">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>
<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 value="31">31</option>
</select>
<select name="endMonth">
<option value="January"> January</option>
<option value="February"> February</option>
<option value="March"> March</option>
<option value="April"> April</option>
<option value="May"> May</option>
<option value="June"> June</option>
<option value="July"> July</option>
<option value="August"> August</option>
<option value="September"> September</option>
<option value="October"> October</option>
<option value="November"> November</option>
<option value="December"> December</option>
</select>
<select name="endYear">
<option value="2002"> 2002</option>
<option value="2003"> 2003</option>
<option value="2004"> 2004</option>
<option value="2005"> 2005</option>
</select>

</form>

</body>

</html>
Khalid Ali
09-25-2003, 07:25 PM
try this link...

http://www.webapplikations.com/pages/html_js/forms/DateRangeSelector.html
webbie2k
09-25-2003, 08:56 PM
Thanks for the link. Had a look at it already.

Setting the field to current date is not a problem. It is done by this script

<script type="text/javascript" language="javascript">
function setDate() {
var today = new Date();
with (document.date_form) {
startmonth.selectedIndex = today.getMonth();
startdate.selectedIndex = today.getDate() - 1;
var thisyear = today.getYear().toString();
startyear.selectedIndex = thisyear.charAt(thisyear.length-1) - 2;
endMonth.selectedIndex = today.getMonth();
endDate.selectedIndex = today.getDate() - 1;
var thisyear = today.getYear().toString();
endYear.selectedIndex = thisyear.charAt(thisyear.length-1) - 2;

}
}
</script>

What I want is to compare the Start Month to End Month
where if Start Year is = to End Year than
Start Month have to be either = to less than End Month.
webbie2k
09-25-2003, 09:41 PM
Just letting you know that it works now. I must be blind. The error is here endMonth is a string while startMonth is an integer.

<select name="endMonth">
<option value="January"> January</option>
<option value="February"> February</option>
<option value="March"> March</option>
<option value="April"> April</option>
<option value="May"> May</option>
<option value="June"> June</option>
<option value="July"> July</option>
<option value="August"> August</option>
<option value="September"> September</option>
<option value="October"> October</option>
<option value="November"> November</option>
<option value="December"> December</option>
</select>

Correct format is
<select name="endMonth">
<option value="01"> January</option>
<option value="02"> February</option>
<option value="03"> March</option>
<option value="04"> April</option>
<option value="05"> May</option>
<option value="06"> June</option>
<option value="07"> July</option>
<option value="08"> August</option>
<option value="09"> September</option>
<option value="10"> October</option>
<option value="11"> November</option>
<option value="12"> December</option>
</select>

Thanks all.