Angular中使用date-fns处理无时间Date类型日期报错的解决方法

1. 解析报错的原因与修复 #

你的代码报错核心原因是格式不匹配：

• givenDate.toDateString() 返回的是英文星期缩写+月份缩写+日期+年份的字符串（比如 Thu Nov 19 2026）
• 但你传给parse的格式参数是'yyyy-MM-dd'，两者完全不对应，导致解析失败返回Invalid Date。

推荐修复方案 #

不需要用parse，直接用date-fns的startOfDay方法，它能直接将给定Date的时间部分重置为当天的00:00:00：

import { startOfDay } from 'date-fns';

// givenDate 是你原有的Date对象
const dateWithoutTime = startOfDay(givenDate);
console.log('date without time', dateWithoutTime);

若一定要用parse的方式 #

需要将格式参数改成和toDateString()输出匹配的格式：

import { parse } from 'date-fns';

// 格式对应英文星期缩写(EEE)、月份缩写(MMM)、日期(dd)、年份(yyyy)
const dateWithoutTime = parse(givenDate.toDateString(), 'EEE MMM dd yyyy', new Date());
console.log('date without time', dateWithoutTime);

不过这种方式属于绕路操作，推荐用startOfDay更高效简洁。

2. 关于“无时间的Date类型” #

JavaScript里不存在真正无时间的Date类型，Date对象本质是一个时间戳（记录从1970-01-01 UTC开始的毫秒数），必然包含时间信息。

我们能实现的是将Date的时间部分设置为当天的00:00:00（如上面用startOfDay得到的结果），这样在业务场景中可以忽略时间部分，达到类似“只保留日期”的效果。

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