Easy Time Picker Plugin For Bootstrap

File Size: 21.7 KB
Views Total: 19311
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Easy Time Picker Plugin For Bootstrap

A lightweight and easy-to-use jQuery library that allows you to easily add time picker functionality for your Bootstrap projects. It supports AM/PM, min/max time, custom time format (base on day.js) and configurable minute step.

This time picker plugin makes the process of allowing your end users to select the hour and minute on your website very simple. It delivers a fully functional time picker on your website without having to create one of those annoying <select> elements, configure it in JavaScript, and style it by writing complex CSS.

See Also:

How to use it:

1. Load the necessary jQuery, Bootstrap, day.js, and Font Awesome in the document.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Day.js  -->
<script src="/path/to/cdn/dayjs.min.js"></script>

<!-- Font Awesome Iconic Font -->
<link rel="stylesheet" href="/path/to/cdn/font-awesome/js/all.min.js" />

<!-- Bootstrap Framework -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Download and load the Bootstrap time picker plugin.

<!-- Time Picker For Bootstrap 4 -->
<script src="js/timepicker-bs4.js" defer="defer"></script>

3. Call the function timepicker to attach a basic time picker to the input field you specify.

<input type="text" id="example" class="form-control" name="example" autocomplete="off" />
  // options here

4. Set the min/max time.

<input type="text" id="example" class="form-control" name="example" min="09:00" max="17:00" autocomplete="off" />
// or via JavaScript
  maxTime: '17:00',
  minTime: '09:00',

5. Customize the step size. Default: 60(seconds).

<input type="text" id="example" class="form-control" name="example" step="900" autocomplete="off" />
// or via JavaScript
  step: 900

6. Customize the time format.

  format: 'hh:mm A',

7. Set the theme of the time picker: "dark", "light", or "auto".

  scheme: 'light',



  • Make placement of popover a bit more dynamic


  • Rename theme to scheme


  • Expose default options so that they can be overridden


  • Fix to handle when minTime and maxTime options are invalid


  • some minor css tweaks


  • Replace button text with icons; set default theme to be light instead of auto


  • Add a theme option to allow manual selection of dark/light mode


  • Specify width of colon table cell to fix spacing issues


  • Switch to using let and const


  • Remove minScreenWidth option so that it can be handled by the user instead


  • Fix possible recursion issue when format gets updated


  • Update to support 24 hour format


  • Bugfix

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