Minimal Timer Picker With Pure JavaScript

Preview:

Description:

A JavaScript/CSS only timer picker where you can select a time from a popup with separated hours/minutes selection panels.

How to use it:

Load the js-timepicker.css and js-timepicker.js in your html document.

<script src="js-timepicker.js"></script>
<link rel="stylesheet" href="js-timepicker.css">

Create an input field to accept the time selection.

<input type="text" name="demo">

Active the time picker on the input field you created.

window.picker = new JsTimepicker(document.querySelector('[name="demo"]'), {
  // options here
});

Default settings.

window.picker = new JsTimepicker(document.querySelector('[name="demo"]'), {
  hourLeadingZero: true,
  hourStep: 1,
  minuteLeadingZero: true,
  minuteStep: 5
});