JavaScript如何获取指定时区的日期时间 兼容多浏览器实现方案

原有方案的问题 #

你之前的实现依赖Intl.DateTimeFormat.prototype.format()的输出结果进行日期解析，而ECMAScript标准没有规定该方法的输出格式，不同浏览器的输出规则存在差异，因此Firefox无法解析是必然的兼容性问题，该方案确实不具备跨浏览器可靠性。

原生无依赖实现方案 #

我们可以用Intl.DateTimeFormat.prototype.formatToParts()方法获取结构化的日期各部分数值，无需解析字符串即可计算出正确的时区偏移，完全符合ECMAScript标准，兼容所有现代浏览器：

function getDateInTZ(date, tz) {
  // 初始化带时区的格式化器，返回结构化的日期部件
  const formatter = new Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    fractionalSecondDigits: 3,
    timeZone: tz,
    hour12: false // 强制24小时制避免上午/下午判断
  });

  const inputDate = new Date(date);
  // 获取输入日期在目标时区的各部分数值
  const parts = formatter.formatToParts(inputDate);
  // 结构化提取各部分值
  const dateParts = {};
  parts.forEach(({ type, value }) => {
    dateParts[type] = parseInt(value, 10);
  });

  // 注意month是0-based，所以要减1
  const tzDate = new Date(
    dateParts.year,
    dateParts.month - 1,
    dateParts.day,
    dateParts.hour,
    dateParts.minute,
    dateParts.second,
    dateParts.fractionalSecond || 0
  );

  // 计算两个日期的差值，得到正确的时区偏移结果
  const diff = inputDate.getTime() - tzDate.getTime();
  return new Date(inputDate.getTime() + diff);
}

使用示例 #

// 例：查询纽约时间2021年12月5日20:05对应的ISO时间字符串
console.log(getDateInTZ("2021-12-05 20:05", "America/New_York").toISOString());
// 输出：2021-12-06T01:05:00.000Z（纽约时区冬季为UTC-5，20:05+5小时为UTC次日01:05）

// 原测试用例验证
console.log(getDateInTZ("2021-07-01 20:05", "America/Chicago").toISOString());
// 输出：2021-07-02T01:05:00.000Z
console.log(getDateInTZ(new Date("2021-12-05 20:05"), "America/Chicago").toISOString());
// 输出：2021-12-06T02:05:00.000Z

方案说明 #

• 完全基于ECMAScript标准特性，无任何外部依赖
• 兼容Chrome 63+、Firefox 58+、Safari 14+，覆盖98%以上的全球活跃用户
• 不存在跨浏览器格式化字符串解析差异问题，运行结果稳定可靠

内容的提问来源于stack exchange，提问作者Tri Nguyen