Link to home
Start Free TrialLog in
Avatar of boukaka
boukakaFlag for Canada

asked on

Calculate difference between 2 dates in drop down boxes.

Hi,

I have a web page with two drop down date forms. Each of them currently validates the dates to make sure the dates are correct.

I want to take the value of the date chosen from the drop down boxes in the first form (f1) and calculate the difference between that and the value of the date chosen from the drop down boxes in the second form (f2). I have found a few scripts that do the datediff function calculation but I don't know how to get the "value" from each of the drop down date boxes to use in the script.

AS IS before adding any datediff scripting, the javascript that validates the two forms looks like this *(This part works great by the way)
--- the html form I have is below this script ---

******************************* Javascript ****************************************

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function populate(objForm,selectIndex) {
timeA = new Date(objForm.year.options[objForm.year.selectedIndex].text, objForm.month.options[objForm.month.selectedIndex].value,1);
timeDifference = timeA - 86400000;
timeB = new Date(timeDifference);
var daysInMonth = timeB.getDate();
for (var i = 0; i < objForm.day.length; i++) {
objForm.day.options[0] = null;
}
for (var i = 0; i < daysInMonth; i++) {
objForm.day.options[i] = new Option(i+1);
}
document.f1.day.options[0].selected = true;
}
function getYears() {

// You can easily customize what years can be used
var years = new Array(2005, 2006, 2007, 2008, 2009, 2010)

for (var i = 0; i < document.f1.year.length; i++) {
document.f1.year.options[0] = null;
}
timeC = new Date();
currYear = timeC.getFullYear();
for (var i = 0; i < years.length; i++) {
document.f1.year.options[i] = new Option(years[i]);
}
document.f1.year.options[2].selected=true;
}
window.onLoad = getYears;
//  End -->
</script>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function populate(objForm,selectIndex) {
timeA = new Date(objForm.year.options[objForm.year.selectedIndex].text, objForm.month.options[objForm.month.selectedIndex].value,1);
timeDifference = timeA - 86400000;
timeB = new Date(timeDifference);
var daysInMonth = timeB.getDate();
for (var i = 0; i < objForm.day.length; i++) {
objForm.day.options[0] = null;
}
for (var i = 0; i < daysInMonth; i++) {
objForm.day.options[i] = new Option(i+1);
}
document.f2.day.options[0].selected = true;
}
function getYears() {

// Customize what years can be used
var years = new Array(2005, 2006, 2007, 2008, 2009, 2010)

for (var i = 0; i < document.f2.year.length; i++) {
document.f2.year.options[0] = null;
}
timeC = new Date();
currYear = timeC.getFullYear();
for (var i = 0; i < years.length; i++) {
document.f2.year.options[i] = new Option(years[i]);
}
document.f2.year.options[2].selected=true;
}
window.onLoad = getYears;
//  End -->
</script>

****************************************HTML***********************************
<table>
<tr>
<td>
<form name=f1>
<table border=0>
<tr>
<td align=center style="FONT-SIZE: 10pt;FONT-FAMILY: Arial;mso-bidi-font-size: 12.0pt;"><b>Please Cover me From:</b>
<select name=year onChange="populate(this.form,this.form.month.selectedIndex);">
<option selected value=99>2005</option>
<option value=00>2006</option>
<option value=01>2007</option>
<option value=02>2008</option>
</select>

<select name=month onChange="populate(this.form,this.selectedIndex);">
<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=day>
<option>  </option>
<option>  </option>
<option>  </option>
<option>  </option>
<option>  </option>
<option>  </option>
<option>  </option>
</select>
</td>
</tr>
</table>
</form>
</td>

<td>
<form name=f2>
<table border=0>
<tr>
<td align=center style="FONT-SIZE: 10pt;FONT-FAMILY: Arial;mso-bidi-font-size: 12.0pt;"><b>To:</b>
<select name=year onChange="populate(this.form,this.form.month.selectedIndex);">
<option selected value=99>2005</option>
<option value=00>2006</option>
<option value=01>2007</option>
<option value=02>2008</option>
</select>

<select name=month onChange="populate(this.form,this.selectedIndex);">
<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=day>
<option>  </option>
<option>  </option>
<option>  </option>
<option>  </option>
<option>  </option>
<option>  </option>
<option>  </option>
</select>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image
Avatar of boukaka
boukaka
Flag of Canada image

ASKER

I found that script already. As I said, what I'm looking for is a script that will grab the date value from my first drop down form and my second drop down form. This script uses text boxes so the field they calculate by is a single field which they call dateStr.

In my form, I have date drop down boxes, so there isn't a single field that one could use to calculate on, do you see what I'm saying?

In my f1 & f2 forms my dates are set up as 3 fields:  year, month & day... I don't know how to take this year, month & day from form f1, put it into a single field which I could call "firstdate" and take the year, month & dat from form f2, put them into a single field which I could call "seconddate" and then used them in a formula like this one.

In their script they have:

function dateDiff(dateform) {
date1 = new Date();
date2 = new Date();
diff  = new Date();

if (isValidDate(dateform.firstdate.value) && isValidTime(dateform.firsttime.value)) { // Validates first date
date1temp = new Date(dateform.firstdate.value + " " + dateform.firsttime.value);
date1.setTime(date1temp.getTime());

***************in my form, how do I get the value of my dropdown box as a date field to use in this calculation or a calculation like this one?
ASKER CERTIFIED SOLUTION
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of boukaka
boukaka
Flag of Canada image

ASKER

AH!!! that is exactly what I was looking for!! Thank you.
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image
Hello boukaka,

>> I have found a few scripts that do the datediff function

In which format this script accept the dates.

Javascript Date() object does have many methods such as getDay() , getMonth(), etc.

You can find comprehensive reference page at

http://www.w3schools.com/jsref/jsref_obj_date.asp