title: How can I calculate the difference between two times that are in 24 hour format?
body: <p>In JavaScript, how can I calculate the difference between two times that are in 24 hour format?</p>
  
  <p>Example: Get how many hours elapsed from <code>08:00:00</code> to <code>23:00:00</code>.</p>
  
  <p>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...</p>
  
  <p>Working example: <a href="http://jsfiddle.net/VnwF7/1/" rel="noreferrer">http://jsfiddle.net/VnwF7/1/</a></p>
  
  <p><strong>Script:</strong></p>
  
  <pre><code>$(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("&lt;b&gt;Total Hours:&lt;/b&gt; " + hourDiff )          
      }
      $("select").change(calculateTime);
      calculateTime();
  });
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;select name="timestart"&gt;
  &lt;option value="00:00:00"&gt;12:00 am&lt;/option&gt;
  &lt;option value="01:00:00"&gt;1:00 am&lt;/option&gt;
  &lt;option value="02:00:00"&gt;2:00 am&lt;/option&gt;
  &lt;option value="03:00:00"&gt;3:00 am&lt;/option&gt;
  &lt;option value="04:00:00"&gt;4:00 am&lt;/option&gt;
  &lt;option value="05:00:00"&gt;5:00 am&lt;/option&gt;
  &lt;option value="06:00:00"&gt;6:00 am&lt;/option&gt;
  &lt;option value="07:00:00"&gt;7:00 am&lt;/option&gt;
  &lt;option value="08:00:00"&gt;8:00 am&lt;/option&gt;
  &lt;option value="09:00:00"&gt;9:00 am&lt;/option&gt;
  &lt;option value="10:00:00"&gt;10:00 am&lt;/option&gt;
  &lt;option value="11:00:00"&gt;11:00 am&lt;/option&gt;
  &lt;option value="12:00:00"&gt;12:00 pm&lt;/option&gt;
  &lt;option value="13:00:00"&gt;1:00 pm&lt;/option&gt;
  &lt;option value="14:00:00"&gt;2:00 pm&lt;/option&gt;
  &lt;option value="15:00:00"&gt;3:00 pm&lt;/option&gt;
  &lt;option value="16:00:00"&gt;4:00 pm&lt;/option&gt;
  &lt;option value="17:00:00"&gt;5:00 pm&lt;/option&gt;
  &lt;option value="18:00:00"&gt;6:00 pm&lt;/option&gt;
  &lt;option value="19:00:00"&gt;7:00 pm&lt;/option&gt;
  &lt;option value="20:00:00"&gt;8:00 pm&lt;/option&gt;
  &lt;option value="21:00:00"&gt;9:00 pm&lt;/option&gt;
  &lt;option value="22:00:00"&gt;10:00 pm&lt;/option&gt;
  &lt;option value="23:00:00"&gt;11:00 pm&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="timestop"&gt;
  &lt;option value="00:00:00"&gt;12:00 am&lt;/option&gt;
  &lt;option value="01:00:00"&gt;1:00 am&lt;/option&gt;
  &lt;option value="02:00:00"&gt;2:00 am&lt;/option&gt;
  &lt;option value="03:00:00"&gt;3:00 am&lt;/option&gt;
  &lt;option value="04:00:00"&gt;4:00 am&lt;/option&gt;
  &lt;option value="05:00:00"&gt;5:00 am&lt;/option&gt;
  &lt;option value="06:00:00"&gt;6:00 am&lt;/option&gt;
  &lt;option value="07:00:00"&gt;7:00 am&lt;/option&gt;
  &lt;option value="08:00:00"&gt;8:00 am&lt;/option&gt;
  &lt;option value="09:00:00"&gt;9:00 am&lt;/option&gt;
  &lt;option value="10:00:00"&gt;10:00 am&lt;/option&gt;
  &lt;option value="11:00:00"&gt;11:00 am&lt;/option&gt;
  &lt;option value="12:00:00"&gt;12:00 pm&lt;/option&gt;
  &lt;option value="13:00:00"&gt;1:00 pm&lt;/option&gt;
  &lt;option value="14:00:00"&gt;2:00 pm&lt;/option&gt;
  &lt;option value="15:00:00"&gt;3:00 pm&lt;/option&gt;
  &lt;option value="16:00:00"&gt;4:00 pm&lt;/option&gt;
  &lt;option value="17:00:00"&gt;5:00 pm&lt;/option&gt;
  &lt;option value="18:00:00"&gt;6:00 pm&lt;/option&gt;
  &lt;option value="19:00:00"&gt;7:00 pm&lt;/option&gt;
  &lt;option value="20:00:00"&gt;8:00 pm&lt;/option&gt;
  &lt;option value="21:00:00"&gt;9:00 pm&lt;/option&gt;
  &lt;option value="22:00:00"&gt;10:00 pm&lt;/option&gt;
  &lt;option value="23:00:00"&gt;11:00 pm&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;p&gt;&lt;/p&gt;
  </code></pre>