A lightweight, customizable, TimePicker. Zero dependencies.

Because <input type="time"> is not yet supported in major browsers (MS Edge and Chrome only).

See here a demo.

npm i timepicker.js

Load CSS and Javascript:

<link href="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css"  rel="stylesheet">
<script src="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>

Download latest release and (obviously) load CSS and Javascript.

var timepicker = new TimePicker(['field1', 'field2'], {
  theme: 'dark', // or 'blue-grey'
  lang: 'pt', // 'en', 'pt' for now
});
timepicker.on('change', function(evt) {
  console.info(evt);

  var value = (evt.hour || '00') + ':' + (evt.minute || '00');
  evt.element.value = value;
});

{String|Array<String>|Element|Array<Element>} String or array of string, DOM node or array of nodes.

• theme: 'dark'; Theme color ('dark', 'blue-grey' for now)
• lang: 'en'; Header language ('en', 'pt' for now)

To be used programatically. Same for hide().

All targets passed to the constructor will be shown.

target can be: {String|Array<String>|Element|Array<Element>} String or array of string, DOM node or array of nodes.

timepicker.on('open', function(evt) {});

timepicker.on('close', function(evt) {});

timepicker.on('change', function(evt) {
  var hour = evt.hour;
  var minute = evt.minute;
});