使用FullCalendar+Date-FNS无法将本地时区转换为UTC时区

问题描述 #

我使用FullCalendar开发日历组件，点击日期后需向服务器请求当日可用时段。要求发送请求前将用户本地时区转换为UTC时区，服务端会校验请求时区。但使用Date-FNS工具转换后结果未发生变化，始终显示GMT+1时区。

尝试过的代码 #

参考建议后的写法 #

async handleDateClick(arg)
{
    console.log(arg.date)
    const parseDate = parseJSON(arg.date)
    const convertToUTCDate = zonedTimeToUtc(parseDate)
    console.log(convertToUTCDate)
},

之前的写法 #

async handleDateClick(arg)
{
    console.log(arg.date)
    const convertToUTCDate = zonedTimeToUtc(arg.date)
    console.log(convertToUTCDate)
},

控制台输出 #

两种写法的控制台输出均为：

Mon Sep 05 2022 00:00:00 GMT+0100 (British Summer Time)
Mon Sep 05 2022 00:00:00 GMT+0100 (British Summer Time)

解决方法 #

问题核心在于JavaScript的Date对象特性：它本质存储的是UTC时间戳，控制台显示的GMT+0100只是浏览器根据本地时区做的格式化展示，并非对象本身的时区属性。

错误原因 #

直接将Date对象传入zonedTimeToUtc时，工具会默认把该对象当作UTC时间处理，因此转换后结果和原对象的浏览器格式化展示一致，无法得到预期的UTC时区转换效果。

修正方案 #

方案1：用Date-FNS正确转换

需要传入本地时区的日期时间字符串，并明确指定本地时区标识符：

async handleDateClick(arg) {
  console.log(arg.date);
  // 将Date对象转成本地时区的字符串，指定本地时区（例如伦敦时区'Europe/London'）
  const convertToUTCDate = zonedTimeToUtc(arg.date.toLocaleString(), 'Europe/London');
  console.log(convertToUTCDate);
  // 生成后端可识别的UTC标准格式字符串
  const utcRequestStr = convertToUTCDate.toISOString();
  console.log(utcRequestStr); // 输出类似"2022-09-04T23:00:00.000Z"
}

方案2：直接生成UTC格式字符串（无需Date-FNS）

如果只是需要给后端发送UTC格式的时间，可直接调用Date对象的toISOString()方法，该方法会直接返回UTC标准格式的字符串：

async handleDateClick(arg) {
  // 直接生成UTC标准格式字符串
  const utcDateStr = arg.date.toISOString();
  console.log(utcDateStr); // 输出类似"2022-09-04T23:00:00.000Z"
  // 将此字符串作为请求参数发给后端即可
}

关键提示 #

• 若使用zonedTimeToUtc，必须确保第一个参数是带时区信息的字符串，或者明确传入本地时区标识符，否则无法正确转换。
• 后端接收时间时，推荐使用ISO格式的UTC字符串（如2022-09-04T23:00:00.000Z），这种格式无歧义，可被绝大多数后端框架直接解析。

内容的提问来源于stack exchange，提问作者DMantas