jQuery TimePicker demo - Chain and change startTime option

A jQuery TimePicker demo showing how to chain timepickers and change their options after initialization

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.3/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.3/jquery.timepicker.min.css">
<h1>jQuery TimePicker Demo</h1>
    <br/>

    <div>
        <input id="tp1" class="timepicker" name="timepicker"  />
        <input class="change-format" data-format="HH:mm:ss p" type="button" value="Change timeFormat option to HH:mm:ss p" />
    </div>
    
    <br/><br/>
    
    <div>
        <input id="tp2" class="timepicker" name="timepicker"  />
        <input class="change-format" data-format="H:mm" type="button" value="Change timeFormat option to H:mm" />
    </div>

<a href="http://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

CSS

body {
    background: #EFEFEF;
    padding: 20px;
}
h1 {
    font-weight: bold;
    margin-top: 100px;
}
p {
    margin: 10px 0;
}

JavaScript

$(document).ready(function(){
    $('input.timepicker').timepicker({
        timeFormat: 'HH:mm',
        interval: 30,
        minTime: '01:00',
        maxTime: '23:30',
        defaultTime: '0',
        dynamic: true,
        dropdown: true,
        scrollbar: true,
    });
    $('#tp1').timepicker('setTime', '08:00');
    $('#tp2').timepicker('setTime', '17:30');
    $('#tp1')
        .timepicker('option', 'change', function(time) {
             $('#tp2').timepicker('setTime', '17:30');
        });
    
    $('input.change-format').click(function() {
        var input = $(this),
            timepicker = input.closest('div').find('.timepicker'),
            instance = timepicker.timepicker();
        instance.option('timeFormat', $(this).data('format'));
    });
});