Timezone select

A TimezoneSelect is a searchable menu of timezones. Its value is an IANA timezone code, such as "Europe/Berlin".

Usage#

import { TimezoneSelect } from "@clawscale/react/datetime";

<TimezoneSelect value={timezone} onChange={setTimezone} />

Examples#

Basic#

value and onChange are required. onChange receives the code of the chosen timezone. Users can search by city, code, name or abbreviation. UTC is "Etc/UTC".

deploy.schedule.timezone = "Etc/UTC"

datetime/timezone-select/basic.tsx

import { Code } from "@clawscale/react";
import { TimezoneSelect } from "@clawscale/react/datetime";
import { useState } from "react";

export default function TimezoneSelectBasic() {
  const [timezone, setTimezone] = useState("Etc/UTC");
  return (
    <div style={{ display: "grid", gap: 12, justifyItems: "center" }}>
      <TimezoneSelect value={timezone} onChange={setTimezone} />
      <Code>deploy.schedule.timezone = {JSON.stringify(timezone)}</Code>
    </div>
  );
}

Local timezone#

showLocalTimezone lists the user's timezone first. placeholder shows while value is undefined.

datetime/timezone-select/local-timezone.tsx

import { TimezoneSelect } from "@clawscale/react/datetime";
import { useState } from "react";

export default function TimezoneSelectLocalTimezone() {
  const [timezone, setTimezone] = useState<string>();
  return (
    <TimezoneSelect
      showLocalTimezone
      placeholder="Select the on-call timezone"
      value={timezone}
      onChange={setTimezone}
    />
  );
}

Display format#

valueDisplayFormat sets the button text: composite (default), abbreviation, long-name, offset or code. Names and abbreviations follow the runtime's locale, and offsets follow daylight saving time, so the server and the browser can disagree. code never does.

datetime/timezone-select/display-format.tsx

import { SegmentedControl } from "@clawscale/react";
import { TimezoneDisplayFormat, TimezoneSelect } from "@clawscale/react/datetime";
import { useState } from "react";

const formats = Object.values(TimezoneDisplayFormat).map((value) => ({ label: value, value }));

export default function TimezoneSelectDisplayFormat() {
  const [timezone, setTimezone] = useState("Asia/Tokyo");
  const [format, setFormat] = useState<TimezoneDisplayFormat>("code");
  return (
    <div style={{ display: "grid", gap: 12, justifyItems: "center" }}>
      <SegmentedControl
        size="small"
        options={formats}
        value={format}
        onValueChange={(value) => setFormat(value as TimezoneDisplayFormat)}
      />
      <TimezoneSelect value={timezone} onChange={setTimezone} valueDisplayFormat={format} />
    </div>
  );
}

Props interface#

interface TimezoneSelectProps extends Props@clawscale/react/datetime

Props	Description
`buttonProps`	`Partial<ButtonProps>` Props to spread to the target `Button`. This prop will be ignored if `children` is provided.
`children`	`React.ReactNode` Element which triggers the timezone select popover. If this is undefined, by default the component will render a `<Button>` which shows the currently selected timezone.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`date`	`Date` = `now` The date to use when formatting timezone offsets. An offset date is necessary to account for DST, but typically the default value of `now` will be sufficient.
`disabled`	`boolean` = `false` Whether this component is non-interactive. This prop will be ignored if `children` is provided.
`fill`	`boolean` = `false` Whether the component should take up the full width of its container. This overrides `popoverProps.fill` and `buttonProps.fill`.
`inputProps`	`InputGroupProps` Props to spread to the filter `InputGroup`. All props are supported except `ref` (use `inputRef` instead). If you want to control the filter input, you can pass `value` and `onChange` here to override `Select`'s own behavior.
`onChange`required	`(timezone: string) => void` Callback invoked when the user selects a timezone.
`placeholder`	`string` = `"Select timezone..."` Text to show when no timezone has been selected (`value === undefined`). This prop will be ignored if `children` is provided.
`popoverProps`	`SelectPopoverProps["popoverProps"]` Props to spread to the popover. Note that `content` cannot be changed.
`showLocalTimezone`	`boolean` = `false` Whether to show the local timezone at the top of the list of initial timezone suggestions.
`value`required	`string \| undefined` The currently selected timezone UTC identifier, e.g. "Pacific/Honolulu".
`valueDisplayFormat`	`TimezoneDisplayFormat` = `TimezoneDisplayFormat.COMPOSITE` Format to use when displaying the selected (or default) timezone within the target element. This prop will be ignored if `children` is provided.