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.7)

Usage

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

options is an optional javascript object with parameters explained below.

Options

appendTo Override where the dropdown is appended. Takes either a string to use as a selector, a function that gets passed the clicked input element as argument or a jquery object to use directly. default: "body"
className A class name to apply to the HTML element that contains the timepicker dropdown. default: null
closeOnWindowScroll Close the timepicker when the window is scrolled. (Replicates <select> behavior.) default: false
disableTimeRanges Disable selection of certain time ranges. Input is an array of time pairs, like ```[['3:00am', '4:30am'], ['5:00pm', '8:00pm']]`` default: []
disableTextInput Disable editing the input text and force the user to select a value from the timepicker list. default: false
disableTouchKeyboard Disable the onscreen keyboard for touch devices. default: true
durationTime The time against which showDuration will compute relative times. If this is a function, its result will be used. default: minTime
forceRoundTime Force update the time to step settings as soon as it 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' }
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
minTime The time that should appear first in the dropdown list. default: 12:00am
scrollDefaultNow If no time value is selected, set the dropdown scroll position to show the current time. default: false
scrollDefaultTime If no time value is selected, set the dropdown scroll position to show the time provided, e.g. "09:00". default: false
selectOnBlur Update the input with the currently highlighted time value when the timepicker loses focus. default: false
showDuration Shows the relative time for each item in the dropdown. minTime or durationTime must be set. default: false
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'

Methods

getSecondsFromMidnight Get the time as an integer, expressed as seconds from 12am.
```
 $('#getTimeExample').timepicker('getSecondsFromMidnight');
```
getTime Get the time using a Javascript Date object, relative to a Date object (default: today).
```
 $('#getTimeExample').timepicker('getTime'[, new Date()]);
```
You can get the time as a string using jQuery's built-in val() function:
```
 $('#getTimeExample').val();
```
hide Close the timepicker dropdown.
```
 $('#hideExample').timepicker('hide');
```

option Change the settings of an existing timepicker.

 $('#optionExample').timepicker({ 'timeFormat': 'g:ia' });
 $('#optionExample').timepicker('option', 'minTime', '2:00am');
 $('#optionExample').timepicker('option', { 'minTime': '4:00am', 'timeFormat': 'H:i' });

remove Unbind an existing timepicker element.
```
 $('#removeExample').timepicker('remove');
```

setTime Set the time using a Javascript Date object.

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

show Display the timepicker dropdown.
```
 $('#showExample').timepicker('show');
```

Events

change The native onChange event will fire any time the input value is updated, whether by selection from the timepicker list or manual entry into the text input.
changeTime Called when a valid time value is entered or selected. See timeFormatError and timeRangeError for error events. Fires before change event.
hideTimepicker Called when the timepicker is closed.
selectTime Called when a time value is selected from the timepicker list. Fires before change event.
showTimepicker Called when the timepicker is shown.
timeFormatError Called if an unparseable time string is manually entered into the timepicker input. Fires before change event.
timeRangeError Called if a maxTime, minTime, or disableTimeRanges is set and an invalid time is manually entered into the timepicker input. Fires before change event.

Theming

Sample markup with class names:

<input value="5:00pm" class="ui-timepicker-input" type="text">
...
<div class="ui-timepicker-wrapper optional-custom-classname" tabindex="-1">
	<ul class="ui-timepicker-list">
		<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>
</div>

Help

Submit a GitHub Issues request.

Development guidelines

Install dependencies (jquery + grunt) npm install
For sanity checks and minification run grunt, or just grunt lint to have the code linted

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, Matt Jurik, Phil Freo, orloffv, patdenice, Raymond Julin, Gavin Ballard, Steven Schmid, ddaanet

DevinWalker/jquery-timepicker