Touch-friendly Clock Time Picker Plugin – clocklet

Category: Date & Time , Javascript | March 9, 2019
Author: luncheon
Views Total: 1,703
Official Page: Go to website
Last Update: March 9, 2019
License: MIT


Touch-friendly Clock Time Picker Plugin – clocklet


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:

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.detail.options);
  if (document.querySelector('.clocklet-cancel-opening').checked) {

instance.addEventListener('clocklet.opened', function (event) {
  console.log(event.type,, event.detail.options);

instance.addEventListener('clocklet.closing', function (event) {
  if (document.querySelector('.clocklet-cancel-closing').checked) {

instance.addEventListener('clocklet.closed', function (event) {

instance.addEventListener('input', function (event) {


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

You Might Be Interested In:

Leave a Reply