jonthornton timepicker - 选择第一次后第二次禁用

Question

正如标题所说，如何在选择第一个持续时间后禁用先前的时间范围。言语无法描述我的问题。所以我提供了一些编码来更清楚地说明它。

我的 html 时间选择器如下所示：

<div class="row">
  <div class="col"><b>Time (From)</b>
  </div>
  <div class="col">
    <input type="text" class="time_picker" id="timefrom1">
  </div>
</div>

<div class="row">
  <div class="col"><b>Time (To)</b>
  </div>
  <div class="col">
    <input type="text" class="time_picker" id="timeto1">
  </div>
</div>

有时间（从）和时间（到），这更像是持续时间。哦，首先我使用的是 jonthornton timepicker。所以我的 js timepicker 脚本是这样的：

$('body').on('focus',".time_picker",function(){
    $(this).timepicker({
        'minTime': '1.00am',
        'timeFormat': 'H:i:s', 
        'stopScrollPropagation': 'true',
        'showOnFocus': 'true',
        'disableTextInput': 'true',
        'disableTouchKeyboard': 'true',
    });
});

我的问题是我想在选择时间（从）之后禁用上一个时间范围。这意味着当关注时间（到）时，我想更改选择时间的范围是在那个时间（从）之后

例如，如果选择的时间（开始）时间是 04:00:00（24 格式）。然后，当关注时间（到）时，04:00:00、03:00:00 等之间的范围被禁用。只有 04:00:00、05:00:00 和 continue 可用。

需要帮助。

更新：为废话英语道歉。假设我想避免用户选择过去一天的时间，例如 Time (From) = 04:00:00 和 Time (To) = 02:00:00

Answer 1

在 from 时间上使用 changeTime，并使用 .timepicker('option', 'minTime', value) 设置 to 时间

$('#timefrom1, #timeto1').timepicker({
  'minTime': '1.00am',
  'timeFormat': 'H:i:s',
  'stopScrollPropagation': 'true',
  'showOnFocus': 'true',
  'disableTextInput': 'true',
  'disableTouchKeyboard': 'true',
});

$('#timefrom1').on('changeTime', function() {

  var values = $(this).val().split(':');
  if (values[1] == '00') {
    values[1] = '30';
  } else {
    values[0] = +values[0] + 1;
    values[1] = '00';
  }

  $('#timeto1').timepicker('option', 'minTime', values.join(':'));
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/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.10.0/jquery.timepicker.min.js"></script>

<div class="row">
  <div class="col"><b>Time (From)</b>
  </div>
  <div class="col">
    <input type="text" class="time_picker" id="timefrom1">
  </div>
</div>

<div class="row">
  <div class="col"><b>Time (To)</b>
  </div>
  <div class="col">
    <input type="text" class="time_picker" id="timeto1">
  </div>
</div>