使用 date-fns 进行时区转换

如何解决使用 date-fns 进行时区转换

我正在尝试在基于 React 的网页中使用 date-fns-tz，但无法使以下用例起作用。

我在表单中输入了一个日期，该表单应提交给以本地时区存储数据的后端。

GMT+2 时区的用户在 UI 中选择 2021 年 2 月 1 日 14:00，这与 1612180800 时间戳相关（因为 UI 是在 GMT+2 中打开的），但它最终应该在 GMT-8 的 14:00 发送到后端，这实际上是 1612216800 时间戳。

让这种转换（从 1612180800 --> 1612216800）起作用的正确方法是什么？

我尝试使用各种 date-fns 函数，但没有找到合适的。

解决方法

您可以使用“时刻”来转换时区。

1.用你的日期时间创建一个时刻，指定它表示为utc，使用moment.utc()

2.使用 moment.tz() 将其转换为您的时区

例如

moment.utc(t,'YYYY-MM-DD HH:mm:ss')
    .tz("America/Chicago")
    .format('l');

您需要做两件事才能使其正常工作：

预期目标时区的 IANA 时区标识符，例如 'America/Los_Angeles'，而不仅仅是与 UTC 的偏移量。
- 请参阅 the timezone tag wiki 中的“时区 != 偏移量”。
支持在特定时区提供输入的库。
- 既然您询问了 date-fns，您应该考虑使用 date-fns-tz 附加库。
- 或者，您可以为此使用 Luxon。
- 过去我可能推荐使用 Moment-TimeZone 的 Moment，但您应该在选择此选项之前查看 Moment's project status page。

坚持使用 date-fns 和 date-fns-tz，您提供的用例正是 zonedTimeToUtc 函数文档中描述的用例，我将在此处复制：

假设要求用户输入事件的日期/时间和时区。日期/时间选择器通常会在用户的本地时区中返回具有所选日期的 Date 实例，并且选择输入可能会提供实际的 IANA 时区名称。

为了有效地处理这些信息，有必要找到等效的 UTC 时间：

import { zonedTimeToUtc } from 'date-fns-tz'

const date = getDatePickerValue() // e.g. 2014-06-25 10:00:00 (picked in any time zone)
const timeZone = getTimeZoneValue() // e.g. America/Los_Angeles

const utcDate = zonedTimeToUtc(date,timeZone) // In June 10am in Los Angeles is 5pm UTC

postToServer(utcDate.toISOString(),timeZone) // post 2014-06-25T17:00:00.000Z,America/Los_Angeles

在您的情况下，唯一的变化是在最后而不是调用 utcDate.toISOString()，而是调用 utcDate.getTime()。

请注意，如果您打算以秒为单位传递时间戳，而不是 Date 对象提供的毫秒精度，您仍然需要除以 1000。