时间戳

首页 > 解决方案 > 如何使用 JavaScript 显示国际虚拟会议程序的当地时间

javascript - 如何使用 JavaScript 显示国际虚拟会议程序的当地时间

问题描述

我必须为一个国际会议发布一个在线程序。我希望页面根据用户的时区显示它们，而不是仅仅根据我们的时区 (UTC+11) 显示每个事件的日期和时间。当页面加载时，它应该显示服务器认为用户的时区是什么，但让用户有机会使用下拉菜单覆盖它。

我设法让它工作：

<script>
function convertTZ(date, tzString) {
    return new Date((typeof date === "string" ? new Date(date) : date).toLocaleString("en-US", {timeZone: tzString}));   
}
</script>

<body onload = "document.getElementById('datetime').innerHTML = convertTZ('2021/01/09 11:00:00 +1100','Europe/Paris')">
<p id="datetime"></p>
</body>

但是如何获取用户的时区字符串并允许用户覆盖它呢？我还需要只提取没有时区信息的日期+时间（例如“GMT+1100（澳大利亚东部夏令时间）”），但希望我能自己解决。

（我是一个 JavaScript 初学者。）

任何帮助将不胜感激，特别是如果有人知道已经存在的东西，我可以适应。谢谢。

标签： javascripttimezone

解决方案

一些东西：

  • 您应该以 ISO 8601 格式指定事件的时间：2021-01-09T11:00:00+11:00.

    • 或者更准确地说，它应该采用ECMAScript Date Time String Format，以便所有实现都能清楚地理解它。
      2021-01-09T11:00:00+11:00两者都符合。 2021/01/09 11:00:00 +1100不兼容，因此会被认为是非标准的、特定于实现的，并且在某些浏览器中可能会失败。

  • 要使用用户的时区，请不要指定. 默认已经是用户的时区。timeZonetoLocaleString

  • 您也不应该提供区域设置 ( en-US)，因为默认情况下 的格式toLocaleString将使用用户的区域设置。如果您想提供其他选项，您可以传递undefined语言环境以保持用户的默认语言环境不变。

  • 您可能希望包含timeZoneName选项（或long或short）以在输出中显示人类可读的时区描述。这将使您的用户更清楚地了解所显示信息的上下文。

最后，您可能想要类似的东西：

function loadDateTime() {
  const eventTime = new Date("2021-01-09T11:00:00+11:00");
  const display = eventTime.toLocaleString(undefined, { timeZoneName: 'long' });
  document.getElementById('datetime').innerHTML = display;
}
<body onload="loadDateTime()">
  <p id="datetime"></p>
</body>

对我来说，它输出：1/8/2021, 4:00:00 PM Pacific Standard Time。根据您的语言环境和时区，您将获得不同的结果。

推荐阅读