如何设置结束时间给我正确的时间间隔？

Question

我正在尝试修复我的 JQuery 时间选择器以给我正确的结束时间。仅当我选择开始时间和间隔时，我当前的代码才能正常工作。示例：如果我选择上午 8:00 并选择间隔 30 分钟，我的结束时间将自动为上午 8:30，但是我的问题来了，因为我想在那之后点击我的下拉结束时间来查看像上午 8:30 这样的间隔（即我有），上午 9:00，上午 9:30，... 等等，直到下午 5:00，这是我最后一次。这是我的 HTML 代码：

 $(function() {
   for (var i = 5; i <= 60; i += 5) {
     $('#meeting').append('<option value="' + i + '">' + i + '   min' + '</option>');
   }

   function setEndTime() {
     var meetingLength = parseInt($('#meeting').find('option:selected').val() || 0);
     var selectedTime = $('#stime').timepicker('getTime');
     if (selectedTime == null || selectedTime == "") {
       alert("Please select the start time.");
     } else {
       selectedTime.setMinutes(selectedTime.getMinutes() + parseInt(meetingLength, 10), 0);
       $('#etime').timepicker('setTime', selectedTime);
     }
   }

   $('#stime').timepicker({
     'timeFormat': 'h:i a',
     'minTime': '8:00 AM',
     'maxTime': '5:00 PM',
     'step': 30
   }).on(function() {
     setEndTime();
   });

   $('#etime').timepicker({
     'timeFormat': 'h:i a',
     'minTime': '8:00 AM',
     'maxTime': '5:00 PM',
     'step': 5
   });

   $('#meeting').bind('change', function() {
     setEndTime();
   });
 });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.min.js"></script>

<tr>
  <th>Start Time:</th>
  <td>
    <input type="text" id="stime" name="stime" class="time" />
  </td>
</tr>
<tr>
  <th>Length of meeting:</th>
  <td>
    <select name="meeting" id="meeting">
      <option value="">--Select length--</option>
    </select>
  </td>
</tr>
<tr>
  <th>End Time:</th>
  <td>
    <input type="text" id="etime" name="etime" class="time">
  </td>
</tr>

我不确定我的代码应该在哪里修改以根据选定的时间间隔给我结束时间。如果看到我的代码在哪里破坏，请告诉我。谢谢你。

Answer 1

使用区间将#etime 的step 属性更改为函数（因此是动态值）：

$('#etime').timepicker({
  'timeFormat': 'h:i a',
  'minTime': '8:00 AM',
  'maxTime': '5:00 PM',
  'step': function(i) {
            return $('#meeting').val() || 5;
          }
});

可运行示例

$(function() {
  for (var i = 5; i <= 60; i += 5) {
    $('#meeting').append('<option value="' + i + '">' + i + '   min' + '</option>');
  }

  function setEndTime() {
    var meetingLength = parseInt($('#meeting').find('option:selected').val() || 0);
    var selectedTime = $('#stime').timepicker('getTime');
    if (selectedTime == null || selectedTime == "") {
      alert("Please select the start time.");
    } else {
      selectedTime.setMinutes(selectedTime.getMinutes() + parseInt(meetingLength, 10), 0);
      $('#etime').timepicker('setTime', selectedTime);
    }
  }

  $('#stime').timepicker({
    'timeFormat': 'h:i a',
    'minTime': '8:00 AM',
    'maxTime': '5:00 PM',
    'step': 30
  }).on(function() {
    setEndTime();
  });

  $('#etime').timepicker({
    'timeFormat': 'h:i a',
    'minTime': '8:00 AM',
    'maxTime': '5:00 PM',
    'step': 5
  });

  $('#meeting').bind('change', function() {
    $('#etime').timepicker('remove');
    $('#etime').timepicker({
      'timeFormat': 'h:i a',
      'minTime': '8:00 AM',
      'maxTime': '5:00 PM',
      'step': $('#meeting').val()
    });
    setEndTime();
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.min.js"></script>

<tr>
  <th>Start Time:</th>
  <td>
    <input type="text" id="stime" name="stime" class="time" />
  </td>
</tr>
<tr>
  <th>Length of meeting:</th>
  <td>
    <select name="meeting" id="meeting">
      <option value="">--Select length--</option>
    </select>
  </td>
</tr>
<tr>
  <th>End Time:</th>
  <td>
    <input type="text" id="etime" name="etime" class="time">
  </td>
</tr>

编辑

由于间隔变化时picker不刷新，所以有一个脏招强制刷新，完全移除picker并重新创建（我编辑了上面的sn-p）：

$('#etime').timepicker({
  'timeFormat': 'h:i a',
  'minTime': '8:00 AM',
  'maxTime': '5:00 PM',
  'step': 5
});

$('#meeting').bind('change', function() {
  $('#etime').timepicker('remove');
  $('#etime').timepicker({
    'timeFormat': 'h:i a',
    'minTime': '8:00 AM',
    'maxTime': '5:00 PM',
    'step': $('#meeting').val()
  });
  setEndTime();
});