Customizable 12h/24h Time Picker For Bootstrap - Timepicker.js

File Size: 11.9 KB
Views Total: 23517
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Customizable 12h/24h Time Picker For Bootstrap - Timepicker.js

A tiny yet user-friendly and highly customizable time picker plugin to select specific hours and minutes from a dropdown list.

More Features:

  • Compatible with Bootstrap framework.
  • 12h & 24h format.
  • Custom hour/minute/am/pm text for international sites.
  • Allows you to set min/max time.
  • Allows you to disable the time range.
  • Custom step size.

How to use it:

1. Load the timepicker.css after Bootstrap's stylesheet.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/timepicker.css" />

2. Load the timepicker.js after jQuery library (slim build).

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/timepicker.js"></script>

3. Attach the time picker to an input field and the plugin will take care of the rest.

<input class="form-control example" type="text" />

4. Determine whether to use the 12-h clock. Default: false.

  use12HourClock: true

5. Customize the time format. Default: '%H:%i'.

  timeFormat: "%g:%i %A"
  // => 2:03 AM

6. Customize the step size. Default: 1.

  hourStep: 2,
  minStep: 5,
  timeStep: 10

7. Determine the min/max time allowed to pick. Default: null.

  minTime: "11:00",
  maxTime: "10:00 pm"

8. Determine the time (hour & time) to be centered in the drodown list.

  scrollDefault: "13:15"

9. Determine the height of the dropdown list. Default: 8.

  selectSize: 5

10. Localize the time picker with the following options.

  ampmText: { am:"am", pm:"pm", AM:"AM", PM:"PM" },
  hourHeaderText: "hour",
  minHeaderText: "min",
  okButtonText: "&#10004;",
  cancelButtonText: "&#10005;"

11. Trigger a function every time the time changes.

  // options here
}).on("change", function(){
  //  do something

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