Intuitive Time Picker Input In Vanilla JavaScript – TimePick.js

Preview:

Description:

A tiny JavaScript timer picker that adds an intuitive and user-friendly time-picking experience to your webpage.

Clicking on the clock icon in your time input field triggers a compact popover, where users can select the desired hour, minute, and second by clicking on the up and down arrows.

How to use it:

1. Download and load the time-pick.js script in the HTML document.

<script src="./time-pick.js"></script>

2. Initialize the TimePick on your text field and done.

<input type="text" class="timePicker" />
<input type="text" id="timePick" value="08:06:04">

var timepicker = new TimePick('#timePick');
var timepickerz = new TimePick('.timePicker');

See Also:

• 10 Best Date And Timer Pickers In Pure JavaScript