Tiny User-friendly Time Picker In jQuery

A lightweight, user-friendly, jQuery based timer picker component that works perfectly with any popular CSS frameworks like Bootstrap and Tailwindcss.

Users can change the time fields by clicking up/down arrows, or by clicking the time slots and then selecting desired hours & minutes.

How to use it:

1. Load the Time Picker plugin's JavaScript and Stylesheet in your HTML page.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<link rel="stylesheet" href="/path/to/dist/css/timepicker.min.css" />
<script src="/path/to/dist/js/timepicker.min.js"></script>

2. Create a time input on the page.

<input type="text" class="bs-timepicker" />

3. Attach the timer picker to the time input and done.

$(function () {
  $('.bs-timepicker').timepicker();
});

4. Override the default styles of the timer picker to meet your use cases.

.timepicker {
  position: absolute;
  z-index: 1000;
  float: left;
  width: 160px;
  padding-bottom: 5px;
  margin: 2px 0 0 0;
  list-style: none;
  font-size: 14px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

---

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