Geek Answers Handbook

How can I calculate the difference between two times, which are in a 24-hour format?

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

Example. Get how many hours have passed from 08:00:00 to 08:00:00 .

Below I get two time values ​​from two drop-down menus and try to calculate the difference in hours between two times. I get the 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>
+4
source share
4 answers

You can simply take away the watch right away by doing so.

 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 a working fiddle http://jsfiddle.net/VnwF7/4/

+18
source

I modified my code to just use the difference without creating another date object:

 $(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; difference = difference / 60 / 60 / 1000; $("p").html("<b>Hour Difference:</b> " + difference) } $("select").change(calculateTime); calculateTime(); });​
+3
source

You do not need to convert them to dates for this particular case. Just do it

  $(document).ready(function() { function calculateTime() { var hourDiff = parseInt($("select[name='timestart']").val().split(':')[0],10) - parseInt($("select[name='timestop']").val().split(':')[0],10); $("p").html("<b>Hour Difference:</b> " + hourDiff ) } $("select").change(calculateTime); calculateTime();

});

Working violin

+3
source

This is not jQuery, but everything related to time and date in JavaScript ...

This may help: datejs http://code.google.com/p/datejs/

Below is the calculation of the date and time from the documents

  Date.today().set({ day: 15 })      // Sets the day to the 15th of the current month and year. Other object values include year|month|day|hour|minute|second.    Date.today().set({ year: 2007, month: 1, day: 20 }) Date.today().add({ days: 2 })      // Adds 2 days to the Date. Other object values include year|month|day|hour|minute|second.    Date.today().add({ years: -1, months: 6, hours: 3 }) Date.today().addYears(1)        // Add 1 year. Date.today().addMonths(-2)       // Subtract 2 months. Date.today().addWeeks(1)        // Add 1 week Date.today().addHours(6)        // Add 6 hours. Date.today().addMinutes(-30)      // Subtract 30 minutes Date.today().addSeconds(15)       // Add 15 seconds. Date.today().addMilliseconds(200)    // Add 200 milliseconds. Date.today().moveToFirstDayOfMonth()  // Returns the first day of the current month. Date.today().moveToLastDayOfMonth()   // Returns the last day of the current month. new Date().clearTime()         // Sets the time to 00:00 (start of the day). Date.today().setTimeToNow()       // Resets the time to the current time (now). The functional opposite of .clearTime()

EDIT: since this is a pretty old answer, I have recently also been very useful for using actions.js for date related operations. http://momentjs.com/ https://github.com/moment/moment/

+2
source

More articles:


All Articles