主页 / coding / 问题 / 78861241
Accepted
Sharon
Asked: 2024-08-12 18:46:20 +0800 CST

如何使用 date-fns 以当地时间显示 UTC 时间？

  • 772

我知道以前有人问过这个问题，但是我无法处理时区等问题，所以无法理解。

我的 React 应用目前正在渲染日历，但我在处理时区问题时遇到了困难。事件的日期以 UTC 格式存储，我检索事件列表并渲染它们。我想以用户的本地时间显示每个事件的开始时间，但我无法让它工作。我也安装了date-fns-tz，但它似乎没有做任何不同的事情。

目前，对于每个事件，我都有一个startDateUTC，如下所示：2024-08-27T08:30:00.0000000。

如果我使用它来显示format(startDate, "HH:mm")我得到：（08:30正如预期的那样）。

然而，在我的时区（“欧洲/伦敦”），这个活动实际上将于 9.30（我的时间）开始，这就是我想要显示的。

我可以使用从浏览器获取时区const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;，但我不确定如何使用它来转换和显示时间。

我尝试使用 date-fns-tz 版本的格式：format(startDate, "HH:mm", { timeZone: "Europe/London" })但仍然得到 8:30。

我还尝试过toZonedTime：toZonedTime(startDate, "Europe/London")将 startDate 转换为Tue Aug 27 2024 08:30:00 GMT+0100 (British Summer Time)- 我不确定这是否是正确的时间（英国夏令时比 UTC 早 1 小时，因此是 UTC+1）。无论如何，当我将其打印出来时，它仍然显示为 8:30。

有人能帮助我吗？本质上，我的 UTC 开始日期是 8:30；但是，当活动开始时，我的手表将显示 9:30，所以我想要显示 9:30。

datetime

1 个回答

  1. Best Answer

    我的诀窍是将Date对象的时间向前或向后移动到您需要的时区，这相当于更改时区。

    您可以Date使用以下命令将对象转移到浏览器的时区：

    const convertToBrowserTimeZone = (utcDate) => {
    const browserTimeZoneOffsetMs = -60000 * (new Date()).getTimezoneOffset();
    return new Date(utcDate.getTime() + browserTimeZoneOffsetMs);
}

    然后按照浏览器的时区格式化 UTC 时间：

    format(convertToBrowserTimeZone(startDate), "HH:mm")
    • 1

相关问题