A lightweight, customizable jQuery timepicker plugin inspired by Google Calendar.

Use this plugin to unobtrusively add a timepicker dropdown to your forms. It's lightweight (2.5kb minified and gzipped) and easy to customize. download (zip).

Basic Example


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.

$('#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.

	'minTime': '2:00pm',
	'maxTime': '11:30pm',
	'showDuration': true

Event Example

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

$('#onselectExample').on('changeTime', function() {

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.

$('#selectButton').click(function(e) {

Datepair Example


Datepair source available here.

Want to get paid to work on stuff like this?

Shameless plug: ParkWhiz is looking for talented designers and developers to help us drag the parking industry out of the Stone Age. Visit ParkWhiz's jobs page or email [email protected] and introduce yourself!


Jon Thornton — [lastname].[firstname]@gmail.com


You can download this project in either zip or tar formats.
Get the source code on GitHub: jonthornton/jquery.timepicker

You can also clone the project with Git by running:
$ git clone git://github.com/jonthornton/jquery-timepicker