Timezone Plugin

Name: timepicker-ui
Author: Piotr Glejzer

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

Basic Timezone Selector

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { TimezonePlugin } from 'timepicker-ui/plugins/timezone';
3
4PluginRegistry.register(TimezonePlugin);
5
6const picker = new TimepickerUI(input, {
7  timezone: {
8    enabled: true
9  }
10});
11picker.create();

With Default Timezone

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { TimezonePlugin } from 'timepicker-ui/plugins/timezone';
3
4PluginRegistry.register(TimezonePlugin);
5
6const picker = new TimepickerUI(input, {
7  timezone: {
8    enabled: true,
9    default: 'Europe/London'
10  }
11});
12picker.create();

Whitelisted Timezones

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { TimezonePlugin } from 'timepicker-ui/plugins/timezone';
3
4PluginRegistry.register(TimezonePlugin);
5
6const picker = new TimepickerUI(input, {
7  timezone: {
8    enabled: true,
9    default: 'America/New_York',
10    whitelist: [
11      'America/New_York',
12      'America/Los_Angeles',
13      'Europe/London',
14      'Europe/Paris',
15      'Asia/Tokyo'
16    ]
17  }
18});
19picker.create();

Custom Label

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { TimezonePlugin } from 'timepicker-ui/plugins/timezone';
3
4PluginRegistry.register(TimezonePlugin);
5
6const picker = new TimepickerUI(input, {
7  timezone: {
8    enabled: true,
9    label: 'Time Zone'
10  }
11});
12picker.create();