-
Notifications
You must be signed in to change notification settings - Fork 77
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
calcite-input-time-zone-offset-picker #6590
Comments
This request is a requirement of the Maps SDK for JavaScript to support new date fields throughout the ArcGIS ecosystem - should be paired with the enhancement request from #6591. |
The JSAPI currently has a simple timezone picker component that is used internally on the Daylight and ShadowCast widgets. This component might be a useful reference and source of I18N strings. This picker whilst currently adequate does have a few limitations, for instance, it is not daylight savings aware and may not follow the calcite design pattern. I would suggest that core of the your picker is a collection of prominent IANA time zones paired with an internationalized name. For previously internationalized location names you may be able to utilize this. const timeZonePairing = Map<string, string>([
{ timeZone: "America/Argentina/Buenos_Aires", name: "Buenos Aires" },
{ timeZone: "Asia/Tbilisi", name: "Tbilisi" },
{ timeZone: "America/Los_Angeles", name: "Los Angeles" }
]), Ultimately we want to produce a visual that looks like this: GMT-9 Buenos Aires
GMT-8 Tbilisi
GMT-7 Los Angeles (PST) The GMT component can be obtained via function getTimeZoneShortOffset(prototype: Date, locale: string = "en-US"): string {
const dateTimeFormat = new Intl.DateTimeFormat(locale, { timeZoneName: "shortOffset" });
const parts = dateTimeFormat.formatToParts(date);
const { value } = parts.find(({ type }) => type === "timeZoneName");
return value; // return "GMT-8" etc
} Some locales may have a localized name of a time zone offsets. For example, people living the US will refer to US offsets as "PDT", "PST', "EDT', "EST" etc. To find the localized offset name use this snippet. When this value is different from the GMT offset then we should display it next to the location name, for example, function getTimeZoneShort(prototype: Date, locale: string = "en-US"): string {
const dateTimeFormat = new Intl.DateTimeFormat(locale, { timeZoneName: "short" });
const parts = dateTimeFormat.formatToParts(date);
const { value } = parts.find(({ type }) => type === "timeZoneName");
return value; // return "UTC", "GMT-8", "PDT" etc
} Once we have GMT offsets (and possible named offsets) for each city then need to be grouped and sorted. Specifically, grouped by GMT offset and locations groups alphabetically, for example: GMT+10 Guam, Melbourne, Sydney
GMT+11 New Caledonia, Victoria
GMT+12 Auckland (NZST), Wellington (NZST) Hope this helps! |
This is the latest look on the ArcGIS Maps SDK. It is using a Ideally we'd have a few different options for the trigger which would open the select/dropdown. In cases like the one brought up by @richiecarmichael in the original issue, a sull "select" makes sense, but I think we should also have a smaller and less prominent alternative for when you want to display the timezone picker next to a time value, for example. |
I think this can also be an invaluable resource: https://www.nngroup.com/articles/time-zone-selectors/ I also think we need to consider the use case where a date is not only set before selecting a timezone but also set afterwards. In the Maps SDK we sometimes want to update the lighting when the date is changed such that the displayed clock time stays the same. While that could be possible by trying to compute the change in offset for the previous and new date, I think ideally we should have the ability of storing an actual timezone ID/name which we could eventually pass to Temporal.Timezone.from or to Luxon's DateTime.setZone. |
The following will give a list of all named IANA time zones. console.log(Intl.supportedValuesOf('timeZone'));
// Array ["Africa/Abidjan", "Africa/Accra", "Africa/Addis_Ababa", ... Unfortunately JSAPI 4.27 Supported browsers (see here)
Browser Support of
|
Reallocating to the May milestone, where it is expected to land soon for additional texting in |
**Related Issue:** #6590 ## Summary Add missing string for a11y label.
**Related Issue:** #6590 ## Summary Add base bundles for translation.
**Related Issue:** #6590 ## Summary Add missing string for a11y label.
IMO this still seems a bit too compositional to be a “lego piece” component. Choosing a single component to display this data can be limiting. Will a single component satisfy the design needs of displaying this data in combobox, list, drop-down, select, all of which could be valid depending on use case? If we decide this will be data rendered into a combobox, does that help the team that wants to invoke a drop-down of this data from a button, like the examples above? |
I disagree. In the end we are providing a consistent way for users to select a time zone offset and, IMO, this is akin to displaying days on a calendar. We don't provide the data behind the calendar for alternate ways of displaying that data.
Not sure about this one, but there wasn't an option before and hence why we have fragmentation at the moment.
Depending on the use cases, we could enhance the component to cover the gaps that necessitate using other components for the same experience. |
@jcfranco we will not using this component at 4.27 as we decided to only support You can find the general updates on adding support for new date/time fields from this planning doc issue: https://devtopia.esri.com/WebGIS/arcgis-js-api-planning-docs/issues/287#issue-1369706 |
Reallocated to the upcoming July milestone per the discussion above. |
Quick update, the initial version of this component will display a list of time zone offsets: I've got a PR in the works that will add a mode to display more info per time zone and also allow users to search for a time zone regardless of being listed or not: This should allow the simple version to ship in the upcoming version and the advanced version being available in the following one. |
When opened, each time zone offset will display a preview of local time. Good catch. I'll make sure cities are sorted alphabetically. |
I don't think this is needed. |
Per our convo, we'll hold off on the preview for the initial version and revisit once @ashetland comes back next week. Reasoning:
|
**Related Issue:** #6590 ## Summary This adds a new component to allow users to select time zone offsets.
Installed and assigned for verification. |
Verified on
cc @ashetland @SkyeSeitz for Figma updates |
**Related Issue:** #6590 ## Summary This adds a new component to allow users to select time zone offsets.
Description
Background
Esri is adding support for three new field types, one of which is
esriFieldTypeTimestampOffset
. The values in this field are encoded as ISO8601 date strings with a time zone offset, for example:2023-03-13T20:49:00-08:00
2023-03-13T20:49:00Z
(same as2023-03-13T20:49:00+00:00
)We have calcite components to edit the date component, time component but not the time-zone-offset component.
Proposal
If a feature has a field value of
2023-03-02T02:53:31-08:00
, then the JSAPI's editor would present the following UI.Where the UI is comprised of the following components:
<calcite-input-date-picker>
<calcite-input-time-picker>
<calcite-input-time-zone-offset-picker>
When the user clicks the
calcite-input-time-zone-offset-picker
the following dropdown menu appears.// @jcfranco
User Stories
Possible scenarios involve editing of the new
esriFieldTypeTimestampOffset
date field values. These date fields can be edited in either the JSAPI's Editor or FeatureTable.Scenario.
Acceptance Criteria
Relevant Info
No response
Helpful Details
The JSAPI's Daylight widget has a Timezone Picker.
How time zone offsets are picked in Google Calendar.
Esri team
ArcGIS Maps SDK for JavaScript
Reference
The text was updated successfully, but these errors were encountered: