Edit in JSFiddle

$(document).ready(function(){
    // initialize both timepickers at once
    $('input.timepicker').timepicker({
        timeFormat: 'hh:mm p',
        // year, month, day and seconds are not important
        minTime: new Date(0, 0, 0, 8, 0, 0),
        maxTime: new Date(0, 0, 0, 15, 0, 0),
        // time entries start being generated at 6AM but the plugin 
        // shows only those within the [minTime, maxTime] interval
        startHour: 6,
        // the value of the first item in the dropdown, when the input
        // field is empty. This overrides the startHour and startMinute 
        // options
        startTime: new Date(0, 0, 0, 8, 20, 0),
        // items in the dropdown are separated by at interval minutes
        interval: 10,
    });
    
    // change select time in timepicker-2. 
    $('#tp2').timepicker('setTime', '13:12');
    
    // change select time in timepicker-1.
    $('#tp1')
        .timepicker('setTime', '11:40a')
        .timepicker('option', 'change', function(time) {
            // update startTime option in timepicker-2
            $('#tp2').timepicker('option', 'minTime', time);
        });
    
    $('input.change-format').click(function() {
        var input = $(this),
            timepicker = input.closest('div').find('.timepicker'),
            instance = timepicker.timepicker();
        instance.option('timeFormat', $(this).data('format'));
    });
});

<h1>jQuery TimePicker Demo</h1>

<p>The dropdown starts using <code>HH:mm</code> as the timeFormat. Click the input field to see it.<p/>
    
    <p>As of version 1.2 is easy to change the timepicker options using the <code>option</code> method. Pressing the button will change the <code>timeFormat</code> option; the function associated to the button's click event shows how.</p>
    
    <p>Using the <code>change</code> callback several timepickers can be linked together. In this temo when a value is selected in the first timepicker it becomes the new value for minTime option of the second timepicker, constraining the elements shown in the dropdown.</p>
    
    <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>

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