Easy Touch Time Picker Plugin | clocklet

Clocklet is a simple, configurable, and easy-to-touch plugin written in pure JavaScript. The timepicker plugin enables the user to specify a time in hours and minutes from a clock-style popup when activated.

jquery timepicker plugin, time picker javascript code, time picker jquery, jquery clock time picker, time picker jquery ui, 24 hour time picker javascript

Simple Multi Countdown Timer Plugin Using Javascript/JQuery

How to make use of it:

Import the clock let plugin’s JavaScript and Stylesheet into the HTML doc.

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

To initialize the clock time picker automatically, simply 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, move the next 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 strategies.

// 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 }])

Touch-friendly Clock Time Picker, clocklet Plugin/Github, time picker javascript source code