ie11下Intl.DateTimeFormat方法timeZone属性的兼容性问题

问题描述

使用intlFormatToParts方法以东八区显示当前时间。
ie11报错：选项值“ASIA/SHANGHAI”(对于“timeZone”)超出了有效范围。应为: ['UTC']

static intlFormatToParts(date: Date): string {
       const dateTimeFormat = new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: 'numeric', hour12: false,timeZone: 'Asia/Shanghai'});
       return dateTimeFormat.format(date);
   }

timeZone兼容性

timezone兼容性.png

来源：http://kangax.github.io/compat-table/esintl/#test-DateTimeFormat_accepts_IANA_timezone_names

解决方案

1、使用momentjs，但是momentjs文件太大。
2、使用date-time-format-timezone，date-time-format-timezone全部加载的话，整体文件比momentjs文件还要大，只能ie11下实现单个文件加载（来源：https://www.npmjs.com/package/date-time-format-timezone）。使用此解决方案。

核心代码

按序加载js方法：

 function loadScript() {
            var scriptArr = Array.prototype.slice.apply(arguments);
            var script = document.createElement('script');
            script.type = 'text/javascript';

            var rest = scriptArr.slice(1);

            if (rest.length > 0) {
                script.onload = script.onreadystatechange = function() {
                    if (!this.readyState || this.readyState === "loaded" ||
                        this.readyState === "complete") {
                        loadScript.apply(null, rest);
                        // 兼容ie
                        script.onload = script.onreadystatechange = null;
                    }
                };
            }

            script.src = scriptArr[0];
            document.body.appendChild(script);
        }

按序加载所需js

 let ua = navigator.userAgent.toLowerCase();
            let geckos = ua.match(/rv:([\d.]+)\) like gecko/);
            let msies = ua.match(/msie ([\d.]+)/);
            let downTimezone = false;
            if (geckos) { //ie
                downTimezone = true;
            }
            if (msies) { //ie
                let msieVersion = msies[1].split('.');
                if (parseInt(msieVersion[0]) >= 11) {
                    downTimezone = true;
                }
            }
            if (!/windows|win32/i.test(navigator.userAgent)) { //非win
                downTimezone = false;
            }
            if (downTimezone) {
                loadScript('%PUBLIC_URL%/date-time-format-timezone-no-data-min.js', 
'%PUBLIC_URL%/locale-en-US-POSIX.js', '%PUBLIC_URL%/metazone.js',
 '%PUBLIC_URL%/tzdata-asia-chongqing.js');
            }

Tips

1、为什么使用Asia/Shanghai

.......
Zone NAME STDOFF RULES FORMAT [UNTIL]
Beijing time, used throughout China; represented by Shanghai.
Zone Asia/Shanghai
........
Xinjiang time, used by many in western China; represented by Ürümqi / Ürümchi
/ Wulumuqi. (Please use Asia/Shanghai if you prefer Beijing time.)
Zone Asia/Urumqi
.......
来源：https://www.iana.org/time-zones

2、为什么使用tzdata-asia-chongqing.js

shanghai.png

参考

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

https://stackoverflow.com/questions/54364061/ie-11-throwing-timezone-is-outside-of-valid-range-when-setting-timezone-to