Easy jQuery Time Picker and Formatting Plugin - Timepicker

File Size: 1.69 MB
Views Total: 13382
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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"/>

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.

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.