formatjs / date-time-format-timezone

Surgically polyfills timezone support in Intl.DateTimeFormat API

Intl.DateTimeFormat timezone polyfill

Surgically polyfills timezone support in Intl.DateTimeFormat API

Some browsers do not support arbitrary time zone in Intl.DateTimeFormat API (becuase its optional as per ECMA-402 standard). This polyfill is only to bring this support. Polyfill contains historical timezone data, CLDR data & tiny code to polyfill this support.

How to use?

1. Install via nodejs:

npm i date-time-format-timezone

And then import in your code:

require('date-time-format-timezone'); // polyfill is ready

2. In the browser

include everything:

<script src="https://unpkg.com/date-time-format-timezone@latest/build/browserified/date-time-format-timezone-complete-min.js">

or include individual files:

<script src="https://unpkg.com/date-time-format-timezone@latest/build/browserified/date-time-format-timezone-no-data-min.js">
<script src="https://unpkg.com/date-time-format-timezone@latest/build/browserified/data/locales/locale-en-US-POSIX.js">
<script src="https://unpkg.com/date-time-format-timezone@latest/build/browserified/data/metazone.js">
<script src="https://unpkg.com/date-time-format-timezone@latest/build/browserified/data/timezones/tzdata-america-los_angeles.js">

This polyfill can add this support.

new Intl.DateTimeFormat('hi', {
    timeZone: 'Asia/Calcutta',
    timeZoneName:'long',
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
}).format(new Date());

"११/१/२०१७, पू १:२६ भारतीय मानक समय"


new Intl.DateTimeFormat('en', {
    timeZone: 'America/Los_Angeles',
    timeZoneName:'long',
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
}).format(new Date());

"1/10/2017, 12:00 PM Pacific Standard Time"

Support

API	Support
Intl.DateTimeFormat	✅
Date.toLocaleString	✅
Date.toLocaleTimeString	✅
Date.toLocaleTimeString	✅

Generate latest data from www.iana.org.

git checkout https://github.com/yahoo/date-time-format-timezone.git
npm install
grunt download
grunt
npm publish

Browserified file size

	Minified	gzipped
complete	2.64MB	322KB
top zones1 only no locale	369.32KB	71KB
all zones no locale	303.19KB	75KB
top zones1 top locale2	641.86KB	148KB

*1. top zones are custom listed timezones here.

*2. top locales are custom listed locales here.

References

1. http://www.unicode.org/reports/tr35/tr35-dates.html#Using_Time_Zone_Names
2. http://icu-project.org/apiref/icu4j/com/ibm/icu/text/TimeZoneNames.html

date-time-format-timezone's Issues

Consider a more lightweight tz library

currently using Luxon in the API package

consider:
date-fns + date-fns-timezone
day.js

more lightweight, would make it easier to use datetime helpers across frontend/backend - https://github.com/everydotorg/every.org/pull/2508#discussion_r379343851

Error when getting "long" name for timeZone Etc/UTC

new Intl.DateTimeFormat('en', {
timeZone: 'Etc/UTC',
timeZoneName:'long',
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
}).format(new Date())

throws error "Error: unsupported value "long" for timeZone Etc/UTC. requires locale data for en-US" in IE 11

formatToParts capability is not included in the last publish

As can be seen on unpkg, the latest release doesn't include formatToParts.

This functionality existed before the release was cut, so I'm not sure what's gone wrong (perhaps no build before publishing?).

`grunt download` fails

I can't clone this repo and run grunt download as it looks like zdump -v generates timezone lines that the parser is unable to parse.

e.g.

Africa/Abidjan  -9223372036854775808 = NULL
Africa/Abidjan  -9223372036854689408 = NULL
Africa/Abidjan  Mon Jan  1 00:16:07 1912 UT = Sun Dec 31 23:59:59 1911 LMT isdst=0 gmtoff=-968
Africa/Abidjan  Mon Jan  1 00:16:08 1912 UT = Mon Jan  1 00:16:08 1912 GMT isdst=0 gmtoff=0
Africa/Abidjan  9223372036854689407 = NULL
Africa/Abidjan  9223372036854775807 = NULL

