Enhancement: l10n support for input-time-picker and time-picker components

[eriklharper]

Description

Adds locale-specific formatting to calcite-time-picker and calcite-input-time-picker based on Intl.DateTimeFormat.

Acceptance Criteria

Formats time appropriately based on locale in both the popup time-picker UI and in the corresponding input.

Relevant Info

Consult calcite-date for implementation details, which will be similar.

Which Component

calcite-time-picker, calcite-input-time-picker

Example Use Case

Resources

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat

[AdelheidF]

From Erik

It looks promising to see that the Intl.DateTimeFormat api supports locale formatting through this similar formatToParts API that I used to add number locale support https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts so it looks like we would do something quite similar for time formats as well. We would simply extract the time components based on the provided locale and arrange the components as appropriate in the UI.

[julio8a]

@babakbolour can you take a look at this one

[babakbolour]

@julio8a ok. will have @raje9276 look at this and comment back.

[raje9276]

I18n Considerations

1. 12hour vs 24 hour clock. In some locales default is 24 hour clock
2. AM/PM should be translated in some locales
3. AM/PM location may be after or before the time. Example: 10.00 PM can be written as 오후 10시
4. Native numbers should be considered for Arabic.

[github-actions]

Installed and assigned for verification.

[AdelheidF]

Currently the lang property has to be on the component itself for it to translate the am/pm strings. If this is intended then this prop is missing in the doc. But normally the lang prop works as long as a parent has it.
https://codepen.io/afreitag/pen/QWqrRGg

[AdelheidF]

From Erik:
it looks up to the document's lang or navigator.lang but it won't look up to any other parent nodes

[benelan]

Verified on next with the caveat Adelheid mentioned

it looks up to the document's lang or navigator.lang but it won't look up to any other parent nodes

We don't document global attributes, but do you think this should be mentioned somewhere due to the caveat? @jcfranco @macandcheese

[AdelheidF]

I tested all languages here:
https://codepen.io/afreitag/pen/MWOYOrp

Some don't seem to place the am/pm correctly. I don't know which version is right, but it should be the same between calcite-time-picker and calcite-input-time-picker.

[raje9276]

Calcite Input picker is the right format. AM/PM should be placed before the hour :minutes
CLDR Code


a h:mm

[AdelheidF]

To recap:

This issue here was about translating the time into different languages, e.g. am/pm. The main part of this is fixed now.

What's left here is that in LTR languages ZH and KO the am/pm is on the wrong side in calcite-time-picker.
calcite-input-time-picker does it correctly.

https://codepen.io/afreitag/pen/MWOYOrp

[github-actions]

Installed and assigned for verification.

[eriklharper]

Closing this and we'll continue discussion of the issue in #3883.