使用date-fns的isWithinInterval结合用户时区时提示无效区间

问题根源 #

你报错的核心原因是：

• toLocaleString返回的是字符串类型，但isWithinInterval要求传入的必须是Date对象或合法时间戳，字符串会被判定为无效参数。
• 用formatInTimeZone格式化后再parseISO解析的方式，会丢失时区上下文，生成的Date对象并非你预期的用户时区时间，进一步导致区间参数不合法。

正确解决方案 #

1. 正确获取用户时区的当前时间（Date对象）

放弃toLocaleString转字符串的方式，直接用date-fns-tz的utcToZonedTime将当前UTC时间转换为用户时区的Date对象：

import { utcToZonedTime } from 'date-fns-tz';

// 获取当前UTC时间，转换为用户时区的Date对象
const nowUtc = new Date();
const nowInUsersTimezone = utcToZonedTime(nowUtc, user.timezone);

2. 转换API返回的UTC起止时间为用户时区Date对象

假设API返回的是UTC格式的时间字符串（比如startUtc、endUtc），直接用utcToZonedTime转换，不要做多余的格式化解析：

const startInUsersTimezone = utcToZonedTime(new Date(apiData.startUtc), user.timezone);
const endInUsersTimezone = utcToZonedTime(new Date(apiData.endUtc), user.timezone);

3. 调用isWithinInterval进行判断

现在所有参数都是合法的Date对象，直接传入即可：

import { isWithinInterval } from 'date-fns';

const isInRange = isWithinInterval(nowInUsersTimezone, {
  start: startInUsersTimezone,
  end: endInUsersTimezone
});

注意事项 #

• 确保已安装date-fns和date-fns-tz依赖（时区处理需要后者）。
• 永远不要给isWithinInterval传入字符串类型的时间参数，必须是Date对象或数值型时间戳。

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