Get localized time zone names by time zone ID?

[mattjohnsonpint]

I see that the Globalize date module has some functionality that relies on timeZoneNames.json. Part of the data in these files is to support the rules defined in Part 4 Section 7 of the TR35 spec, which are used to determine the localized display name of a given time zone.

For example, given America/Los_Angeles, and en-US, I should be able to get back:

{
    "generic": "Pacific Time",
    "standard": "Pacific Standard Time",
    "daylight": "Pacific Daylight Time"
}

Is this something that Globalize can do today and I'm just not finding it in the documentation? If not, is it planned for a future release?

Thanks, Matt

[rxaviers]

Hi @mj1856, globalize doesn't fully support timezone.

• What's supported: #202
• What's not supported: #340 (including display name)

I'm closing your issue in favor of the ones above. Feel free to add comments there. Thanks

[ravalibusetty1991]

Hi, just checking again. I'm really in need of a good library in Javascript which will give me localized timezone display names. For example, "Pacific Standard Time" when I pass in "America/Los_Angeles" and "en-US". Is this supported in globalize?

[kborchers]

I don't know if it's exactly what you need but you might want to check out some combination of Globalize, Moment Timezone and/or Spacetime.

https://momentjs.com/timezone/ https://github.com/smallwins/spacetime

[rxaviers]

​All, globalize 1.3.0 does fully support IANA/Olson time zones 😄 (currently, use globalize@1.3.0-rc.0).

@rajavelmani, see Using time zones examples here:

// Requires Globalize 1.3.0 (globalize@1.3.0-rc.0)
Globalize.loadTimeZone( require( "iana-tz-data" ) );

Globalize.locale( "en" );

Globalize.dateFormatter({ datetime: "medium", timeZone: "America/Los_Angeles" })( new Date() );
// > "Nov 1, 2010, 12:55:00 PM"

Globalize.dateFormatter({ datetime: "medium", timeZone: "America/Sao_Paulo" })( new Date() )
// > "Nov 1, 2010, 5:55:00 PM"

Globalize.dateFormatter({ datetime: "full", timeZone: "Europe/Berlin" })( new Date() )
// > "Monday, November 1, 2010 at 8:55:00 PM Central European Standard Time"

If you are only looking for displaying the time zones names only, one approach is to use this:

var fmt = Globalize.dateFormatter({ raw: "zzzz", timeZone: "America/Los_Angeles" });
fmt( new Date( 2017, 0, 1 ) ); // > 'Pacific Standard Time'
fmt( new Date( 2017, 7, 1 ) ); // > 'Pacific Daylight Time'

You can use any CLDR Zone pattern.

[rxaviers]

https://momentjs.com/timezone/

Moment is a great library, but unfortunately it doesn't support CLDR. Globalize 1.3.0, which supports CLDR, now supports time zone. So basically using Globalize you have full IANA support with the strength of CLDR for i18n.

https://github.com/smallwins/spacetime

A much smaller library (0.6KB), if you need to manipulate time zone dates (no i18n), is https://github.com/rxaviers/zoned-date-time (used under the hoods by globalize).

[rxaviers]

It's worth to mention that a big concern when using time zones + i18n is the final size of your bundles...

On Globalize, you can take advantage of the Globalize Compiler. For example, let's say you are serving a content in English and for America/Los_Angeles time zone for example using this formatter:

var dateWithTimeZoneFormatter = Globalize.dateFormatter({
  datetime: "full",
  timeZone: "America/Los_Angeles"
});

The production final size of that will be:

filename	minified+gzipped size
i18n/en.js (includes CLDR and IANA data)	1.7KB
core+number+date globalize runtime lib	7.0KB

See globalize compiler example or app-npm-webpack example for details.

[kborchers]

This was all very helpful and detailed, @rxaviers. Thanks!!