timepicker-ui
4.7.0GitHub
timepicker-ui
GitHub4.7.0
Plugins / Wheel Mode

Wheel Plugin

Scroll-spinner interface replacing the analog clock face. Supports wheel (with header) and compact-wheel (headerless) modes. Compact-wheel opens as a popover when wheel.placement is set, otherwise as a modal.

Docs: Plugins

Basic Wheel (12h)

#
import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { WheelPlugin } from 'timepicker-ui/plugins/wheel';


PluginRegistry.register(WheelPlugin);


const picker = new TimepickerUI(input, {
  ui: { mode: 'wheel' }
});
picker.create();

24h Wheel

#
import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { WheelPlugin } from 'timepicker-ui/plugins/wheel';


PluginRegistry.register(WheelPlugin);


const picker = new TimepickerUI(input, {
  clock: { type: '24h' },
  ui: { mode: 'wheel' }
});
picker.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.

import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { WheelPlugin } from 'timepicker-ui/plugins/wheel';


PluginRegistry.register(WheelPlugin);


const picker = new TimepickerUI(input, {
  ui: { mode: 'compact-wheel' },
  wheel: { placement: 'auto' }
});
picker.create();

Compact-Wheel Popover (bottom)

#
import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { WheelPlugin } from 'timepicker-ui/plugins/wheel';


PluginRegistry.register(WheelPlugin);


const picker = new TimepickerUI(input, {
  ui: { mode: 'compact-wheel' },
  wheel: { placement: 'bottom' }
});
picker.create();

Compact-Wheel Popover (top)

#
import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { WheelPlugin } from 'timepicker-ui/plugins/wheel';


PluginRegistry.register(WheelPlugin);


const picker = new TimepickerUI(input, {
  ui: { mode: 'compact-wheel' },
  wheel: { placement: 'top' }
});
picker.create();

Wheel + Dark Theme

#
import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { WheelPlugin } from 'timepicker-ui/plugins/wheel';


PluginRegistry.register(WheelPlugin);


const picker = new TimepickerUI(input, {
  ui: { mode: 'wheel', theme: 'dark' }
});
picker.create();

Wheel + 5 Minute Steps

#
import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { WheelPlugin } from 'timepicker-ui/plugins/wheel';


PluginRegistry.register(WheelPlugin);


const picker = new TimepickerUI(input, {
  clock: { incrementMinutes: 5 },
  ui: { mode: 'wheel' }
});
picker.create();

Three Visible Rows

#

--tp-wheel-visible-items sets how many rows each column shows. Use an odd number: 3, 5 (the default) or 7. New in 4.7.0.

.tp-ui-wrapper.my-picker {
  --tp-wheel-visible-items: 3;
}


const picker = new TimepickerUI(input, {
  ui: { mode: 'wheel', cssClass: 'my-picker' }
});
picker.create();

Auto-Commit on Scroll

#

Writes the time to the input and emits confirm when scrolling stops - no OK button needed. The popover stays open.

import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { WheelPlugin } from 'timepicker-ui/plugins/wheel';


PluginRegistry.register(WheelPlugin);


const picker = new TimepickerUI(input, {
  ui: { mode: 'compact-wheel' },
  wheel: {
    placement: 'auto',
    commitOnScroll: true
  }
});
picker.create();

Ignore Outside Click

#

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

import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { WheelPlugin } from 'timepicker-ui/plugins/wheel';


PluginRegistry.register(WheelPlugin);


const picker = new TimepickerUI(input, {
  ui: { mode: 'compact-wheel' },
  wheel: {
    placement: 'bottom',
    ignoreOutsideClick: true
  }
});
picker.create();

Range in Wheel Modes

#

The range plugin works in wheel and compact-wheel too. See the range examples.

Esc