Question

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

我的html timepicker看起来像这样：

<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',
    });
});

我的问题是我想在选择时间（从）后禁用之前的时间范围。这意味着当关注时间（to）时，我想改变选择时间的范围是在那个时间之后（来自）

例如，如果选择的时间（从）时间是04:00:00（24格式）。然后当关注时间（到）04:00:00,03：00之间等范围时，禁用。只有04：00：00,05：00：00并且可以继续。

需要帮助。

更新：胡言乱语的道歉。我只想说我想避免用户选择通过一天的时间，例如Time（From）= 04:00:00和Time（To）= 02:00:00，例如

Answer 1

使用来自时间的changeTime，并使用.timepicker('option', 'minTime', value)

将设置为时间

$('#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 - 第一次选择后第二次禁用

1 个答案: