问题描述
使用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兼容性
来源：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
