Timezone Select
An IANA timezone picker showing each zone's current offset and local time. Zones are named by city, never by abbreviation — "CST" is Central, China and Cuba Standard Time.
src/components/ui/timezone-select.tsxAbout
From the component's own source, where it was written.
An IANA timezone picker showing each zone's current offset and local time.
The list comes from Intl.supportedValuesOf('timeZone'), so it is whatever the runtime actually supports rather than a hardcoded table that goes stale every time a government moves a DST boundary. Older runtimes without that method fall back to a small common set — a short list beats a crash.
Offsets are computed live rather than stored. A zone's offset is a function of the date, and a list built in January is wrong for half the year.
Zones are labelled by city, not by abbreviation. "CST" is Central Standard Time, China Standard Time and Cuba Standard Time; America/Chicago is one place. The abbreviation is shown alongside for recognition, never alone.
Install
npx astralyx-ui add timezone-select
Usage
import { TimezoneSelect } from '@/components/ui/timezone-select'
<TimezoneSelect value={zone} onValueChange={setZone} />Composer
Change the props and the source below follows.
<TimezoneSelect value={zone} onValueChange={setZone} />Examples
Controlled selection
const [zone, setZone] = useState('Europe/London')
<TimezoneSelect value={zone} onValueChange={setZone} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
TimezoneSelect
Extends Omit< ComponentProps<typeof Combobox>, 'options' | 'searchPlaceholder' >.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | — | — |
| value | string | — | — |
| error | boolean | — | — |
| disabled | boolean | — | — |
| variant | 'default' | 'secondary' | 'ghost' | — | Matches Input and Select, so a form can be uniform. |
| size | keyof typeof fieldSize | — | — |
| onValueChange | (value: string) => void | — | — |
| placeholder | string | 'Select timezone…' | — |
| emptyMessage | string | — | — |
| zones | string[] | — | Restrict the list. A booking form rarely needs all four hundred. |
| showLocalTime | boolean | true | The zone's current wall-clock time — usually the fastest way to recognise the right one. |
| now | Date | — | Reference instant for offsets. Defaults to now. |
Functions
| Function | Signature | Description |
|---|---|---|
| listTimezones | () => string[] | — |
| offsetMinutes | (zone: string, at: Date) => number | Current UTC offset of a zone, in minutes, derived from a formatted date. |
| formatOffset | (minutes: number) => string | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| options | from the runtime | Intl.supportedValuesOf("timeZone"), so the list is whatever the browser actually supports rather than a table that rots each time a government moves a DST boundary. |
| offsets | computed live | A zone's offset is a function of the date. A list built in January is wrong for half the year. |
| search | city or region | The region stays in the label, so Europe/London is findable by "Europe" as well as by "London". |