Timezone Plugin

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

The selector is a select-only combobox. Focus it with Tab, open it with Enter, Space or the arrow keys, and type letters to jump to the next timezone that starts with them.

Basic Timezone Selector

#

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

#

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();

Custom Timezone List

#

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    list: [
11      'America/New_York',
12      'America/Los_Angeles',
13      'Europe/London',
14      'Europe/Paris',
15      'Asia/Tokyo'
16    ]
17  }
18});
19picker.create();

Custom Label

#

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  labels: {
11    timezone: 'Time Zone'
12  }
13});
14picker.create();

Extend the Built-in List

#

The plugin entry exports DEFAULT_TIMEZONES, the list the selector shows by default, and getTimezoneList(), which returns { id, label, offset } for each ID the browser knows. Spread the default list to add a zone. New in 4.7.0.

index.ts

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import {
3  TimezonePlugin,
4  getTimezoneList,
5  DEFAULT_TIMEZONES
6} from 'timepicker-ui/plugins/timezone';
7
8PluginRegistry.register(TimezonePlugin);
9
10const list = [...DEFAULT_TIMEZONES, 'Europe/Warsaw'];
11const zones = getTimezoneList(list);
12
13const picker = new TimepickerUI(input, {
14  timezone: {
15    enabled: true,
16    default: 'Europe/Warsaw',
17    list
18  }
19});
20picker.create();

Default Not in the List

#

A timezone.default that is not in the list falls back to the browser timezone, or the first entry, and emits an error event once. New in 4.7.0.

index.ts

1const picker = new TimepickerUI(input, {
2  timezone: { enabled: true, default: 'Europe/Warsaw' }
3});
4picker.create();
5
6picker.on('error', (data) => {
7  console.warn(data.error);
8  // timezone.default "Europe/Warsaw" is not in the timezone list, using "Europe/Paris"
9});