Timezone Picker Local Time

ProNew

A timezone picker grouped by region that shows each zone's UTC offset and current local time, and finds zones by city or offset. Use this when someone schedules for people in other timezones.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

defaultValue

locale

disabled

Guide and examples

When to use it

Use it in scheduling, meeting and notification settings, where picking "Asia/Kolkata" from an alphabetical list is hard and seeing that it is 21:40 there makes the choice obvious.

Do not use it when you only need the viewer's own timezone. Read it with Intl.DateTimeFormat().resolvedOptions().timeZone and show it as text.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`value`	`string`	-	An IANA zone id such as `Europe/Paris` (controlled).
`defaultValue`	`string`	-	Initial zone.
`onValueChange`	`(zone: string) => void`	-	Runs when a zone is picked.
`zones`	`string[]`	25 common zones	IANA ids to offer.
`locale`	`string`	browser	Locale for the clock format.
`disabled`	`boolean`	`false`	Disables the button.

Accessibility

The button is a combobox; its name is the chosen city and offset.
Each row reads as the city, then UTC+5:30 and the local time, so a screen reader hears what a sighted person sees.
Offsets use the date today, so daylight saving is correct.
Nothing time-dependent renders on the server.

Testing

The pattern ships with a Testing Library test (timezone-picker-local-time.test.tsx) that covers the offset in rows, searching by offset and city, grouping by region and selecting.

Guide and examples

When to use it

Use it in scheduling, meeting and notification settings, where picking "Asia/Kolkata" from an alphabetical list is hard and seeing that it is 21:40 there makes the choice obvious.

Do not use it when you only need the viewer's own timezone. Read it with Intl.DateTimeFormat().resolvedOptions().timeZone and show it as text.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`value`	`string`	-	An IANA zone id such as `Europe/Paris` (controlled).
`defaultValue`	`string`	-	Initial zone.
`onValueChange`	`(zone: string) => void`	-	Runs when a zone is picked.
`zones`	`string[]`	25 common zones	IANA ids to offer.
`locale`	`string`	browser	Locale for the clock format.
`disabled`	`boolean`	`false`	Disables the button.

Accessibility

The button is a combobox; its name is the chosen city and offset.
Each row reads as the city, then UTC+5:30 and the local time, so a screen reader hears what a sighted person sees.
Offsets use the date today, so daylight saving is correct.
Nothing time-dependent renders on the server.

Testing

The pattern ships with a Testing Library test (timezone-picker-local-time.test.tsx) that covers the offset in rows, searching by offset and city, grouping by region and selecting.