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. Determine whether to disable the time picker on small screens like mobile.

jQuery('#example').timepicker({
  minScreenWidth: 576,
});

Changelog:

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.