Minimal 24-Hour Time Picker in Vanilla JS – TimePicker.js

TimePicker.js is a lightweight JavaScript popup time picker for choosing an hour and minute on a 24-hour clock.

The draggable picker offers fixed five-minute intervals and preset colors for web forms.

Features

• Opens on input focus or a click on another HTML element.
• Click-away dismissal when the popup is open.
• Automatic closing after both parts of the time are selected.
• Header translations in eight languages.
• Programmatic open and close controls.
• open, close, and change callbacks.

How To Use It

Installation

Load the IIFE bundle directly in your HTML document.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/timepicker.iife.js"></script>

Or install the package and import it into your project via NPM

npm install timepicker.js

import TimePicker from 'timepicker.js';

Basic Usage

The picker opens when the input receives focus. Its change event reports the chosen hour and minute, but the library does not write the formatted value into the input. This example updates the field after both selections.

<label for="appointment-time">Appointment time</label>
<input id="appointment-time" type="text" placeholder="HH:MM" autocomplete="off">
<script>
  const Picker = TimePicker.default ?? TimePicker;
  const field = document.querySelector('#appointment-time');
  const picker = new Picker(field);
  picker.on('change', ({ hour, minute }) => {
    if (hour == null || minute == null) return;
    field.value = `${hour.padStart(2, '0')}:${minute}`;
  });
</script>

All Configuration Options

• theme (string, default 'dark'): Chooses one of 19 color presets: dark, red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, blue-grey.
• lang (string, default 'en'): Sets the Hour and Minute header text. Accepted codes: en (English), pt (Portuguese), de (German), es (Spanish), fr (French), it (Italian), nl (Dutch), sv (Swedish).

const picker = new Picker(field, {
  theme: 'teal',
  lang: 'fr'
});

API Methods

• show(): Opens the popup programmatically.
• hide(): Closes the popup programmatically.
• on(eventName, handler): Registers a callback for open, close, or change.

Events

Use picker.on() to subscribe to the library’s callbacks.

picker.on('open', ({ element }) => console.log('Opened:', element));
picker.on('close', () => console.log('Closed'));
picker.on('change', ({ hour, minute }) => console.log({ hour, minute }));

Alternatives & Related Resources

• Google Material Inspired Time Picker Component – timepicker-ui
• Touch-friendly Clock Time Picker Plugin – clocklet
• Material Design-style Time Picker Web Component – clock-timepicker
• Convenient Time Picker In Vanilla JavaScript – fg.timepicker