$(document).ready(function(){
$('input.timepicker').timepicker({
timeFormat: 'HH:mm',
// 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
});
$('input.change-format').click(function() {
// change timeFormat option here
$('input.timepicker').data('TimePicker').options.timeFormat = 'HH:mm:ss p';
// since v1.1.2 does not support changing most of the options, we need
// to trick the plugin into thinking the next time the dropdown needs
// to be displayed is the first time, so it re-generates the items,
// using the new format
$('input.timepicker').data('TimePicker').items = null;
$('input.timepicker').data('TimePicker').widget.instance = null;
});
});
<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.1.2 most of the options can't be easily changed, but it's possible. Pressing the button will change the timeFormat option to <code>HH:mm:ss p</code>. The function associated to the button's click event shows how it was done.</p>
<input class="timepicker" name="timepicker" /><input class="change-format" type="button" value="Change timeFormat option">
<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: 50px;
}
p {
margin: 10px 0;
}
External resources loaded into this fiddle: