$(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;
}
External resources loaded into this fiddle: