timepicker-ui
4.6.0GitHub
timepicker-ui
GitHub4.6.0
Features / Plugins

Plugins

Optional features as separate imports for smaller bundle sizes

Examples: Range ModeTimezone SelectorWheel Mode

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.js
import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { RangePlugin } from 'timepicker-ui/plugins/range';
import 'timepicker-ui/main.css';


PluginRegistry.register(RangePlugin);


const picker = new TimepickerUI(input, {
  range: {
    enabled: true,
    minDuration: 30,  // minimum 30 minutes
    maxDuration: 480  // maximum 8 hours
  },
  labels: {
    rangeFrom: 'Start',
    rangeTo: 'End'
  },
  callbacks: {
    onRangeConfirm: (data) => {
      console.log('From:', data.from);
      console.log('To:', data.to);
      console.log('Duration:', data.duration, 'minutes');
    }
  }
});
picker.create();

Range API

With the range plugin registered and range.enabled on, the instance can read and change the range from code. Without the plugin, or with range.enabled off, these methods emit an error event and do nothing.

  • setRange({ from, to }, updateInput = true) sets both ends. Each time uses the setValue() format, '14:30' or '2:30 PM'. It works while the picker is open or closed and emits range:validation.
  • getRange() returns { from, to }, or null. Each end is { hour, minutes, seconds?, type? } or null until it is complete.
  • setActivePart('from' | 'to') switches the clock to that end without moving focus and emits range:switch. It returns a boolean. With the default range.linked, 'to' is refused until From is complete.
index.ts
const picker = new TimepickerUI(input, {
  clock: { type: '24h' },
  range: { enabled: true }
});
picker.create();


picker.setRange({ from: '09:00', to: '17:00' });


const range = picker.getRange();
console.log(range?.from?.hour, range?.to?.hour);


picker.open();
const switched = picker.setActivePart('to');

Independent ends with range.linked

range.linked defaults to true. Set it to false to make From and To independent. Times before From are not disabled in To, the To tab is enabled from the start, and minDuration and maxDuration are not checked, so a range can cross midnight. range:validation still fires and reports valid: true once both ends are complete. Use it when your code validates the range with dates.

index.ts
const picker = new TimepickerUI(input, {
  clock: { type: '24h' },
  range: { enabled: true, linked: false }
});
picker.create();


picker.setRange({ from: '22:00', to: '01:00' });

See the live range example.

Timezone Plugin

#

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

index.js
import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { TimezonePlugin } from 'timepicker-ui/plugins/timezone';
import 'timepicker-ui/main.css';


PluginRegistry.register(TimezonePlugin);


const picker = new TimepickerUI(input, {
  timezone: {
    enabled: true,
    default: 'America/New_York',
    list: [
      'America/New_York',
      'America/Los_Angeles',
      'Europe/London',
      'Europe/Paris',
      'Asia/Tokyo'
    ]
  },
  labels: {
    timezone: 'Timezone'
  },
  callbacks: {
    onTimezoneChange: (data) => {
      console.log('Selected timezone:', data.timezone);
    }
  }
});
picker.create();

Wheel Plugin

#

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

index.js
import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
import 'timepicker-ui/main.css';


PluginRegistry.register(WheelPlugin);


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


// Compact-wheel popover (headerless, anchored to input)
const popoverPicker = new TimepickerUI(input2, {
  ui: { mode: 'compact-wheel' },
  wheel: {
    placement: 'auto',      // 'auto', 'top', or 'bottom'
    commitOnScroll: true,    // auto-confirm on scroll stop
    ignoreOutsideClick: false
  }
});
popoverPicker.create();

Using Multiple Plugins

#

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

index.js
import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { RangePlugin } from 'timepicker-ui/plugins/range';
import { TimezonePlugin } from 'timepicker-ui/plugins/timezone';
import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
import 'timepicker-ui/main.css';


// Register plugins once at startup
PluginRegistry.register(RangePlugin);
PluginRegistry.register(TimezonePlugin);
PluginRegistry.register(WheelPlugin);


// Range + Timezone picker
const rangePicker = new TimepickerUI(input1, {
  range: { enabled: true },
  timezone: { enabled: true }
});
rangePicker.create();


// Wheel picker
const wheelPicker = new TimepickerUI(input2, {
  ui: { mode: 'wheel' }
});
wheelPicker.create();
Esc