Timepicker UI MCP server

timepicker-ui

A time picker for web forms. Attach it to an and users pick a time on a clock face or a scroll wheel.

Live demo · Documentation · Changelog · React wrapper

Why timepicker-ui

• Zero dependencies.
• ~26 KB gzipped core. The range and timezone plugins are about 3-4 KB each, the wheel plugin about 9 KB, and a plugin only gets bundled if you import it (bundle stats).
• Clock, wheel or compact wheel (a small dropdown under the input).
• Plain JS API, so it works the same in React, Vue, Angular, Svelte or without a framework.
• Doesn't touch window or document on import, so it's safe in Next.js, Nuxt and other SSR setups.
• Keyboard and screen reader support. All texts, the screen-reader ones included, can be translated via labels.

Features

• 12h / 24h, hour and minute steps, disabled times
• Optional seconds (HH:MM:SS) in the clock, wheel and compact wheel
• 12 themes (Material 2/3, Crane, Dark, Cyberpunk, Blueprint, ...)
• Inline mode, clear button, mobile layout
• Time ranges and timezones via plugins
• TypeScript types included

Installation

npm install timepicker-ui

Quick start

<input id="timepicker" type="text" />

import { TimepickerUI } from "timepicker-ui";
import "timepicker-ui/main.css";

const input = document.querySelector("#timepicker");
const picker = new TimepickerUI(input, {
  clock: { type: "24h" },
  ui: { theme: "dark" },
  callbacks: {
    onConfirm: (data) => console.log("Selected:", data),
  },
});
picker.create();

No global CSS reset is needed: the picker sets box-sizing: border-box on its own elements (details).

API

picker.create();               // render the picker and attach it to the input
picker.open();
picker.close();
picker.destroy();
picker.getValue();             // { hour, minutes, seconds, type, time }, seconds only with clock.showSeconds
picker.setValue("14:30");      // "2:30 PM" works too
picker.setValue("14:30:15");   // with clock.showSeconds
picker.setOptions({ ui: { theme: "crane" } });

Shortened. The full README is on GitHub.