CyberJunkie CyberJunkie - 26 days ago 3
Javascript Question

How can I calculate the difference between two times that are in 24 hour format?

In JavaScript, how can I calculate the difference between two times that are in 24 hour format

Example: Get how many hours elapsed from

08:00:00
to
23:00:00


Below I'm getting two time values from two dropdown menus and trying to calculate the difference in hours between the two times. I get wrong results...

Working example: http://jsfiddle.net/VnwF7/1/

Script:

$(document).ready(function() {

function calculateTime() {
//get values
var valuestart = $("select[name='timestart']").val();
var valuestop = $("select[name='timestop']").val();

//create date format
var timeStart = new Date("01/01/2007 " + valuestart);
var timeEnd = new Date("01/01/2007 " + valuestop);

var difference = timeEnd - timeStart;
var diff_result = new Date(difference);

var hourDiff = diff_result.getHours();


$("p").html("<b>Total Hours:</b> " + hourDiff )

}
$("select").change(calculateTime);
calculateTime();
});


HTML:

<select name="timestart">
<option value="00:00:00">12:00 am</option>
<option value="01:00:00">1:00 am</option>
<option value="02:00:00">2:00 am</option>
<option value="03:00:00">3:00 am</option>
<option value="04:00:00">4:00 am</option>
<option value="05:00:00">5:00 am</option>
<option value="06:00:00">6:00 am</option>
<option value="07:00:00">7:00 am</option>
<option value="08:00:00">8:00 am</option>
<option value="09:00:00">9:00 am</option>
<option value="10:00:00">10:00 am</option>
<option value="11:00:00">11:00 am</option>
<option value="12:00:00">12:00 pm</option>
<option value="13:00:00">1:00 pm</option>
<option value="14:00:00">2:00 pm</option>
<option value="15:00:00">3:00 pm</option>
<option value="16:00:00">4:00 pm</option>
<option value="17:00:00">5:00 pm</option>
<option value="18:00:00">6:00 pm</option>
<option value="19:00:00">7:00 pm</option>
<option value="20:00:00">8:00 pm</option>
<option value="21:00:00">9:00 pm</option>
<option value="22:00:00">10:00 pm</option>
<option value="23:00:00">11:00 pm</option>
</select>

<select name="timestop">
<option value="00:00:00">12:00 am</option>
<option value="01:00:00">1:00 am</option>
<option value="02:00:00">2:00 am</option>
<option value="03:00:00">3:00 am</option>
<option value="04:00:00">4:00 am</option>
<option value="05:00:00">5:00 am</option>
<option value="06:00:00">6:00 am</option>
<option value="07:00:00">7:00 am</option>
<option value="08:00:00">8:00 am</option>
<option value="09:00:00">9:00 am</option>
<option value="10:00:00">10:00 am</option>
<option value="11:00:00">11:00 am</option>
<option value="12:00:00">12:00 pm</option>
<option value="13:00:00">1:00 pm</option>
<option value="14:00:00">2:00 pm</option>
<option value="15:00:00">3:00 pm</option>
<option value="16:00:00">4:00 pm</option>
<option value="17:00:00">5:00 pm</option>
<option value="18:00:00">6:00 pm</option>
<option value="19:00:00">7:00 pm</option>
<option value="20:00:00">8:00 pm</option>
<option value="21:00:00">9:00 pm</option>
<option value="22:00:00">10:00 pm</option>
<option value="23:00:00">11:00 pm</option>
</select>

<p></p>

Answer

You can just subtract the hours right away doing it this way

var valuestart = $("select[name='timestart']").val();
var valuestop = $("select[name='timestop']").val();

//create date format          
var timeStart = new Date("01/01/2007 " + valuestart).getHours();
var timeEnd = new Date("01/01/2007 " + valuestop).getHours();

var hourDiff = timeEnd - timeStart;             

Here's the working fiddle http://jsfiddle.net/VnwF7/4/