在react前端的特定时区启动事件



我正在做React,我必须为在特定时区的精确时间(比如2022/04/20 20:00:00巴黎时区(开始的事件倒计时。

日期存储在前面的常量中,如下所示:

event:{
start: new Date('2022-04-20T20:00:00'),
end: new Date('2022-04-23T00:00:00')
}

因为日期存储在前面,所以它将与用户的本地时区相对应
我不知道如何使日期保持在巴黎时区,无论用户时区是什么。
日期必须保持在日期类型,因为我在计时器中计算倒计时。我试图使用fns-tz包中的formatInTimeZone(日期,'Europe/Parise','yyyy-MM-dd HH:MM:ss-zz'(,但当我添加";zzz";最后,它返回一个无效的日期格式
此外,我注意到一些日期格式在移动浏览器上不受支持(因此倒计时没有在移动浏览器中显示(
如果我更改了"2022-04-20T19:00:00Z"的日期,这会是工作吗
我知道Z代表UTC,但在这种情况下它是UTC+0吗

我真的不适应时区,任何帮助都将不胜感激。

我试过了:

import { formatInTimeZone } from "date-fns-tz";
const start = new Date("2022-04-20T20:00:00");
const end = new Date("2022-04-23T00:00:00");
const startdate = formatInTimeZone(start,"Europe/Paris","yyyy-MM-dd HH:mm:ss");
const enddate = formatInTimeZone(end,"Europe/Paris","yyyy-MM-dd HH:mm:ss zzz");

export const dropDate = {
start: new Date(startdate),
end: new Date(enddate),
};

它似乎可以工作,但在移动浏览器上不起作用。日期格式无效。

如果将日期更改为'2022-04-20T19:00:00Z',则只会考虑GMT差异。就我而言,我的GMT是+0530(IST(。因此,它将在4月21日00:30:00的19:00:00上增加5小时30分钟。您可以使用dayjs库。

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import relativeTime from "dayjs/plugin/relativeTime";
import timezonePlugin from "dayjs/plugin/timezone";
dayjs.extend(utc);
dayjs.extend(relativeTime);
dayjs.extend(timezonePlugin);
event:{
start: dayjs("2022-04-20T23:30:00").tz('Europe/Paris'),//This will set the start time to 2022/04/20 20:00:00 Paris timezone
end: dayjs("2022-04-23T03:30:00").tz('Europe/Paris') // This will set the end time to 2022/04/23 00:00:00 Paris timezone.
}

最新更新