Working With Time

Ok I have four drop down list with times listed in each (1:00 pm, 1:15 pm, 1:30 pm, 1:45 pm, 2:00 pm). i need to calculate times between them. I need to subtract the first from the second and the third from the fourth.

The code i have below is not working. It continues to display NaN within the textbox document.form1.hours.value. I am only working with the first 2 boxes in the below code.

Here is the code:

------------------------------------------------------------------------
function calculateTotal(){
var dailyStartTime=new Date()
var dailyLunchBreakStart=new Date()
var timeBeforeLunch=new Date()
var dailyStopTime=new Date()
dailyStartTime=document.form1.dailyStartTime.value
dailyLunchBreakStart=document.form1.dailyLunchBreakStart.value
timeBeforeLunch=dailyLunchBreakStart-dailyStartTime

document.form1.hours.value=timeBeforeLunch;

}
-------------------------------------------------------------------------

Here is what one of the drop downs looks like:
--------------------------------------------------------------------------
<select name="dailyStartTime" id="dailyStartTime" onChange="calculateTotal()">
<option>No Time Recorded</option>
<option value="12:00 AM">12:00 AM</option>
<option value="12:15 AM">12:15 AM</option>
<option value="12:30 AM">12:30 AM</option>
<option value="12:45 AM">12:45 AM</option>
<option value="1:00 AM">1:00 AM</option>
<option value="1:15 AM">1:15 AM</option>
<option value="1:30 AM">1:30 AM</option>
<option value="1:45 AM">1:45 AM</option>
<option value="2:00 AM">2:00 AM</option>
<option value="2:15 AM">2:15 AM</option>
<option value="2:30 AM">2:30 AM</option>
<option value="2:45 AM">2:45 AM</option>
<option value="3:00 AM">3:00 AM</option>
<option value="3:15 AM">3:15 AM</option>
<option value="3:30 AM">3:30 AM</option>
<option value="3:45 AM">3:45 AM</option>
<option value="4:00 AM">4:00 AM</option>
<option value="4:15 AM">4:15 AM</option>
<option value="4:30 AM">4:30 AM</option>
<option value="4:45 AM">4:45 AM</option>
<option value="5:00 AM">5:00 AM</option>
<option value="5:15 AM">5:15 AM</option>
<option value="5:30 AM">5:30 AM</option>
<option value="5:45 AM">5:45 AM</option>
<option value="6:00 AM">6:00 AM</option>
<option value="6:15 AM">6:15 AM</option>
<option value="6:30 AM">6:30 AM</option>
<option value="6:45 AM">6:45 AM</option>
<option value="7:00 AM">7:00 AM</option>
<option value="7:15 AM">7:15 AM</option>
<option value="7:30 AM">7:30 AM</option>
<option value="7:45 AM">7:45 AM</option>
<option value="8:00 AM">8:00 AM</option>
<option value="8:15 AM">8:15 AM</option>
<option value="8:30 AM">8:30 AM</option>
<option value="8:45 AM">8:45 AM</option>
<option value="9:00 AM">9:00 AM</option>
<option value="9:15 AM">9:15 AM</option>
<option value="9:30 AM">9:30 AM</option>
<option value="9:45 AM">9:45 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:15 AM">10:15 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="10:45 AM">10:45 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:15 AM">11:15 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="11:45 AM">11:45 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:15 PM">12:15 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="12:45 PM">12:45 PM</option>
<option value="1:00 PM">1:00 PM</option>
<option value="1:15 PM">1:15 PM</option>
<option value="1:30 PM">1:30 PM</option>
<option value="1:45 PM">1:45 PM</option>
<option value="2:00 PM">2:00 PM</option>
<option value="2:15 PM">2:15 PM</option>
<option value="2:30 PM">2:30 PM</option>
<option value="2:45 PM">2:45 PM</option>
<option value="3:00 PM">3:00 PM</option>
<option value="3:15 PM">3:15 PM</option>
<option value="3:30 PM">3:30 PM</option>
<option value="3:45 PM">3:45 PM</option>
<option value="4:00 PM">4:00 PM</option>
<option value="4:15 PM">4:15 PM</option>
<option value="4:30 PM">4:30 PM</option>
<option value="4:45 PM">4:45 PM</option>
<option value="5:00 PM">5:00 PM</option>
<option value="5:15 PM">5:15 PM</option>
<option value="5:30 PM">5:30 PM</option>
<option value="5:45 PM">5:45 PM</option>
<option value="6:00 PM">6:00 PM</option>
<option value="6:15 PM">6:15 PM</option>
<option value="6:30 PM">6:30 PM</option>
<option value="6:45 PM">6:45 PM</option>
<option value="7:00 PM">7:00 PM</option>
<option value="7:15 PM">7:15 PM</option>
<option value="7:30 PM">7:30 PM</option>
<option value="7:45 PM">7:45 PM</option>
<option value="8:00 PM">8:00 PM</option>
<option value="8:15 PM">8:15 PM</option>
<option value="8:30 PM">8:30 PM</option>
<option value="8:45 PM">8:45 PM</option>
<option value="9:00 PM">9:00 PM</option>
<option value="9:15 PM">9:15 PM</option>
<option value="9:30 PM">9:30 PM</option>
<option value="9:45 PM">9:45 PM</option>
<option value="10:00 PM">10:00 PM</option>
<option value="10:15 PM">10:15 PM</option>
<option value="10:30 PM">10:30 PM</option>
<option value="10:45 PM">10:45 PM</option>
<option value="11:00 PM">11:00 PM</option>
<option value="11:15 PM">11:15 PM</option>
<option value="11:30 PM">11:30 PM</option>
<option value="11:45 PM">11:45 PM</option>
<option value="12:00 PM">12:00 PM</option>
</select>
----------------------------------------------------------------------

