Easy jQuery Time Picker and Formatting Plugin - Timepicker

Timepicker is yet another jQuery time picker plugin for input fields that allows to select times from a drop down list. The plugin also has the ability to automatically convert the time user input into a custom time format. For example: the plugin will output 12:34 AM if your user types 1234 in the time picker input.

Basic Usage:

1. Load the required jQuery timepicker stylesheet file on the page.

<link href="jquery.timepicker.css" rel="stylesheet" type="text/css">

2. Create a standard input field for your time picker.

<form align="center">
<h2>Basic Example:</h2>
<input id="demo1" placeholder="1234"/>
</form>

3. Load the jQuery javascript library and jQuery Timepicker plugin at the end of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.timepicker.js"></script>

4. Initialize the plugin.

$('#demo1').timepicker({ 
timeFormat: 'h:mm:ss p' 
});

5. All the default options. Check the options page for more details.

timeFormat: 'hh:mm p',
minHour: null,
minMinutes: null,
minTime: null,
maxHour: null,
maxMinutes: null,
maxTime: null,
startHour: null,
startMinutes: null,
startTime: null,
interval: 30,
dynamic: true,
theme: 'standard',
zindex: null,
dropdown: true,
scrollbar: false,
// callbacks
change: function(/*time*/) {}

Change logs:

v1.3.5 (2016-07-10)

• Fix stray comma in bower.json

v1.3.4 (2016-06-27)

• Allow jquery-timepicker to work with Browserify.
• Add Bower support.

v1.3.3 (2016-05-21)

• Prevent dropdown from closing in IE when user clicks scrollbar.
• Prevent long-click from closing the timepicker.

v1.3.2 (2014-09-14)

• Add defaultTime option.
• Fix position bug.

---

This awesome jQuery plugin is developed by wvega. For more Advanced Usages, please check the demo page or visit the official website.