TimeZonePicker

You can create a TimeZonePicker by using the useTimeZonePicker hook with a SelectMenu. The hook provides the necessary props to SelectMenu, making it easy to show and manage time zone selection.

Figma LibraryView in StorybookView in PlayroomAPI Reference

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { TimeZonePicker } from '@adaptavant/eds-core';
Added
1.0.0

Basic Usage​

The useTimeZonePicker hook returns some state (such as the options that have been filtered based on the search query) and a series of prop 'getter' functions to be spread onto the sub-components that make up the SelectMenu.

, Australia –Sydney
const [timeZone, setTimeZone] = React.useState('Australia/Sydney');

const {
  filteredOptions,
  getSelectMenuProps,
  getSelectMenuTriggerProps,
  getSelectMenuSearchFieldProps,
  getSelectMenuSearchInputProps,
  getSelectMenuListboxProps,
  getSelectMenuItemProps,
} = useTimeZonePicker({
  preferredTzIdentifier: timeZone,
  onValueChange: (option) => setTimeZone(option.tzRaw),
});

return (
  <Field className="w-full max-w-xs" label="Time zone" labelVisibility="hidden">
    <SelectMenu {...getSelectMenuProps()}>
      <SelectMenuTrigger {...getSelectMenuTriggerProps()} />
      <SelectMenuPopover>
        <SelectMenuSearchField {...getSelectMenuSearchFieldProps()}>
          <SelectMenuSearchInput {...getSelectMenuSearchInputProps()} />
        </SelectMenuSearchField>
        <SelectMenuListbox {...getSelectMenuListboxProps()}>
          {filteredOptions.map((option) => {
            const selectMenuItemProps = getSelectMenuItemProps(option);
            return (
              <SelectMenuItem
                {...selectMenuItemProps}
                key={selectMenuItemProps.id}
              />
            );
          })}
        </SelectMenuListbox>
      </SelectMenuPopover>
    </SelectMenu>
  </Field>
);
View in Playroom

useTimeZonePicker also accepts an options object. If you provide it a preferredTzIdentifier, it will use that as the default value; otherwise, it will attempt to detect the user’s local timezone.

Disabled​

Use the isDisabled prop for <Field/> to show that a TimeZonePicker isn't usable.

, Australia –Sydney
const {
  filteredOptions,
  getSelectMenuProps,
  getSelectMenuTriggerProps,
  getSelectMenuSearchFieldProps,
  getSelectMenuSearchInputProps,
  getSelectMenuListboxProps,
  getSelectMenuItemProps,
} = useTimeZonePicker({ preferredTzIdentifier: 'Australia/Sydney' });

return (
  <Field className="w-full max-w-xs" label="Time zone" labelVisibility="hidden" isDisabled>
    <SelectMenu {...getSelectMenuProps()}>
      <SelectMenuTrigger {...getSelectMenuTriggerProps()} />
      <SelectMenuPopover>
        <SelectMenuSearchField {...getSelectMenuSearchFieldProps()}>
          <SelectMenuSearchInput {...getSelectMenuSearchInputProps()} />
        </SelectMenuSearchField>
        <SelectMenuListbox {...getSelectMenuListboxProps()}>
          {filteredOptions.map((option) => {
            const selectMenuItemProps = getSelectMenuItemProps(option);
            return (
              <SelectMenuItem
                {...selectMenuItemProps}
                key={selectMenuItemProps.id}
              />
            );
          })}
        </SelectMenuListbox>
      </SelectMenuPopover>
    </SelectMenu>
  </Field>
);
View in Playroom

API Reference​

useTimeZonePicker

PropDefaultDescription
preferredTzIdentifier?_string
An optional identifier for a preferred time zone.
onValueChange?_(option: TimeZoneInfo) => void
Called with the selected TimeZoneInfo when the user picks a timezone.