JS Timepicker設置和諧的最小和最大時間

Question

我有一個timepicker從http://amsul.ca/pickadate.js/time/

有兩種情況，開始和結束：

<div align="center"> 
    <span class="glyphicon glyphicon-time"></span> 
    <label for="start_time">Start</label> 
    <input name="start_time" id="start_time"> 
    <p></p> 
    <span class="glyphicon glyphicon-time"></span> 
    <label for="finish_time">Finish</label> 
    <input name="finish_time" id="finish_time"> 
</div> 

的JS設置最小和最大時間：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#start_time').pickatime({ 
     //format: 'h:i A',   // Displayed and application format 
     formatSubmit: 'HH:i:00', 
     hiddenName: true, 
     interval: 15,    // Interval between values (in minutes) 
     min: '3:00 AM',    // Starting value 
     max: '6:00 PM'    // Ending value 
     //finish_time.set('min': start_time) 
    }); 

    $('#finish_time').pickatime({ 
     //format: 'h:i A',   // Displayed and application format 
     formatSubmit: 'HH:i:00', 
     hiddenName: true, 
     interval: 15,    // Interval between values (in minutes) 
     min: '3:00 AM',   // Starting value 
     max: '6:00 PM'    // Ending value 
    }); 
}); 
</script> 

我想要做的是將start_time選擇器的最小開始時間設爲3:00 AM，但對於finish_time選擇器最小值無論w選爲start_time + 15min。你會如何去做這件事？

Answer 1

好的，你的代碼會是這樣的，但正如我在我的評論中提到的，你必須檢查start_time + 15min是否在第二天。

HTML

<div align="center"> 
    <span class="glyphicon glyphicon-time"></span> 
    <label for="start_time">Start</label> 
    <input name="start_time" id="start_time"> 
    <p></p> 
    <span class="glyphicon glyphicon-time"></span> 
    <label for="finish_time">Finish</label> 
    <input name="finish_time" id="finish_time"> 
</div> 

的JavaScript

$(document).ready(function(){ 
    var finish_time = $('#finish_time').pickatime({ 
     //format: 'h:i A',   // Displayed and application format 
     formatSubmit: 'HH:i:00', 
     hiddenName: true, 
     interval: 15,    // Interval between values (in minutes) 
     min: '3:00 AM',   // Starting value 
     max: '6:00 PM'    // Ending value 
    }); 

    var start_time = $('#start_time').pickatime({ 
     //format: 'h:i A',   // Displayed and application format 
     formatSubmit: 'HH:i:00', 
     hiddenName: true, 
     interval: 15,    // Interval between values (in minutes) 
     min: '3:00 AM',    // Starting value 
     max: '6:00 PM',    // Ending value 
     onSet: function(context) { 
      var finish_time_min = context.select + 15; 
      var hours = Math.floor(finish_time_min/60); 
      var minutes = (finish_time_min - (hours * 60)); 
      finish_time.pickatime('picker').set('min', [hours, minutes]); 
     }     
    }); 
});