Feature

Plugins

Optional features as separate imports for smaller bundle sizes

Overview

Plugins are optional features that can be imported and registered separately. Register plugins once at app startup via PluginRegistry, then use features via options. If you don't need a feature, don't import it - your bundle stays small.

Tree-shaking friendly - unused plugins are excluded
Manual registration - import, register, use
Full TypeScript support with type definitions
3 plugins available: Range, Timezone, and Wheel

Range Plugin

Enables time range selection with "from" and "to" segments. Includes automatic validation and disabled time blocking.

index.javascriptjavascript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { RangePlugin } from 'timepicker-ui/plugins/range';
3import 'timepicker-ui/main.css';
4
5PluginRegistry.register(RangePlugin);
6
7const picker = new TimepickerUI(input, {
8  range: {
9    enabled: true,
10    fromLabel: 'Start',
11    toLabel: 'End',
12    minDuration: 30,  // minimum 30 minutes
13    maxDuration: 480  // maximum 8 hours
14  },
15  callbacks: {
16    onRangeConfirm: (data) => {
17      console.log('From:', data.from);
18      console.log('To:', data.to);
19      console.log('Duration:', data.duration, 'minutes');
20    }
21  }
22});
23picker.create();

Timezone Plugin

Adds a timezone selector dropdown to the timepicker. Display-only - does not convert times automatically.

index.javascriptjavascript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { TimezonePlugin } from 'timepicker-ui/plugins/timezone';
3import 'timepicker-ui/main.css';
4
5PluginRegistry.register(TimezonePlugin);
6
7const picker = new TimepickerUI(input, {
8  timezone: {
9    enabled: true,
10    default: 'America/New_York',
11    whitelist: [
12      'America/New_York',
13      'America/Los_Angeles',
14      'Europe/London',
15      'Europe/Paris',
16      'Asia/Tokyo'
17    ],
18    label: 'Timezone'
19  },
20  callbacks: {
21    onTimezoneChange: (data) => {
22      console.log('Selected timezone:', data.timezone);
23    }
24  }
25});
26picker.create();

Wheel Plugin

Replaces the analog clock face with a touch-friendly scroll-spinner. Two modes available: wheel (with header) and compact-wheel (headerless popover). Supports all themes, 12h/24h, disabled time, and keyboard navigation.

index.javascriptjavascript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
3import 'timepicker-ui/main.css';
4
5PluginRegistry.register(WheelPlugin);
6
7// Full wheel mode (with header)
8const picker = new TimepickerUI(input, {
9  ui: { mode: 'wheel' }
10});
11picker.create();
12
13// Compact-wheel popover (headerless, anchored to input)
14const popoverPicker = new TimepickerUI(input2, {
15  ui: { mode: 'compact-wheel' },
16  wheel: {
17    placement: 'auto',      // 'auto', 'top', or 'bottom'
18    commitOnScroll: true,    // auto-confirm on scroll stop
19    ignoreOutsideClick: false
20  }
21});
22popoverPicker.create();

Using Multiple Plugins

Register all plugins you need at app startup before creating TimepickerUI instances.

index.javascriptjavascript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { RangePlugin } from 'timepicker-ui/plugins/range';
3import { TimezonePlugin } from 'timepicker-ui/plugins/timezone';
4import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
5import 'timepicker-ui/main.css';
6
7// Register plugins once at startup
8PluginRegistry.register(RangePlugin);
9PluginRegistry.register(TimezonePlugin);
10PluginRegistry.register(WheelPlugin);
11
12// Range + Timezone picker
13const rangePicker = new TimepickerUI(input1, {
14  range: { enabled: true },
15  timezone: { enabled: true }
16});
17rangePicker.create();
18
19// Wheel picker
20const wheelPicker = new TimepickerUI(input2, {
21  ui: { mode: 'wheel' }
22});
23wheelPicker.create();