Question

我有一些js可以将当地时间显示在英国的时区中。

var d = new Date(); // local system time (whatever timezone that is)
var dUK = new Date(d.toLocaleString('en-GB', { timeZone: 'Europe/London' })); // UK timezone (covers BST too)

在除IE 11（叹气...）之外的所有浏览器中都能正常工作，该浏览器会引发以下错误：

Option value 'EUROPE/LONDON' for 'timeZone' is outside of valid range. Expected: ['UTC']

有人有什么建议吗？有关支持IE的示例小提琴，请参见http://jsbin.com/dawaqocuvi/1/edit?html,js,console,output。

Answer 1

IE11在使用时区选项时对日期格式的支持有限，基本上唯一有效的选项是UTC。不太有用。

我可以考虑的两个选择。

使用momentjs，这是一个不错的日期时间库，但可能会过大
使用pollyfill

下面是一个片段，该片段是polyfill的语言环境时区，并创建了一个简单的世界时钟，其中包含几个时区。

如果您运行的是现代浏览器，则应该可以从一开始就删除脚本标签，它将继续起作用。

更新：现在可以在IE11中正常工作了，使用polyfill进行语言环境时，大小写很重要。例如。 Europe/Amsterdam很好，但是europe/amsterdam不好，Chrome似乎无关紧要。

//var d = new Date(); var dUK = d.toLocaleString('en-GB', { timeZone: 'America/Chicago' }); console.log(dUK);

function updateTimes() {
  var dt = new Date();
  var els = document.querySelectorAll("[data-tz]");
  for (var l = 0; l < els.length; l ++) {
    var d = els[l];
    d.innerText = dt.toLocaleString('en-GB', {timeZone: d.dataset.tz});
  }
}

updateTimes();
setInterval(updateTimes, 1000);

<script src="https://unpkg.com/date-time-format-timezone@latest/build/browserified/date-time-format-timezone-complete-min.js"></script>

<p>Simple world time clocks</p>

<div><span data-tz="Europe/London"></span>
  - London
</div>
<div>
  <span data-tz="Europe/Amsterdam"></span>
  - Amsterdam
</div>
<div>
  <span data-tz="America/Chicago"></span>
  - Chicago
</div>

Answer 2

是的，如上所述，IE 11支持大多数Intl API，但不支持使用特定的timeZone：http://kangax.github.io/compat-table/esintl/#test-DateTimeFormat_accepts_IANA_timezone_names

这里是一个示例，说明如何使用webpack的require.ensure仅填充Intl.DateTimeFormat函数的timeZone支持：

const fillIntlDateTimeFormatTimezone = () => new Promise((resolve) => {
    try {
        new Intl.DateTimeFormat('en', {
            timeZone: 'America/Los_Angeles',
            timeZoneName: 'long'
        }).format();
        return resolve();
    } catch (error) {
        require.ensure(['date-time-format-timezone'], (require) => {
            require('date-time-format-timezone');
            return resolve();
        }, 'DateTimeFormatTimezone');
    }
});

这仅应为不支持指定timeZone属性的浏览器加载polyfill，此时该属性只能为IE 11。

将时区设置为“欧洲/伦敦”时，IE 11抛出“'timeZone'超出有效范围”

2 个答案: