从表格中的2个选择时间选项中计算出时间持续时间值

我的表单具有选择的值时间：。

它们处于以下格式的时间：选择时间小时，然后选择AM或PM

选择的时间：以：以：选择时间小时，然后选择AM或PM

如何获得所选值之间的持续时间并使持续时间输入字段填充

示例

1）1：00 pm -5：00 pm =持续时间/持续时间输入4小时

2）上午9:00 -3：30 pm = 6.5小时持续时间/持续时间输入，填充6.5小时

<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-10">
    <div class="col-md-6">
        <div class="row">
            <label class="control-label col-lg-2 text-semibold">From:</label>
            <div class="col-lg-5 pr-20">
                <div class="form-group">
                    <select id="time_from" name="time_from" class="form-control">
                        <option value="1">1:00</option>
                        <option value="130">1:30</option>
                        <option value="2">2:00</option>
                        <option value="230">2:30</option>
                        <option value="3">3:00</option>
                        <option value="330">3:30</option>
                        <option value="4">4:00</option>
                        <option value="430">4:30</option>
                        <option value="5">5:00</option>
                        <option value="530">5:30</option>
                        <option value="6">6:00</option>
                        <option value="630">6:30</option>
                        <option value="7">7:00</option>
                        <option value="730">7:30</option>
                        <option value="8">8:00</option>
                        <option value="830">8:30</option>
                        <option value="9">9:00</option>
                        <option value="930">9:30</option>
                        <option value="10">10:00</option>
                        <option value="1030">10:30</option>
                        <option value="11">11:00</option>
                        <option value="1130">11:30</option>
                        <option value="12">12:00</option>
                        <option value="1230">12:30</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-5 pr-20">
                <div class="form-group">
                    <select id="time_from_am_pm" name="time_from_am_pm" class="form-control">
                        <option value="pm">pm</option>
                        <option value="am">am</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <label class="control-label col-lg-2 pl-20 text-semibold">To:</label>
            <div class="col-lg-5 pr-20">
                <div class="form-group">
                    <select id="time_to" name="time_to" class="form-control">
                        <option value="1">1:00</option>
                        <option value="130">1:30</option>
                        <option value="2">2:00</option>
                        <option value="230">2:30</option>
                        <option value="3">3:00</option>
                        <option value="330">3:30</option>
                        <option value="4">4:00</option>
                        <option value="430">4:30</option>
                        <option value="5">5:00</option>
                        <option value="530">5:30</option>
                        <option value="6">6:00</option>
                        <option value="630">6:30</option>
                        <option value="7">7:00</option>
                        <option value="730">7:30</option>
                        <option value="8">8:00</option>
                        <option value="830">8:30</option>
                        <option value="9">9:00</option>
                        <option value="930">9:30</option>
                        <option value="10">10:00</option>
                        <option value="1030">10:30</option>
                        <option value="11">11:00</option>
                        <option value="1130">11:30</option>
                        <option value="12">12:00</option>
                        <option value="1230">12:30</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-5 pr-20">
                <div class="form-group">
                    <select id="time_to_am_pm" name="time_to_am_pm" class="form-control">
                        <option value="pm">pm</option>
                        <option value="am">am</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2 text-semibold">Duration:</label>
<div class="col-lg-10">
    <input type="text" name="booking_duration" class="form-control">
</div>
</div>

使用MomentJS您可以为四个字段编写一个更改事件处理程序：

$('#time_from, #time_from_am_pm, #time_to, #time_to_am_pm').on('change', function(e) {
  var timeFrom = moment($('#time_from option:selected').text() + 
              $('#time_from_am_pm option:selected').text(), 'HH:mma');
 var timeTo = moment($('#time_to option:selected').text() + 
              $('#time_to_am_pm option:selected').text(), 'HH:mma');
 var dif = timeTo.diff(timeFrom);
 if (dif < 0) {
    timeTo = timeTo.add(1, 'days');
    dif = timeTo.diff(timeFrom);
 }
 var d = moment.duration(dif);
 var result = +d.get('hours') + (+d.get('minutes') / 60);
 $('[name="booking_duration"]').val(result);

}）;

摘要：

$('#time_from, #time_from_am_pm, #time_to, #time_to_am_pm').on('change', function(e) {
  var timeFrom = moment($('#time_from option:selected').text() + $('#time_from_am_pm option:selected').text(), 'HH:mma');
  var timeTo = moment($('#time_to option:selected').text() + $('#time_to_am_pm option:selected').text(), 'HH:mma');
  var dif = timeTo.diff(timeFrom);
  if (dif < 0) {
    timeTo = timeTo.add(1, 'days');
    dif = timeTo.diff(timeFrom);
  }
  var d = moment.duration(dif);
  var result = +d.get('hours') + (+d.get('minutes') / 60);
  $('[name="booking_duration"]').val(result);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.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/moment.js/2.17.1/moment.min.js"></script>
<div class="row">
  <div class="col-lg-2"></div>
  <div class="col-lg-10">
    <div class="col-md-6">
      <div class="row">
        <label class="control-label col-lg-2 text-semibold">From:</label>
        <div class="col-lg-5 pr-20">
          <div class="form-group">
            <select id="time_from" name="time_from" class="form-control">
              <option value="1">1:00</option>
              <option value="130">1:30</option>
              <option value="2">2:00</option>
              <option value="230">2:30</option>
              <option value="3">3:00</option>
              <option value="330">3:30</option>
              <option value="4">4:00</option>
              <option value="430">4:30</option>
              <option value="5">5:00</option>
              <option value="530">5:30</option>
              <option value="6">6:00</option>
              <option value="630">6:30</option>
              <option value="7">7:00</option>
              <option value="730">7:30</option>
              <option value="8">8:00</option>
              <option value="830">8:30</option>
              <option value="9">9:00</option>
              <option value="930">9:30</option>
              <option value="10">10:00</option>
              <option value="1030">10:30</option>
              <option value="11">11:00</option>
              <option value="1130">11:30</option>
              <option value="12">12:00</option>
              <option value="1230">12:30</option>
            </select>
          </div>
        </div>
        <div class="col-lg-5 pr-20">
          <div class="form-group">
            <select id="time_from_am_pm" name="time_from_am_pm" class="form-control">
              <option value="pm">pm</option>
              <option value="am">am</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row">
        <label class="control-label col-lg-2 pl-20 text-semibold">To:</label>
        <div class="col-lg-5 pr-20">
          <div class="form-group">
            <select id="time_to" name="time_to" class="form-control">
              <option value="1">1:00</option>
              <option value="130">1:30</option>
              <option value="2">2:00</option>
              <option value="230">2:30</option>
              <option value="3">3:00</option>
              <option value="330">3:30</option>
              <option value="4">4:00</option>
              <option value="430">4:30</option>
              <option value="5">5:00</option>
              <option value="530">5:30</option>
              <option value="6">6:00</option>
              <option value="630">6:30</option>
              <option value="7">7:00</option>
              <option value="730">7:30</option>
              <option value="8">8:00</option>
              <option value="830">8:30</option>
              <option value="9">9:00</option>
              <option value="930">9:30</option>
              <option value="10">10:00</option>
              <option value="1030">10:30</option>
              <option value="11">11:00</option>
              <option value="1130">11:30</option>
              <option value="12">12:00</option>
              <option value="1230">12:30</option>
            </select>
          </div>
        </div>
        <div class="col-lg-5 pr-20">
          <div class="form-group">
            <select id="time_to_am_pm" name="time_to_am_pm" class="form-control">
              <option value="pm">pm</option>
              <option value="am">am</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="form-group">
  <label class="control-label col-lg-2 text-semibold">Duration:</label>
  <div class="col-lg-10">
    <input type="text" name="booking_duration" class="form-control">
  </div>
</div>

您可以使用jQuery timepicker时间选择器与时间获取有效的日期对象，并使用以下代码计算持续时间

//this returns duration in hours
var calculateDuration = function(timefrom,timeto){
      var d = (timeto.getTime()-timefrom.getTime())/60000;
      return d<0?0:d;
}

相关内容

最新更新

热门标签：