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 格式）。然后，当关注时间 (to) 时，04:00:00、03:00:00 等之间的范围将被禁用。仅 04:00:00、05:00:00 和继续可用。

需要帮助。

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

Answer 1

在从时间使用changeTime并使用.timepicker('option', 'minTime', value)[=14设置到时间=]

$('#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>

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

jonthornton timepicker - disable second time after choosing first time

html

jquery

timepicker