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

如标题所述，如何在选择第一次持续时间后禁用之前的时间范围。单词无法描述我的问题。所以我提供了一些编码来澄清它。jonthornton timepicker - 第一次选择后禁用第二次

我的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时间选择器。所以，我的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并继续可用。

需要帮助。

更新：道歉无意义的英语。假设我想避免用户选择经过一天的时间，例如Time（From）= 04:00:00和Time（To）= 02:00:00，例如

来源

2016-05-23 AhKing

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

来源

2016-05-23 15:00:25 BenG

哦，我的圣洁的神。你是天才。我没有意识到onChange会对这件事情有所帮助。此外，我不熟悉拆分和加入的东西。感谢让我学习这个。感谢你解决我的问题。这就是我需要的“onChange”。 Upvoted – AhKing

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

回答

相关问题