title: How can I get duration from two bootstrap time picker field
body: <p>I am making a form using <strong>Bootstrap 3</strong> where i added two time picker. but my question is how can I get the duration value from two input field.</p>
  
  <p><em>Note:</em> I am getting result in <code>second</code> i use parseInt() to get int value.
  How can I get them like 130 = 2:10 HR</p>
  
  <p><a href="https://jsfiddle.net/rupomkhondaker/Lv0qkxhu/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <pre><code>&lt;div class="form-group"&gt;
  &lt;label class="control-label " for="textarea"&gt;Task Time &amp; Durations&lt;/label&gt;
      &lt;div class="row"&gt;
          &lt;div class="input-group col-md-4 bootstrap-timepicker timepicker"&gt;
              &lt;input id="timepicker1" name="start-time" type="text" class="form-control input-small"&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="input-group col-md-4 bootstrap-timepicker timepicker"&gt;
              &lt;input id="timepicker2" name="end-time" type="text" class="form-control input-small"&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="input-group col-md-4"&gt;
              &lt;input id="duration" name="duration" type="text" class="form-control input-small" disabled&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Here is my JS code</strong></p>
  
  <pre><code>$(document).ready(function(){
          $('#timepicker1,#timepicker2').timepicker({
              minuteStep: 1,
          });
          //-----------------------------------------------------------------
          $("#timepicker2").change(function(){                 
              //get value from parent form 
              var d3 = $("#timepicker1").val(); 
              var d4 = $("#timepicker2").val();       
  
  
              // calculate number of minutes for first field
              var d5 = d3.substring(0, 2);
              var d6 = d3.substring(3, 5);
              var d7 = ((parseInt(d5 )* 60) + (parseInt(d6) * 1));
  
              //calculate number of minutes for second field
              var d8 = d4.substring(0, 2);
              var d9 = d4.substring(3, 5);
              var d10 = ((parseInt(d8) * 60) + (parseInt(d9) * 1)) ;
  
              //final calculation (number of minutes)
              var d11= (d10 - d7) ;
  
  
              diff = d11; // ms per day
  
              //store the value to a field 
              $("#duration").val(diff);                                                            
          });    
  
          //-----------------------------------------------------------------
      });
  </code></pre>