Dayjs跨时区时间范围校验问题：GMT-4客户端与UTC服务端适配

原代码的核心问题是时区不统一：客户端的时段参数（startTime/endTime）基于GMT-4本地时区，代码直接提取本地时分；但服务端的时间（item.generatedAt）是UTC时区，代码提取UTC时分，两者时区不一致导致跨时区的时段判断完全失效。此外原代码未处理时段跨天的场景，进一步加剧判断错误。

以下是两种基于Dayjs的修正方案，核心思路是统一所有时间的时区后再做校验：

方案一：将客户端时段转换为UTC时区，与服务端UTC时间比较 #

先安装并引入Dayjs的时区插件：

import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';

dayjs.extend(utc);
dayjs.extend(timezone);

然后修改校验逻辑，把客户端本地时段转成UTC时区的时分，同时处理跨天情况：

// 客户端本地时区ID（用ID比固定GMT-4更准确，自动适配夏令时）
const clientTimezone = 'America/New_York';

// 把客户端选择的本地时段转换为UTC时区的时间，提取时分
const utcStart = dayjs(startTime).tz(clientTimezone).utc();
const utcStartHour = utcStart.hour();
const utcStartMinute = utcStart.minute();

const utcEnd = dayjs(endTime).tz(clientTimezone).utc();
const utcEndHour = utcEnd.hour();
const utcEndMinute = utcEnd.minute();

// 判断UTC时区下时段是否跨天
const isUtcCrossDay = utcEnd.isBefore(utcStart);

filteredData = data.filter(item => {
    // 服务端unix时间转UTC时区，提取时分
    const utcTime = dayjs.unix(item.generatedAt).utc();
    const hour = utcTime.hour();
    const minute = utcTime.minute();

    if (isUtcCrossDay) {
        // 跨天场景：时间 >= UTC起始时分 或 <= UTC结束时分
        const afterStart = hour > utcStartHour || (hour === utcStartHour && minute >= utcStartMinute);
        const beforeEnd = hour < utcEndHour || (hour === utcEndHour && minute <= utcEndMinute);
        return afterStart || beforeEnd;
    } else {
        // 非跨天场景：时间在UTC起始和结束时分之间
        const afterStart = hour > utcStartHour || (hour === utcStartHour && minute >= utcStartMinute);
        const beforeEnd = hour < utcEndHour || (hour === utcEndHour && minute <= utcEndMinute);
        return afterStart && beforeEnd;
    }
});

方案二：将服务端UTC时间转换为客户端本地时区，与本地时段比较 #

这个方案更贴近原代码逻辑，只需把服务端时间转成客户端本地时区即可：

import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';

dayjs.extend(utc);
dayjs.extend(timezone);

const clientTimezone = 'America/New_York';

// 直接提取客户端本地时段的时分
const startHour = dayjs(startTime).hour();
const startMinute = dayjs(startTime).minute();
const endHour = dayjs(endTime).hour();
const endMinute = dayjs(endTime).minute();

// 判断本地时区下时段是否跨天
const isLocalCrossDay = dayjs(endTime).isBefore(dayjs(startTime));

filteredData = data.filter(item => {
    // 服务端unix时间转客户端本地时区，提取时分
    const localTime = dayjs.unix(item.generatedAt).utc().tz(clientTimezone);
    const hour = localTime.hour();
    const minute = localTime.minute();

    if (isLocalCrossDay) {
        const afterStart = hour > startHour || (hour === startHour && minute >= startMinute);
        const beforeEnd = hour < endHour || (hour === endHour && minute <= endMinute);
        return afterStart || beforeEnd;
    } else {
        const afterStart = hour > startHour || (hour === startHour && minute >= startMinute);
        const beforeEnd = hour < endHour || (hour === endHour && minute <= endMinute);
        return afterStart && beforeEnd;
    }
});

关键说明 #

• 必须使用Dayjs的timezone和utc插件处理时区转换，避免手动计算偏移导致的夏令时错误。
• 优先使用时区ID（如America/New_York）而非固定偏移量（如GMT-4），因为部分时区会随夏令时调整偏移。
• 新增跨天判断逻辑，解决客户端选择跨天时段（如22:00到次日02:00）时的校验失效问题。

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