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 AM, но минимальное время для средства выбора 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]);
        }                   
    });
});