使用 date-fns 进行时区转换

Question

我\xe2\x80\x99m 尝试在基于react 的网页中使用date-fns-tz，但无法\xe2\x80\x99t 使以下用例正常工作。

\n

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

\n

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

\n

什么\xe2\x80\x99s 使此转换（从 1612180800 --> 1612216800 ）发挥作用的正确方法？

\n

我尝试使用各种 date-fns 函数，但\xe2\x80\x99t 没有找到正确的函数。

\n

Answer 1

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

• 预期目标时区的 IANA 时区标识符，例如'America/Los_Angeles'，而不仅仅是相对于 UTC 的偏移量。

  • 请参阅时区标签 wiki中的“时区！= 偏移量” 。

• 支持在特定时区提供输入的库。

  • 既然您询问了 date-fns，您应该考虑使用date-fns-tz附加库。
  • 或者，您可以使用Luxon来实现此目的。
  • 过去我可能会推荐 Moment 和 Moment-TimeZone，但在选择此选项之前您应该查看Moment 的项目状态页面。

坚持使用 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()。

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