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> 

То, что я пытаюсь сделать, - это минимальное время начала для pick_time picker как набор 3:00 AM, но min для финиша для выбора времени в любом случае 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]); 
     }     
    }); 
});