jQuery TimePicker is a plugin to help users easily input time entries. It works by allowing the user to type times in a free format or selecting them from a dropdown menu.

The plugin will automatically convert all time entries using a format that can be changed passing the timeFormat option; the default value is hh:mm p which will give something like 02:16 PM.

The following are a few examples of the strings an user can type and how the plugin understands them:

Input Output (using the default format)
123412:34 AM
1234p12:34 PM
45604:56 AM
165604:56 PM
1:1 P1:10 PM
1:9 A1:09 AM
8:598:59 AM
120301:20:30 AM
4605:00 AM (it's interpreted as 4 hours plus 60 minutes)

There are other supported formats, all inspired by the behavior of a similar timepicker used in Google Calendar. To see more, try the demos.

To use jQuery TimePicker you'll need to include two files: jquery.timepicker.js and jquery.timepicker.css. Then, assuming you have an <input> element in your document, you can use the following code to initialize the plugin:


Refer to the options page for a detailed description about the available configuration.

Bugs reports, comments and feature suggestions are always welcome at GitHub, in jQuery TimePicker Google Group or sent directly to wvega@wvega.com.

Latest version of jQuery TimePicker is available for download from GitHub. Download

Fork me on GitHub

Heap - iOS and Web Analytics