使用 date-fns 进行时区转换

Question

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

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

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

使此转换（从 1612180800 --> 1612216800）生效的正确方法是什么？

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

Answer 1

您可以使用'moment'转换时区。

1.Create 日期时间的片刻，指定这表示为 utc，moment.utc()

2.convert 到你的时区 moment.tz()

例如

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

Answer 2

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

预期目标时区的 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 函数文档中描述的用例，我将在此处复制：

Say a user is asked to input the date/time and time zone of an event. A date/time picker will typically return a Date instance with the chosen date, in the user's local time zone, and a select input might provide the actual IANA time zone name.

In order to work with this info effectively it is necessary to find the equivalent UTC time:
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。

使用 date-fns 进行时区转换

timezone conversion using date-fns

reactjs

timezone

date-fns