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

$(".example").timepicker();

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

$(".example").timepicker({
  use12HourClock: true
});

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

$(".example").timepicker({
  timeFormat: "%g:%i %A"
  // => 2:03 AM
});

6. Customize the step size. Default: 1.

$(".example").timepicker({
  hourStep: 2,
  minStep: 5,
  timeStep: 10
});

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

$(".example").timepicker({
  minTime: "11:00",
  maxTime: "10:00 pm"
});

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

$(".example").timepicker({
  scrollDefault: "13:15"
});

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

$(".example").timepicker({
  selectSize: 5
});

10. Localize the time picker with the following options.

$(".example").timepicker({
  ampmText: { am:"am", pm:"pm", AM:"AM", PM:"PM" },
  hourHeaderText: "hour",
  minHeaderText: "min",
  okButtonText: "✔",
  cancelButtonText: "✕"
});

11. Trigger a function every time the time changes.

$(".example").timepicker({
  // 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.