FR: support "relative" timezone options in TimezoneSelect

Environment

• Package version(s): datetime v5.0.10

Feature request

Right now, <TimezoneSelect> only supports fixed timezone options. You may select from a number of timezones and use a particular IANA code to interpret Date values / render ISO date strings. One of those options is a "local" timezone, but this is also fixed in the sense that it is detected once and then fixed to whatever value corresponds to a single user's current timezone.

Sometimes, it's useful to create a UI where a user may select a relative local timezone which can be used to display dates in a timezone relative to wherever a different user may be located. For example, if I select this option for displaying dates/times and it is currently 9AM in New York (EDT), that time should be displayed as 6AM in San Francisco (PDT).

This kind of UI can already be built if you treat <TimezoneSelect> as strictly a "fixed timezone selector" and conditionally render it if you only desire a fixed timezone. But it might be nice to add native support for the proposed "relative local timezone" option as well.

Proposed solution

We could add this new option to the existing API without breaking the onChange: (timezone: string) => void callback type. One idea:

export enum RelativeTimezoneOption {
	LOCAL = "local",
};

const handleChange = (timezone: string) => {
	if (timezone === RelativeTimezoneOption.LOCAL) {
		// ...
    } else {
		// ...
    }
};

<TimezoneSelect onChange={handleChange} />

There are some nuances here with how this new value should be interpreted by users and how it would get used in <DateInput> which embeds a <TimezoneSelect>.

Examples

sandbox demo coming soon