A time picker you can configure part by part.

Each part of the picker maps to one option or one tp-ui- class. Analog clock, scroll wheel or compact wheel. No dependencies, 12 themes, TypeScript types, safe to render on the server.

Get started

npm install timepicker-ui

Fig. 1Analog mode with the default theme. Drag the hand or type a time.

labels.clockTitleHeader text. Every label is an option.
clock.incrementHoursHour step: 1, 2, 3, 4 or 6.
ui.mode'clock', 'wheel' or 'compact-wheel'.
labels.ok · labels.cancelButton text. Optional in inline mode.
clock.type'12h', '24h' or 'auto' from the locale.
clock.incrementMinutesMinute step, for example 5 or 15.
clock.discreteHourJumpThe hour hand jumps from hour to hour while you drag.
.tp-ui-wrapperRoot class. Every part has a stable tp-ui- class.

Three modes, one option

The analog clock is built in. The scroll wheel and the compact wheel come from the wheel plugin, so they only reach your bundle when you import it.

Fig. 2aClock ui: { mode: 'clock' }

Fig. 2bWheel ui: { mode: 'wheel' }

Fig. 2cCompact wheel ui: { mode: 'compact-wheel' }

What the picker does

Every feature has an option and a page in the docs. Options are grouped by what they change: clock, ui, labels, behavior, callbacks.

**Table 1** Features and the options that control them. All options
No.	Feature	Option	Docs
01	12-hour, 24-hour, or the browser's choice	`clock.type`	12h/24h Format
02	Seconds field, wheel column and clock face	`clock.showSeconds`	Seconds
03	Hours, minutes or ranges that can't be picked	`clock.disabledTime`	Disabled Time
04	Render in the page instead of a modal	`ui.inline`	Inline Mode
05	Layout for phones	`ui.mobile`	Mobile Support
06	Button that clears the value	`ui.clearButton`	Clear Button
07	Every text, in any language	`labels.*`	Localization
08	Keyboard, focus trap and screen-reader labels	built in	Accessibility
09	Events for every selection	`callbacks.*`, `picker.on()`	Events
10	Types for every option and event	included	TypeScript

Plugins you import when you need them

Register a plugin once and its options start working. Sizes are min + gzip from the bundle analysis. The core is 25.66 KB.

Range: Start and end time in one picker, with a minimum and maximum duration.import { RangePlugin } from 'timepicker-ui/plugins/range';; 3.68 KB
Timezone: A timezone dropdown next to the time, with keyboard support.import { TimezonePlugin } from 'timepicker-ui/plugins/timezone';; 2.57 KB
Wheel: The scroll wheel and compact-wheel modes from Fig. 2.import { WheelPlugin } from 'timepicker-ui/plugins/wheel';; Bundle analysis

Fig. 4Range plugin, at least 30 minutes.

Works where your app runs

The core is plain TypeScript with no DOM access at import time, so it runs under Next.js, Nuxt and other SSR setups. React has its own wrapper.

main.ts

1import { TimepickerUI } from 'timepicker-ui';
2import 'timepicker-ui/index.css';
3
4const picker = new TimepickerUI('#time', {
5  clock: { type: '24h' },
6  callbacks: { onConfirm: (data) => console.log(data.hour, data.minutes) },
7});
8picker.create();

Open source, MIT

Written and maintained by one developer. No runtime dependencies, no telemetry. Bugs and ideas go to GitHub issues. Every release is listed in the changelog.

Star on GitHub

GitHub repository100 stars
npm packagetimepicker-ui
Changelog4.5.0
Roadmap5.0
Report a bugissues