Time picker · clock
A time field you can type into in any common way or pick from snapping columns — 12- or 24-hour, minute steps, seconds, min / max with the impossible ones struck out, presets and a Now button.
Type it (930, 9:30pm, noon, now) · or pick it · ↑ ↓ in the field nudge it
Presets at the top of the panel
8 AM – 6 PM, every 15 minutes
Values: 09:30 · null · 14:05:30
A meeting
Usage
import { signal } from "./index.js";import { TimePicker } from "./components/timepicker.js"; const t = signal("09:30"); // always "HH:mm" (24-hour), whatever the field showsTimePicker({ value: t, label: "Start", hour12: true, step: 15, min: "08:00", max: "18:00", clearable: true })TimePicker({ value: t, presets: ["07:00", "08:00", "09:00"] }) // chips at the top of the panelTimePicker({ value: t, seconds: true }) // "HH:mm:ss"// the field reads "930", "9:30 pm", "21.30", "noon", "now"; ↑ ↓ nudge by the step, Shift by an hour