any help is appreciated. thanks

dailyStartTime=document.form1.dailyStartTime.value That is not how you get get the value from a dropdown.

This is what you should use.....
var sel = document.form1.dailyStatTime;
var val = sel.options[sel.selectedIndex].value;


I would not be happy if I had to select a value from that drop down! way to many values, you should think about breaking up each time into seperate parts. My 2 cents

Eric

not clear on what you mean by breaking it up. can you explain more please? I will try what you suggested out now. thank you.

ok i changed the code to:
---------------------------------------------------------------
function calculateTotal(){
//var dailyStartTime=new Date();
//var dailyLunchBreakStart=new Date();
//var timeBeforeLunch=new Date();
//var dailyStopTime=new Date();

var dailyStartTimesel = document.form1.dailyStartTime;
var dailyStartTimeval = dailyStartTimesel.options[dailyStartTimesel.selectedIndex].value;
var dailyLunchBreakStartsel = document.form1.dailyLunchBreakStart;
var dailyLunchBreakStartval = dailyLunchBreakStartsel.options[dailyLunchBreakStartsel.selectedIndex].value;

var timeBeforeLunch=dailyLunchBreakStartval-dailyStartTimeval;

document.form1.hours.value=timeBeforeLunch;

}
-----------------------------------------------------------

The document.form1.hours.value is till displaying NaN when the function executes. ??

keep in mind that I'm not that great with javascript.

The real problem is you are trying to subtract two times when they are actually strings. You need to create data objects for each of the select values and then subtract them.

theStart = new Date(theVar1);
theEnd = new Date(theVar2);

theDiff = theEnd - theStart;


Eric

The Date object expects a date with or without time, not a time only.

function calculateTotal(selStart, selLunch){
var timeBeforeLunch='';
if (selStart.selectedIndex>0 && selLunch.selectedIndex>0){ //ignore first option items
var dailyStartTime = new Date("1/1/2004 " + selStart.options[selStart.selectedIndex].value);
var dailyLunchBreakStart = new Date("1/1/2004 " + selLunch.options[selLunch.selectedIndex].value);
timeBeforeLunch = dailyLunchBreakStart-dailyStartTime/(1000*60*60); //convert milliseconds to hours
}
selStart.form.hours.value=timeBeforeLunch;
}
...
<select name="dailyStartTime" id="dailyStartTime" onChange="calculateTotal(this, this.form.dailyLunchBreakStart')">
<option>No Time Recorded</option>
...
</select>
<select name="dailyLunchBreakStart" id="dailyLunchBreakStart" onChange="calculateTotal(this.form.dailyStartTime, this)">
<option>No Time Recorded</option>
...
</select>

glenn you are the man!

just make sure to change:

timeBeforeLunch = dailyLunchBreakStart-dailyStartTime/(1000*60*60); //convert milliseconds to hours

to:

timeBeforeLunch = (dailyLunchBreakStart-dailyStartTime)/(1000*60*60); //convert milliseconds to hours

need the parenthesis

thanks a ton!!!