Basic Example

$('#basicExample').timepicker();

Scroll Default Example

Set the scroll position to local time if no value selected.

$('#defaultValueExample').timepicker({ 'scrollDefaultNow': true });

Set Time Example

Dynamically set the time using a Javascript Date object.

Set current time

$('#setTimeExample').timepicker();
$('#setTimeButton').on('click', function (){
	$('#setTimeExample').timepicker('setTime', new Date());
});

Duration Example

Set a starting time and see duration from that starting time. You can optionally set an maxTime as well.

$('#durationExample').timepicker({
	'minTime': '2:00pm',
	'maxTime': '11:30pm',
	'showDuration': true
});

Event Example

Trigger an event after selecting a value. Fires before the input onchange event.

$('#onselectExample').timepicker();
$('#onselectExample').on('changeTime', function() {
	$('#onselectTarget').text($(this).val());
});

DisableTimeRanges Example

Prevent selection of certain time values.

$('#disableTimeRangesExample').timepicker({
	'disableTimeRanges': [
		['1am', '2am'],
		['3am', '4:01am']
	]
});

timeFormat Example

timepicker.jquery uses the time portion of PHP's date formatting commands.

$('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' });
$('#timeformatExample2').timepicker({ 'timeFormat': 'h:i A' });

Step Example

Generate drop-down options with varying levels of precision.

$('#stepExample1').timepicker({ 'step': 15 });
$('#stepExample2').timepicker({ 'step': 60 });

forceRoundTime Example

jquery-timepicker allows entering times via the keyboard. Setting forceRoundTime to true will round the entered time to the nearest option on the dropdown list.

$('#roundTimeExample').timepicker({ 'forceRoundTime': true });

Select Example

Use jquery-timepicker with <select> elements too.

12:00am 1:00am 2:00am 3:00am 4:00am 5:00am 6:00am 7:00am 8:00am 9:00am 10:00am 11:00am 12:00pm 1:00pm 2:00pm 3:00pm 4:00pm 5:00pm 6:00pm 7:00pm 8:00pm 9:00pm 10:00pm 11:00pm Convert to timepicker

$('#selectButton').click(function(e) {
	e.preventDefault();
	$('#selectExample').timepicker();
	$(this).hide();
});

Non-input Example

jquery-timepicker can be bound to any visibile DOM element, such as spans or divs.

Pick Time

$('#spanExample').timepicker();
	$('#openSpanExample').on('click', function(){
	$('#spanExample').timepicker('show');
});

Datepair Example

to