使用date-fns计算日期差值返回NaN，该如何解决？

你的问题出在传入differenceInCalendarDays的参数不是有效的Date对象，而是getCurrentDate返回的本地化格式化字符串（比如类似"12 октября 2024 г., 14:35:23"的格式）。date-fns的日期计算方法要求参数必须是Date对象，无法直接解析这种非ISO标准的本地化字符串，因此计算时返回NaN。

解决方案1：解析本地化字符串为Date对象 #

如果必须传入格式化后的字符串，需要用parse方法结合对应格式和俄语区域设置，把字符串转为Date对象后再计算：

import { parse, differenceInCalendarDays, format } from "date-fns";
import { ru } from 'date-fns/locale';

export function getCurrentDate() {
  const date = new Date();
  const pattern = `PPp`;
  return format(date, pattern, {locale: ru});
}

export function getDifferenceDate(startDateStr, endDateStr) {
  const pattern = 'PPp'; // 和getCurrentDate使用的格式保持一致
  // 解析字符串为Date对象
  const start = parse(startDateStr, pattern, new Date(), { locale: ru });
  const end = parse(endDateStr, pattern, new Date(), { locale: ru });

  // 校验解析结果，避免无效日期
  if (isNaN(start.getTime()) || isNaN(end.getTime())) {
    throw new Error('传入的日期格式不符合要求，请使用PPp格式的俄语日期字符串');
  }

  return differenceInCalendarDays(start, end);
}

解决方案2：直接传递Date对象（更推荐） #

避免先格式化再解析的额外开销，在需要计算差值时直接传递Date对象，仅在需要展示日期时执行格式化：

import { format, differenceInCalendarDays } from "date-fns";
import { ru } from 'date-fns/locale';

// 返回原始Date对象，而非格式化字符串
export function getCurrentDate() {
  return new Date();
}

// 单独封装格式化方法
export function formatDate(date) {
  const pattern = `PPp`;
  return format(date, pattern, {locale: ru});
}

export function getDifferenceDate(startDate, endDate) {
  // 直接使用Date对象计算
  return differenceInCalendarDays(startDate, endDate);
}

// 使用示例
const currentDate = getCurrentDate();
console.log('格式化后的日期:', formatDate(currentDate));
const diff = getDifferenceDate(currentDate, new Date('2024-12-31'));
console.log('日期差:', diff);

排查要点 #

• 查看console.log(start, end)的输出，如果是字符串而非Date对象，那就是参数类型错误导致的问题。
• 确保解析时使用的格式字符串（如PPp）和传入的日期字符串格式完全匹配，否则parse会返回Invalid Date，进而导致计算结果为NaN。

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