两个时间选择器之间的差异

Question

我正在创建一个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的时间选择器

Answer 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>

Answer 2

基于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>