An opinionated clock-style vanilla-js timepicker.
Demo

Features

• Keyboard and numpad friendly
  • Autocomplete - e.g. "1"->"01:00", "12"->"12:00", "1234"->"12:34"
  • Support up/down arrow key to increment/decrement
• Mouse and touch friendly
  • 3 clicks are sufficient to pick a time - am/pm, hour, minute
  • Click targets often used are large enough
  • No need to scroll
• Declarative usage
• Vanilla JS - no need jQuery or any other frameworks
• Lightweight (CSS + JS ~ 7kB gzipped)

Installation

via npm (with a module bundler)

$ npm install clocklet

import "clocklet/css/clocklet.min.css";
import clocklet from "clocklet";

via CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/clocklet.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>/* `window.clocklet` object is available */</script>

Download directly

clocklet.min.css
clocklet.min.js

Usage

Place <input> elements having data-clocklet attribute (either before or after loading the clocklet script).
When these elements get focused, the timepicker popups.

<input data-clocklet>

CodePen

Options

Default options

Default options can be set as properties of clocklet.defaultOptions object.
Option names must be described in camelCase.

clocklet.defaultOptions.zIndex = 9999;
clocklet.defaultOptions.format = "hh:mm a";

Element-specific options

Element-specific options can be specified as semicolon-separated data-clocklet attribute value.
Option names must be described in kebab-case.

<input data-clocklet="class-name: my-clocklet-style; placement: top;">

Available options

| Name | Type | Default | Description | | ---------- | ------------------------------ | -------- | ----------------------------------------------------------------------------------------------- | | class-name | string | "" | Class name to set to the root element of the popup. | | format | string | "HH:mm" | Time format (template) of the input element.Some tokens are replaced with the selected time value.See the format tokens section below. | | placement | "top" | "bottom" | "bottom" | Popup placement. | | alignment | "left" | "center" | "right" | "left" | Popup alignment. | | append-to | "body" | "parent" | "body" | The parent element into which the popup element will be inserted. | | z-index | number | string | "" | Popup z-order.If this value is an empty string, (1 + z-index of the input element) is used. |

Format tokens

| Token | Range | Description | | ----- | ---------------- | ---------------------------------------------------------------- | | H | "0" .. "23" | Hour in 0-based 24-hour notation with no padding. | | HH | "00" .. "23" | Hour in 0-based 24-hour notation with zero padding. | | _H | " 0" .. "23" | Hour in 0-based 24-hour notation with space padding. | | h | "1" .. "12" | Hour in 1-based 12-hour notation with no padding. | | hh | "01" .. "12" | Hour in 1-based 12-hour notation with zero padding. | | _h | " 1" .. "12" | Hour in 1-based 12-hour notation with space padding. | | k | "1" .. "24" | Hour in 1-based 24-hour notation with no padding. | | kk | "01" .. "24" | Hour in 1-based 24-hour notation with zero padding. | | _k | " 1" .. "24" | Hour in 1-based 24-hour notation with space padding. | | m | "0" .. "59" | Minute with no padding. | | mm | "00" .. "59" | Minute with zero padding. | | _m | " 0" .. "59" | Minute with space padding. | | a | "am" | "pm" | Post or ante meridiem abbreviation in lowercase without periods. | | aa | "a.m." | "p.m." | Post or ante meridiem abbreviation in lowercase with periods. | | A | "AM" | "PM" | Post or ante meridiem abbreviation in uppercase without periods. | | AA | "A.M." | "P.M." | Post or ante meridiem abbreviation in uppercase with periods. |

Events

Following events are raised on the input element by this library.

| Type | Cancelable | event.details | Description | | ---------------- | ---------- | ------------------ | ----------------------------------------- | | clocklet.opening | true | { options: {...} } | Raised before showing the clocklet popup. | | clocklet.opened | false | { options: {...} } | Raised after showing the clocklet popup. | | clocklet.closing | true | {} | Raised before hiding the clocklet popup. | | clocklet.closed | false | {} | Raised after hiding the clocklet popup. | | input | false | undefined | Raised after changing the input value. |

For example:

<input id="my-clocklet" data-clocklet>
<script>
  document
    .getElementById("my-clocklet")
    .addEventListener("clocklet.opening", function (event) {
      console.log(event.details.options);
      if (DO_NOT_NEED_TIMEPICKER) {
        event.preventDefault();
      }
    });
</script>

API

clocklet.defaultOptions

See default options section.

clocklet.open(inputElement[, options])

Show the timepicker for the specified inputElement with the options (optional).

clocklet.close()

Hide the timepicker.

clocklet.inline(containerElement[, { input, format }])

Place the timepicker into the containerElement.
The optional parameter is the binding setting for the input element.

License

WTFPL