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

Question

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

这是输出的样本：

在此示例中，用户从下午 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, based on the answer of 的持续时间和日期解析功能的简单解决方案。您也可以直接使用生成的字符串作为 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>

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

Difference between two time picker

javascript

jquery

adminlte