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:

• 10 Best Date And Time Picker JavaScript Plugins

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

jQuery('#example').timepicker({
  // 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
jQuery('#example').timepicker({
  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
jQuery('#example').timepicker({
  step: 900
});

6. Customize the time format.

jQuery('#example').timepicker({
  format: 'hh:mm A',
});

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

jQuery('#example').timepicker({
  scheme: 'light',
});

Changelog:

2024-01-06

• Make placement of popover a bit more dynamic

2023-12-26

• Rename theme to scheme

2023-11-25

• Expose default options so that they can be overridden

2023-11-23

• Fix to handle when minTime and maxTime options are invalid

2023-10-22

• some minor css tweaks

2023-10-19

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

2023-10-17

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

2023-10-16

• Specify width of colon table cell to fix spacing issues

2023-09-16

• Switch to using let and const

2023-08-26

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

2023-05-30

• Fix possible recursion issue when format gets updated

2023-05-21

• Update to support 24 hour format

2022-11-28

• Bugfix

---

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