使用date-fns解析HH:MM格式时间时报Invalid Date的原因是什么？

• 版本不兼容问题：这是最高发的原因。date-fns v1 和 v2 版本的parse方法参数签名存在不兼容变更：
  • v1 版本的parse签名为 parse(dateString, [formatString], [options])，第三个参数是解析配置对象，不支持传入基准日期补全缺失的年/月/日字段
  • v2 版本才将parse的签名调整为 parse(dateString, formatString, referenceDate, [options])，第三个参数为基准日期，用来填充格式串未指定的日期、秒、毫秒等部分
    如果你本地安装的是v1版本的date-fns，传入new Date()作为第三个参数会被方法误识别为配置对象，无法正常解析，最终返回Invalid Date。
• 时间字符串与格式串不匹配：如果待解析的时间字符串中包含全角冒号：、不可见特殊字符、多余空格，和HH:mm格式无法完全匹配，也会触发无效日期报错。

方案1（兼容所有版本，无额外依赖） #

直接手动处理时间字符串，修改当前日期的时分即可：

const timeStr = "23:00";
const [hours, minutes] = timeStr.split(":").map(Number);
const result = new Date();
// 统一设置时分秒毫秒，避免残留原有时间的秒和毫秒
result.setHours(hours, minutes, 0, 0);
console.debug(result);

方案2（date-fns v2 版本适用） #

先将本地的date-fns升级到v2及以上版本，再确认待解析的时间字符串使用半角冒号、无多余字符，原代码即可正常运行：

import parse from "date-fns/parse";
const a = parse("23:00", "HH:mm", new Date());
console.debug(a);

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