timezone plugin broken in IE11 (unsupported method)

Describe the bug Intl.DateTimeFormat.formatToParts is not supported in IE11. This method is used by the timezone plugin here. Using the plugin in IE11 results in a runtime error.

Expected behavior IE11 support. Documentation states “Currently the following browsers are used for the ci system: Chrome on Windows XP, IE 8, 9, and 10 on Windows 7, IE 11 on Windows 10, latest Firefox on Linux, and latest Safari on OSX 10.8 and 10.11.”

Information

• Day.js Version 1…10.4
• OS: Windows 10
• Browser IE11
• Time zone: GMT-07:00 DST (Pacific Daylight Time)

[MattStaudinger]

I now found a way to make this work. There were 2 things that I had to change:

1. I used the syntax dayjs.tz("2014-06-01 12:00", "America/New_York") which is using formatToParts under the hood. When I used dayjs("2014-06-01 12:00").tz("America/New_York") IE 11 doesn’t complain anymore.

2. After that change IE 11 then output Invalid Date for any kind of timezone. This had to do with an issue explained in here. I implemented the polyfill suggested there and it worked.

It obviously feels a little hacky, but solves the problem. So I think it would be good if the documentation was updated and going a little more into detail how timezones can be made to work in IE 11.

[javier-garcia-meteologica]

@MattStaudinger

I used the syntax dayjs.tz("2014-06-01 12:00", "America/New_York") which is using formatToParts under the hood. When I used dayjs("2014-06-01 12:00").tz("America/New_York") IE 11 doesn’t complain anymore

These expressions have different meanings and produce different results, they should not be used interchangeably.

$ dayjs.tz("2014-06-01 12:00", "America/New_York").toISOString();
"2014-06-01T16:00:00.000Z"
$ dayjs("2014-06-01 12:00").tz("America/New_York").toISOString();
"2014-06-01T09:00:00.000Z"

This comment https://github.com/formatjs/formatjs/issues/2529#issuecomment-767387923 explains how to polyfill Intl.DateTimeFormat properly.

import '@formatjs/intl-getcanonicallocales/polyfill';
import '@formatjs/intl-locale/polyfill';

import '@formatjs/intl-pluralrules/polyfill'
import '@formatjs/intl-pluralrules/locale-data/en' // locale-data for en

import '@formatjs/intl-numberformat/polyfill'
import '@formatjs/intl-numberformat/locale-data/en' // locale-data for en

import '@formatjs/intl-datetimeformat/polyfill'
import '@formatjs/intl-datetimeformat/locale-data/en' // locale-data for en
import '@formatjs/intl-datetimeformat/add-all-tz' // Add ALL tz data