Touch-friendly Clock Time Picker Plugin – clocklet

Category: Date & Time , Javascript | June 24, 2018
Author: luncheon
Views Total: 722
Official Page: Go to website
Last Update: June 24, 2018
License: MIT

Preview:

Touch-friendly Clock Time Picker Plugin – clocklet

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.

How to use it:

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

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

To initialize the clock time picker aumatically, 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);
});

Changelog:

v0.2.3 (06/24/2018)

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

Leave a Reply