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

How to set end time to give me correct intervals?

本文关键字：时间 何设置 设置 结束      更新时间：2023-09-26

我正在尝试修复JQuery时间选择器，以便给我正确的结束时间。当我选择开始时间和间隔时，我当前的代码运行良好。示例：如果我选择上午8:00并选择间隔30min，我的结束时间将自动为上午8:30，但我的问题来了，因为我想在那之后，当我点击我的下拉菜单"结束时间"时，看到间隔，如上午8:30（我有），上午9:00，上午9:30。。。一直到下午5点，这是我最后一次。这是我的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>

我不确定应该在哪里修改我的代码，以便根据所选的间隔给出结束时间。如果看到我的代码破解在哪里，请告诉我。非常感谢。

使用以下间隔将#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>

编辑

由于选择器在间隔更改时不会刷新，因此有一个肮脏的技巧可以强制刷新，完全删除选择器并重新创建它（我编辑了上面的片段）：

$('#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();
});
相关文章：