JS Timepicker set harmonious min and max times

Question

I have a timepicker from http://amsul.ca/pickadate.js/time/

There are two instances, start and finish:

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

The JS sets the min and max times:

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

What I'm trying to do is have the min start time for start_time picker as a set 3:00 AM but the min for finish_time picker whatever was selected for start_time +15min. How would you go about doing this?

Answer 1

OK, your code would be something like this, but as I mentioned in my comment, you have to check if the start_time + 15min is in next day or not.

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