我正在创建一个Over time系统,用户在该系统中输入该时间段的开始时间和结束时间,我的问题是我不知道如何计算该时间段的时间。
以下是输出的示例:
在此示例用户中,工作时间从下午6点开始加点,到晚上8点结束,然后输出必须为2小时。
这是我的代码:
<div class="bootstrap-timepicker">
<div class="form-group">
<label>FROM</label>
<div class="input-group">
<input id="timeFrom" type="text" class="form-control timepicker">
</div>
</div>
</div>
<div class="bootstrap-timepicker">
<div class="form-group">
<label>TO</label>
<div class="input-group">
<input id="timeTO" type="text" class="form-control timepicker">
</div>
</div>
</div>
我当前正在使用Adminlte的时间选择器
答案 0 :(得分:1)
$('.timepicker').timepicker();
function getDiff() {
var timeFrom = $('#timeFrom').data('timepicker');
var timeTO = $('#timeTO').data('timepicker');
debugger;
var timeFromHH = (timeFrom.hour == 12 && timeFrom.meridian == "AM") ? 0 :
(timeFrom.hour != 12 && timeFrom.meridian == "PM") ? timeFrom.hour + 12 :
timeFrom.hour;
var timeTOHH = (timeTO.hour == 12 && timeTO.meridian == "AM") ? 0 :
(timeTO.hour != 12 && timeTO.meridian == "PM") ? timeTO.hour + 12 :
timeTO.hour;
var timeFromMM = timeFromHH * 60 + timeFrom.minute;
var timeTOMM = timeTOHH * 60 + timeTO.minute;
var diffMM = Math.abs(timeTOMM - timeFromMM);
var diff = Math.floor(diffMM / 60) + "hrs " + (diffMM % 60) + "mins";
$("#diff").text(diff);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
<div class="bootstrap-timepicker">
<div class="form-group">
<label>FROM</label>
<div class="input-group">
<input id="timeFrom" type="text" class="form-control timepicker">
</div>
</div>
</div>
<div class="bootstrap-timepicker">
<div class="form-group">
<label>TO</label>
<div class="input-group">
<input id="timeTO" type="text" class="form-control timepicker">
</div>
</div>
</div>
<button onclick="getDiff()">Get Diff</button>
<label id="diff"></label>
答案 1 :(得分:1)
基于moment.js
的答案,使用@Karan的持续时间和日期解析功能的简单解决方案。您也可以将生成的字符串直接用作moment.js解析函数的输入。
$('.timepicker').timepicker();
function getDiff() {
var from = moment(getTimeString($('#timeFrom').data('timepicker')), 'HH:mm A');
var to = moment(getTimeString($('#timeTO').data('timepicker')), 'HH:mm A');
var diff = to.diff(from, 'minutes');
$("#diff").text(diff + ' minutes');
}
function getTimeString(datePickerObject) {
return datePickerObject.hour + ':' + datePickerObject.minute + ' ' + datePickerObject.meridian;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
<div class="bootstrap-timepicker">
<div class="form-group">
<label>FROM</label>
<div class="input-group">
<input id="timeFrom" type="text" class="form-control timepicker">
</div>
</div>
</div>
<div class="bootstrap-timepicker">
<div class="form-group">
<label>TO</label>
<div class="input-group">
<input id="timeTO" type="text" class="form-control timepicker">
</div>
</div>
</div>
<button onclick="getDiff()">Get Diff</button>
<label id="diff"></label>