javascript - 两个时间选择器之间的区别

Question

我正在创建一个超时系统，用户在那里输入 OT 的开始时间和结束时间，我的问题是我不知道如何计算随着时间的推移呈现的小时数。

这是输出示例：

在这个示例中，用户从下午 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的时间选择器

标签： javascriptjqueryadminlte

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