Touch-friendly Clock Time Picker Plugin – clocklet

Preview:

Description:

clocklet is a simple, configurable, touch-friendly time picker plugin written in pure JavaScript.

The timepicker plugin enables the user to select a time in hours, minutes from a clock-style popup when activated.

AM(12-hour) and PM (24-hour) are supported as well.

See also:

• Top 10 JavaScript Date and Time Picker Libraries

How to use it:

Import the clocklet plugin’s JavaScript and Stylesheet into the html document.

<link rel="stylesheet" href="css/clocklet.min.css" />
<script src="umd/clocklet.min.js"></script>

To initialize the clock time picker automatically, just add the data-clocklet attribute to an input field as this:

<input data-clocklet maxlength="5" value="02:25">

To config the clock time picker, pass the following options to the data-clocklet attribute:

<input data-clocklet data-clocklet="format: _H:_m;" maxlength="5" value="02:25">

{
  className: '',
  format: 'HH:mm',
  placement: 'bottom', // or 'top'
  alignment: 'left', // or 'rignt'
  appendTo: 'body',
  zIndex: '',
  dispatchesInputEvents: true
}

Available event handlers:

<input class="event" data-clocklet maxlength="5" value="02:25">

var instance = document.querySelector('.event');
instance.addEventListener('clocklet.opening', function (event) {
  console.log(event.type, event.target.value, event.detail.options);
  if (document.querySelector('.clocklet-cancel-opening').checked) {
    event.preventDefault();
  }
});
instance.addEventListener('clocklet.opened', function (event) {
  console.log(event.type, event.target.value, event.detail.options);
});
instance.addEventListener('clocklet.closing', function (event) {
  console.log(event.type, event.target.value);
  if (document.querySelector('.clocklet-cancel-closing').checked) {
    event.preventDefault();
  }
});
instance.addEventListener('clocklet.closed', function (event) {
  console.log(event.type, event.target.value);
});
instance.addEventListener('input', function (event) {
  console.log(event.type, event.target.value, event.target.value);
});

API methods.

// set options
clocklet.defaultOptions.OptionName
// open the time picker
clocklet.open(inputElement[, options])
// close the time picker
clocklet.close()
// place the time picker into the containerElement
clocklet.inline(containerElement[, { input, format }])

Changelog:

v0.3.0 (11/21/2020)

• Add inline (no popup) clock rendering API

v0.2.6 (04/18/2020)

• Fixed: error message is displayed in console.

v0.2.5 (03/28/2020)

• Fixed: bind events to `window` instead of `document.body`.

v0.2.4 (03/09/2019)

• Fixed: Attach to form result in unwanted side effect of form submission

v0.2.3 (06/24/2018)

• fix placement issue that occurs when append-to is “parent” and parent element is a flexbox