Wheel Plugin

Scroll-spinner interface replacing the analog clock face. Supports wheel (with header) and compact-wheel (headerless popover) modes.

Basic Wheel (12h)

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
3
4PluginRegistry.register(WheelPlugin);
5
6const picker = new TimepickerUI(input, {
7  ui: { mode: 'wheel' }
8});
9picker.create();

24h Wheel

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
3
4PluginRegistry.register(WheelPlugin);
5
6const picker = new TimepickerUI(input, {
7  clock: { type: '24h' },
8  ui: { mode: 'wheel' }
9});
10picker.create();

Compact-Wheel Popover (auto)

Headerless variant that opens as a popover anchored to the input. Automatically flips between top and bottom based on viewport space.

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
3
4PluginRegistry.register(WheelPlugin);
5
6const picker = new TimepickerUI(input, {
7  ui: { mode: 'compact-wheel' },
8  wheel: { placement: 'auto' }
9});
10picker.create();

Compact-Wheel Popover (bottom)

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
3
4PluginRegistry.register(WheelPlugin);
5
6const picker = new TimepickerUI(input, {
7  ui: { mode: 'compact-wheel' },
8  wheel: { placement: 'bottom' }
9});
10picker.create();

Compact-Wheel Popover (top)

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
3
4PluginRegistry.register(WheelPlugin);
5
6const picker = new TimepickerUI(input, {
7  ui: { mode: 'compact-wheel' },
8  wheel: { placement: 'top' }
9});
10picker.create();

Wheel + Dark Theme

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
3
4PluginRegistry.register(WheelPlugin);
5
6const picker = new TimepickerUI(input, {
7  ui: { mode: 'wheel', theme: 'dark' }
8});
9picker.create();

Wheel + 5 Minute Steps

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
3
4PluginRegistry.register(WheelPlugin);
5
6const picker = new TimepickerUI(input, {
7  clock: { incrementMinutes: 5 },
8  ui: { mode: 'wheel' }
9});
10picker.create();

Auto-Commit on Scroll

Automatically confirms and closes when scrolling stops - no OK button needed.

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
3
4PluginRegistry.register(WheelPlugin);
5
6const picker = new TimepickerUI(input, {
7  ui: { mode: 'compact-wheel' },
8  wheel: {
9    placement: 'auto',
10    commitOnScroll: true
11  }
12});
13picker.create();

Ignore Outside Click

Prevents the popover from closing on outside click - user must press OK or Cancel.

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
3
4PluginRegistry.register(WheelPlugin);
5
6const picker = new TimepickerUI(input, {
7  ui: { mode: 'compact-wheel' },
8  wheel: {
9    placement: 'bottom',
10    ignoreOutsideClick: true
11  }
12});
13picker.create();