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

Question

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

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

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`

您应该从

setMilliseconds()

导入

date-fns

并在设置

checkDate

值的行中使用它。

Answer 2

您可以在不使用 date-fns 的情况下比较两个日期，如下所示：

const areDatesEqual = (d1, d2) => {
  return new Date(d1).valueOf() === new Date(d2).valueOf();
}

console.log(areDatesEqual(Date(), Date())); // true
console.log(areDatesEqual(new Date('01/01/2020'), new Date('01/01/2020'))); // true
console.log(areDatesEqual(new Date('01/01/2020'), new Date('01/02/2020'))); // false

此方法适用于日期对象和日期字符串。您可能需要为 d1 和 d2 参数添加额外的验证，但这应该为您提供一个良好的起点。

通常，您可以使用关系运算符（如< and >）来比较日期。但是，对日期对象使用 === 不会按预期工作，因为它检查引用相等性而不是值相等性。