A jQuery timepicker plugin inspired by Google Calendar.
Clone or download
Pull request Compare This branch is 332 commits behind jonthornton:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Timepicker Plugin for jQuery

timepicker screenshot

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.




options is an optional javascript object with parameters explained below.


  • 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

  • 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"

  • 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' }


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


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

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

  • setTime Set the time using a Javascript Date object.

     $('#setTimeExample').timepicker('setTime', new Date());
  • 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.



  • showTimepicker Called when the timepicker is shown.

  • hideTimepicker Called when the timepicker is closed.

  • changeTime Called when a time value is selected.

  • timeFormatError Called if an unparseable time string is manually entered into the timepicker input.


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 class="ui-timepicker-selected">5:00pm</li>

Development guidelines

  1. Install dependencies (jquery + grunt) npm install
  2. 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