jonthornton timepicker - 最初の時間を選択した後にもう一度無効にする

Question

タイトルが述べたように、最初の時間間隔を選択した後、以前の時間範囲を無効にする方法。言葉で私の問題を説明することはできません。だから私はそれをより明確にするためにいくつかのコーディングを提供します。

<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> 

以上の期間のようなものですしている時間（から）と時間（まで）：

私のhtml timepickerは次のようになります。ああ、最初のすべての私は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）に焦点を当てると、選択時間の範囲をそれ以降に変更したいことを意味します。

たとえば、Time（from）時間が04:00:00（24フォーマット）。 04:00:00と03:00:00の間のTime（to）範囲に焦点を当てると、それは無効になります。 04:00:00、05:00:00のみ継続可能です。

助けが必要です。

更新：ナンセンス英語の謝罪。たとえば、時間（From）= 04:00:00、時間（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>