javascript - 从表单中的 2 个选择时间选项计算持续时间值

标签 javascript jquery forms

我有一个表单，其中包含选择值 TIME FROM: 和 TIME TO:。

它们的格式为 TIME FROM:，选择时间，然后选择 am 或 pm

选择 TIME TO: 的格式为 ，选择时间小时，然后选择 am 或 pm

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

示例

1) 下午 1:00 - 下午 5:00 = 4 小时持续时间/输入的持续时间填充 4 小时

2) 上午 9:00 - 下午 3:30 = 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>

关于javascript - 从表单中的 2 个选择时间选项计算持续时间值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41316771/

上一篇：javascript - 我如何通过html中的id获取值

下一篇：javascript - 如何运行依赖于第一个 api 中设置的变量的 api？

相关文章：

c# - ASP.NET MVC 条件验证

JavaScript 表单验证，返回 False

javascript - $.getJSON 触发选择更改事件

javascript - 使用javascript设计表单(选择)，没有框架？

javascript - 使用 jQuery 从字母中产生波浪

javascript - 带有服务器发送事件的自定义事件

asp.net - jquery:查找 id 具有特定模式的元素

javascript - 在 jQuery 中绑定(bind) "up"元素？这是可能的？

javascript - 模态未显示

javascript - 链接在 JavaScript 下拉菜单中不起作用

©2024 IT工具网  联系我们