Timepicker Plugin for jQuery

See a demo and examples here

jquery.timepicker is a lightweight timepicker plugin for jQuery inspired by Google Calendar. It supports both mouse and keyboard navigation, and weighs in at 2.5kb minified and gzipped.

Requirements

• jQuery (>= 1.6 recommended; jquery-timepicker has not been tested on 1.5)

Usage

$('.some-time-inputs').timepicker(options);

options is an optional javascript object with parameters explained below.

Options

• className A class name to apply to the HTML element that contains the timepicker dropdown. default: null

• minTime The time that should appear first in the dropdown list. default: 12:00am

• maxTime The time that should appear last in the dropdown list. Can be used to limit the range of time options. default: 24 hours after minTime

• showDuration Shows the relative time for each item in the dropdown. minTime or durationTime must be set. default: false

• durationTime The time against which showDuration will compute relative times. default: minTime

• step The amount of time, in minutes, between each item in the dropdown. default: 30

• timeFormat How times should be displayed in the list and input element. Uses PHP's date() formatting syntax. default: 'g:ia'

• scrollDefaultNow If no time value is selected, set the dropdown scroll position to show the current time. default: false

• selectOnBlur Update the input with the currently highlighted time value when the timepicker loses focus. default: false

• lang Language constants used in the timepicker. Can override the defaults by passing an object with one or more of the following properties: decimal, mins, hr, hrs. default: { decimal: '.', mins: 'mins', hr: 'hr', hrs: 'hrs' }

Methods

• getTime Get the time using a Javascript Date object, relative to today's date.

   $('#getTimeExample').timepicker('getTime');

  You can get the time as a string using jQuery's built-in val() function:

   $('#getTimeExample').val();

• getSecondsFromMidnight Get the time as an integer, expressed as seconds from 12am.

   $('#getTimeExample').timepicker('getSecondsFromMidnight');

• setTime Set the time using a Javascript Date object.

   $('#setTimeExample').timepicker('setTime', new Date());

Events

• showTimepicker Called when the timepicker is shown.

• hideTimepicker Called when the timepicker is closed.

• changeTime Called when a time value is selected. default: null

Theming

Sample markup with class names:

<span class="ui-timepicker-container">
	<input value="5:00pm" class="ui-timepicker-input" type="text">
	<ul class="ui-timepicker-list optional-custom-classname" tabindex="-1">
		<li>12:00am</li>
		<li>12:30am</li>
		...
		<li>4:30pm</li>
		<li class="ui-timepicker-selected">5:00pm</li>
		<li>5:30pm</li>
		...
		<li>11:30pm</li>
	</ul>
</span>

---

This software is made available under the open source MIT License. © 2012 Jon Thornton, contributions from Anthony Fojas, Vince Mi, Nikita Korotaev, Spoon88, elarkin, lodewijk, jayzawrotny, David Mazza