如何从两个引导时间选择器字段中获取持续时间

Question

我正在使用Bootstrap 3制作一个表单，其中我添加了两个时间选择器。 但我的问题是如何从两个输入字段中获取持续时间值。

注意：我在使用 parseInt(( 获取 int 值second得到结果。 我怎样才能让他们像 130 = 2：10 HR

小提琴

<div class="form-group">
<label class="control-label " for="textarea">Task Time & Durations</label>
<div class="row">
<div class="input-group col-md-4 bootstrap-timepicker timepicker">
<input id="timepicker1" name="start-time" type="text" class="form-control input-small">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
</div>
<div class="input-group col-md-4 bootstrap-timepicker timepicker">
<input id="timepicker2" name="end-time" type="text" class="form-control input-small">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
</div>
<div class="input-group col-md-4">
<input id="duration" name="duration" type="text" class="form-control input-small" disabled>
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
</div>
</div>
</div>

这是我的JS代码

$(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);                                                            
});    
//-----------------------------------------------------------------
});

Answer 1

我解决了这个问题，感谢您的帮助 工作小提琴希望这会帮助其他人

$(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
if (diff == null) { return ""; }
if (diff <= 0) { return ""; }
var hours = Math.floor(diff / 60);
var minutes = diff % 60;
var hour = (hours > 1) ? hours + " hrs " : hours + " hr ";
var min = (minutes > 0) ? minutes + " mins" : "";
var duration= hour + min;
//store the value to a field 
$("#duration").val(duration);                                                            
});    
});