javascript - JS Timepicker 设置和谐的最小和最大时间

Question

我有一个来自 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，但 finish_time 选择器的最短时间为 start_time +15 分钟。你会怎样做呢？

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]);
        }                   
    });
});