Timepicker for jQuery – Demos and Documentation

Basic Example

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

Scroll Default Example

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

$('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });

Set Time Example

Dynamically set the time using a Javascript Date object.

$('#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']
	]
});

noneOption Example

Custom options can be added to the dropdown menu.

$('#noneOptionExample').timepicker({
	'noneOption': [
		{
			'label': 'Foobar',
			'className': 'shibby',
			'value': '42'
		},
		'Foobar2'
	]
});

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': function(i) {
		return (i%2) ? 15 : 45;
	}
});

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

jquery-timepicker can render itself as a select element too.

$('#selectExample').timepicker();
$('#selectButton').click(function(e) {
  $('#selectExample').timepicker('option', { useSelect: true });
  $(this).hide();
});

Non-input Example

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

$('#spanExampleTarget').timepicker()
$('#spanExampleTarget').on('changeTime', function(e){
	console.log($('#spanExampleTarget').timepicker('getTime'));
});
$('#openSpanExample').on('click', function() {
	$('#spanExampleTarget').timepicker('show');
});

Datepair Plugin Example

jquery-timepicker is designed to work with the jquery-datepair plugin.

<p id="datepairExample">
	<input type="text" class="date start" />
	<input type="text" class="time start" /> to
	<input type="text" class="time end" />
	<input type="text" class="date end" />
</p>

<script type="text/javascript" src="datepair.js"></script>
<script type="text/javascript" src="jquery.datepair.js"></script>
<script>
	// initialize input widgets first
	$('#datepairExample .time').timepicker({
		'showDuration': true,
		'timeFormat': 'g:ia'
	});

	$('#datepairExample .date').datepicker({
		'format': 'yyyy-m-d',
		'autoclose': true
	});

	// initialize datepair
	$('#datepairExample').datepair();
</script>

jquery.timepicker