TimeZonePicker

You can create a TimeZonePicker by using the useTimeZonePicker hook with a FilterMenu. The hook provides the necessary props to FilterMenu, 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';

useTimeZonePicker​

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 FilterMenu.

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

const {
  filteredOptions,
  getFilterMenuProps,
  getFilterMenuTriggerProps,
  getFilterMenuSearchFieldProps,
  getFilterMenuSearchInputProps,
  getFilterMenuListboxProps,
  getFilterMenuItemProps,
} = useTimeZonePicker({
  preferredTzIdentifier: timeZone,
  onValueChange: (option) => setTimeZone(option.tzRaw),
});

return (
  <Field className="w-full max-w-xs" label="Time zone" labelVisibility="hidden">
    <FilterMenu {...getFilterMenuProps()}>
      <FilterMenuTrigger {...getFilterMenuTriggerProps()} />
      <FilterMenuPopover>
        <FilterMenuSearchField {...getFilterMenuSearchFieldProps()}>
          <FilterMenuSearchInput {...getFilterMenuSearchInputProps()} />
        </FilterMenuSearchField>
        <FilterMenuListbox {...getFilterMenuListboxProps()}>
          {filteredOptions.map((option) => {
            const filterMenuItemProps = getFilterMenuItemProps(option);
            return (
              <FilterMenuItem
                {...filterMenuItemProps}
                key={filterMenuItemProps.id}
              />
            );
          })}
        </FilterMenuListbox>
      </FilterMenuPopover>
    </FilterMenu>
  </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,
  getFilterMenuProps,
  getFilterMenuTriggerProps,
  getFilterMenuSearchFieldProps,
  getFilterMenuSearchInputProps,
  getFilterMenuListboxProps,
  getFilterMenuItemProps,
} = useTimeZonePicker({ preferredTzIdentifier: 'Australia/Sydney' });

return (
  <Field className="w-full max-w-xs" label="Time zone" labelVisibility="hidden" isDisabled>
    <FilterMenu {...getFilterMenuProps()}>
      <FilterMenuTrigger {...getFilterMenuTriggerProps()} />
      <FilterMenuPopover>
        <FilterMenuSearchField {...getFilterMenuSearchFieldProps()}>
          <FilterMenuSearchInput {...getFilterMenuSearchInputProps()} />
        </FilterMenuSearchField>
        <FilterMenuListbox {...getFilterMenuListboxProps()}>
          {filteredOptions.map((option) => {
            const filterMenuItemProps = getFilterMenuItemProps(option);
            return (
              <FilterMenuItem
                {...filterMenuItemProps}
                key={filterMenuItemProps.id}
              />
            );
          })}
        </FilterMenuListbox>
      </FilterMenuPopover>
    </FilterMenu>
  </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.