It looks like changing zdump -v to zdump -V adjusts its format slightly:

Like -v, except omit the times relative to the extreme time values. This generates output that is easier to compare to that of implementations with different time representations.

This lets download to reach its next error:

zdump can output "UT" for timestamps, which is currently unsupported by the matching regex.
One could adjust the regex to make the C optional: UTC?.
This allows us to fully compile the timezone data from its IANA sources.

Sadly this causes issues with the test files as all Etc/*.zdump are empty which causes the loader to throw.

I'm not sure what's the best solution to fix this though.
I guess one could try to just remove the Etc/* timezones as they're an artifact from ancient times:

These entries are mostly present for historical reasons, so that
people in areas not otherwise covered by the tz files could "zic -l"
to a timezone that was right for their area. These days, the
tz files cover almost all the inhabited world, and the only practical
need now for the entries that are not on UTC are for ships at sea
that cannot use POSIX TZ settings.

Does anyone know if I'm doing something wrong?
I'm using zdump from tzdata 2018i.

Formatting of timezone fails in IE11

date-time-format-timezone/src/code/lookup-utill.js

Line 64 in 1501228

const toVal = metaName.to ? new Date(metaName.to + offsetString).getTime() : maxTs;

This line fails because the IE11 Date constructor doesn't like the "from" or "to" formats found in the timezone data. We only see a problem when there is more than one entry in metaNameData since otherwise it picks it automatically. For example I tried "America/Anchorage".

Full command line example:
new Date().toLocaleString("en-US",{timeZoneName: "short", timeZone: "America/Anchorage"})

Try this on the command line and see it fail in IE but work elsewhere:
new Date("1983-11-30 09:00-08:00")

Now replace the space with "T" and it works.
new Date("1983-11-30T09:00-08:00")

So that's the fix. Replace space with "T".

Explain what "top zones" are

Also any other related concept in the "size" section of the readme.

formatToParts

Would you accept a PR that adds a similar TZ-aware wrapper for formatToParts?

America/Punta_Arenas timezone is not supported, causes crash in IE11

America/Punta_Arenas timezone is not supported, causes crash in IE11

unpkg cdn link currently broken

When including individual files as per the readme, the first hyperlink is currently broken, but all others work

<script src="https://unpkg.com/date-time-format-timezone@latest/build/browserified/date-time-format-time-zone-no-data.js">
<script src="https://unpkg.com/date-time-format-timezone@latest/build/browserified/data/locales/locale-en-US-POSIX.js">
<script src="https://unpkg.com/date-time-format-timezone@latest/build/browserified/data/metazone.js">
<script src="https://unpkg.com/date-time-format-timezone@latest/build/browserified/data/timezones/tzdata-america-los_angeles.js">

formatToParts in Chrome

Hi guys,

I expect when I use Chrome Intl....formatToParts() would not from polyfill.

Issue: When I run Chrome with Intl.js and date-time-format-timezone polyfills I have an error:
TypeError: Method Intl.DateTimeFormat.prototype.formatToParts called on incompatible receiver

This error relevant just for formatToParts().
format() works fine.

Include details about which browsers need this polyfill

It would be a nice addition to the README to document which major browsers are known to lack the support that this polyfill adds

Injection of locale data

We need a way to inject locale data. intl.js currently does it by having a __addLocaleData static method. We can add a similar method for timezone locale data. This would essentially be a different way of building the locale data files in build/src/data/locales/.

formatToParts breaks in Chrome

A while ago I contributed a PR that added formatToParts support. It works in FF and IE. When I contributed it, it also worked in Chrome, but now it breaks:

Uncaught TypeError: Method Intl.DateTimeFormat.prototype.formatToParts called on incompatible receiver #<b>
    at b.formatToParts (native)

You'd think that because I wrote it, I'd be able to figure it out, but I can't. I think it's because I don't really understand how this polyfill plays with the prototypes. Do you have any thoughts on how to fix it?

ECMAScript Module Support

Are there any plans to release this code in the form of a module?

This would make the code much easier to consume in projects like Deno:
denoland/deno#1636

Invalid license specified

The licence for this project isn't a proper SPDX expression.
It is currently BSD 3-clause but should be BSD-3-Clause

The complete list of SPDX licence expressions is found at https://spdx.org/licenses/

I'm happy to submit a PR to fix this, but it should just be a change to the licence field in the package.json.

Inconsistent format - option weekday: 'long' between Intl.DateTimeFormat and toLocaleDateString

if I use toLocaleDateString on polyfilled method with weekday option I get an incorrect date format
new Date().toLocaleDateString([], {
timeZone: undefined,
weekday: 'long'
})
"‎Thursday‎, ‎1‎ ‎23‎, ‎2020"

new Intl.DateTimeFormat([], {
timeZone: undefined,
weekday: 'long'
}).format(new Date())
"‎Thursday"

Australia Sydney is missing

Australia/Sydney is in the supported timezone list but hitting this

https://unpkg.com/[email protected]/build/browserified/data/timezones/tzdata-australia-sydney.js

returns not found

Object doesn't support property or method 'formatToParts'

I am trying to do the following:

const date = new Date()
new Intl.DateTimeFormat("en", {
  timeZone: "en",
  weekday: 'long',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  hour12: true
}).formatToParts(date)

However, I am getting the following in IE11:

Object doesn't support property or method 'formatToParts'

Am I missing something here? I can see from the previous issues that this is/was suppported.

Symbol with code 8206 added after each date values in IE

Symbol 8206 added after each date part.

Environment:
Browser: IE 11.431.16299.0
OS: Windows 10 v1709 build 16299.431

Code:

var options = {
    timeZone: "America/New_York",
};
var dateString = date.toLocaleString(undefined, options);

console.log(dateString.length); // output 33

// output - http://prntscr.com/jhsb55
for(var i = 0; i < dateString.length; i++) {
    console.log(dateString[i].charCodeAt(0))
}

new Date(dateString); // Invalid Date

timeZoneName value is empty in PhantomJS

I am using Intl.js + date-time-format-timezone polyfills.

I expect to see timeZoneName value in formatToPart() output.

Run

 const formatter2 = new Intl.DateTimeFormat('en, {
                timeZone: 'Asia/Calcutta',
                timeZoneName: 'long',
                year: 'numeric',
                month: 'numeric',
                day: 'numeric',
                hour: 'numeric',
                minute: 'numeric',
 }).formatToParts(new Date());

Output:
PhantomJS 2.1.1 (Mac OS X 0.0.0): [Object{type: 'month', value: '2'}, Object{type: 'literal', value: '/'}, Object{type: 'day', value: '28'}, Object{type: 'literal', value: '/'}, Object{type: 'year', value: '2018'}, Object{type: 'literal', value: ', '}, Object{type: 'hour', value: '7'}, Object{type: 'literal', value: ':'}, Object{type: 'minute', value: '25'}, Object{type: 'literal', value: ' '}, Object{type: 'dayPeriod', value: 'PM'}, Object{type: 'literal', value: ' '}, Object{type: 'timeZoneName', value: ''}]

As you can see timeZoneName value is empty.

With format() call output is:
'3/1/2018, 12:58 AM India Standard Time'

Intl.DateTimeFormat.prototype.formatToParts called on incompatible receiver

I'm still receiving this error on Chrome also if it was marked as resolved in #17

I'm on version 1.0.21

Method Intl.DateTimeFormat.prototype.formatToParts called on incompatible receiver #<DateTimeFormatPolyfill>

Here an example to reproduce the issue
https://codesandbox.io/s/date-time-format-timezone-formattoparts-error-h7v4t