使用 date-fns 比较两个 UTC 日期

Question

我正在尝试将 UTC 格式的两个日期与 date-fns 进行比较，但我不明白。两个值看起来一样，但是isEquals()函数returns false 进行比较

下面代码的目的是搜索标记的时间表，并检查它们是否符合数组范围的时间，如果有兼容的时间表，则returns 将对象插入常量日期

import React, { useState, useEffect } from 'react';
import { utcToZonedTime } from 'date-fns-tz';
import {
  format,
  setHours,
  setMinutes,
  setSeconds,
  isBefore,
  isEqual,
  parseISO,
} from 'date-fns';
import enUS from 'date-fns/locale/en-US';

import api from '~/services/api';

const range = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

export default function Dashboard() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    async function loadSchedule() {
      const response = await api.get('schedule', {
        params: { date },
      });

      const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

      const data = range.map((hour) => {
        const checkDate = setSeconds(setMinutes(setHours(date, hour), 0), 0);
        const compareDate = utcToZonedTime(checkDate, timezone);

        return {
          time: `${hour}:00h`,
          past: isBefore(compareDate, new Date()),
          appointment: response.data.find((appoint) =>
            isEqual(parseISO(appoint.date), compareDate)
          ),
        };
      });

      setSchedule(data);
    }

    loadSchedule();
  }, [date]);

}

我编写了一个测试代码来在 Reactotron 上打印结果，下面是打印值：

console.tron.log(`${isEqual(parseISO(response.data[1].date), 
                   compareDate)}\n
                   ${parseISO(response.data[1].date)}\n${compareDate}`);

结果：

false
Wed Jun 10 2020 19:00:00 GMT-0300 (Brasilia Standard Time)
Wed Jun 10 2020 19:00:00 GMT-0300 (Brasilia Standard Time)

每个日期的实际值：

console.tron.log(`${response.data[1].date}\n${compareDate}`);

2020-06-10T22:00:00.000Z
Wed Jun 10 2020 20:00:00 GMT-0300 (Brasilia Standard Time)

但是如果我只打印 compareDate 变量的值，它会改变格式：

console.tron.log(compareDate);

2020-06-10T21:00:00.002Z

Answer 1

date-fns 的 isEqual() 函数也考虑了毫秒值，正如评论中所质疑的那样。

此信息也可以在 date-fns isEqual() docs 上找到，例如：

// Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal?

var result = isEqual(
  new Date(2014, 6, 2, 6, 30, 45, 0),
  new Date(2014, 6, 2, 6, 30, 45, 500)
)
// it returns false`

您应该从 date-fns 导入 setMilliseconds() 并在设置 checkDate 值的行中使用它。

使用 date-fns 比较两个 UTC 日期

Compare two UTC dates with date-fns

javascript

react-native

date

timezone

date-fns