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

Range Plugin

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

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,
    fromLabel: 'Start',
    toLabel: 'End',
    minDuration: 30,  // minimum 30 minutes
    maxDuration: 480  // maximum 8 hours
  },
  callbacks: {
    onRangeConfirm: (data) => {
      console.log('From:', data.from);
      console.log('To:', data.to);
      console.log('Duration:', data.duration, 'minutes');
    }
  }
});
picker.create();

Timezone Plugin

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

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',
    whitelist: [
      'America/New_York',
      'America/Los_Angeles',
      'Europe/London',
      'Europe/Paris',
      'Asia/Tokyo'
    ],
    label: 'Timezone'
  },
  callbacks: {
    onTimezoneChange: (data) => {
      console.log('Selected timezone:', data.timezone);
    }
  }
});
picker.create();

Using Multiple Plugins

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

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

const picker = new TimepickerUI(input, {
  range: { enabled: true },
  timezone: { enabled: true }
});
picker.create();