Support full and short timezone name in amp-date-display component

[jingfei]

Description

<amp-date-display> component supports a list of time parameters, yet the timezone name is not included. We'd like to use localized full and short timezone name as part of date display format. For example, momentjs provides short and full timezone name as the formatting option.

• the full timezone name is expected to support different locale: we'd like to show 18:11:16 Taipei Standard Time for user in Taipei with english locale while 18:11:16 [台北標準時間] for user in Taipei with Chinese locale.
• the short timezone name shows the abbreviated time zone name, e.g. PDT, PST, JST (example in momentjs)

Alternatives Considered

Currently we use data-options-* with timeStyle Intl.DateTimeFormat parameter in amp-date-display component as the workaround. It works well along with locale option (e.g. en-US story and ja-JP story), yet we figured the format is not flexible with timezone custom timestamp format. For example we're not able to show the format like HH:mm short-timezone --> 06:00 PST. Thus would like to have a FR to add full/short timezone as available parameters.

Additional Context

No response

[alanorozco]

EDIT: Disregard this comment, see my second reply below.

---

The problem with localized timezones is bundle size.

amp-date-display uses only native Date methods to display localized strings. The Date API does not provide a method to obtain a labeled timezone, only getTimezoneOffset.

If we map and label the timezone, the bundle grows by AMOUNT_OF_TIMEZONES * AMOUNT_OF_LANGUAGES.

You can roughly estimate the impact of this table by comparing the sizes of amp-date-display and moment-timezone in different data ranges. At worst amp-date-display would be ~11 times larger (-with-data), and at best ~5 times larger (-with-data-10-year-range).

curl -s https://cdn.ampproject.org/v0/amp-date-display-0.1.js | brotli -c | wc -c
   2115

curl -s https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.min.js  | brotli -c | wc -c
   9849

curl -s https://momentjs.com/downloads/moment-timezone-with-data.min.js | brotli -c | wc -c
  23843

I would be strongly against including this change in the standard amp-date-display build. However, this allows other alternatives. These are mostly equivalent, with differences in API:

A) Create a new <amp-timezone-display> extension that would print the result of moment-timezone-with-data-10-year-range.

B) Create a new <amp-date-display-with-timezone> extension.

C) Create a companion extension, like amp-timezone.js, that's required by validation when a certain amp-date-display configuration is used.

[alanorozco]

@caroqliu just let me know that while not available with Date, we may get a localized timezone by using Intl.DateTimeFormat.

[jingfei]

Thanks @alanorozco for the prompt support!