Angular中如何将字符串时间转为Date对象？解决Invalid date错误

这个问题我之前也踩过坑！原生的Date构造函数对仅包含时分和AM/PM的短时间字符串解析支持很差，不同浏览器甚至会有不同的表现，所以直接传"09:56 AM"会返回Invalid Date。下面给你几个靠谱的解决办法：

方法1：手动拼接完整日期字符串（零依赖） #

因为Date对象需要完整的日期时间信息才能正确解析，我们可以把当前日期（或者某个固定日期）和时间字符串拼接起来，构造一个标准的可解析字符串：

const time_t = "09:56 AM";
// 方案A：拼接当前日期，时间关联当天
const fullDateTime = `${new Date().toDateString()} ${time_t}`;
this.audit_time = new Date(fullDateTime);

// 方案B：拼接固定日期，适合不需要关联当前日期的场景
const fullDateTimeFixed = `2024-01-01 ${time_t}`;
this.audit_time = new Date(fullDateTimeFixed);

这样构造的字符串是浏览器能稳定解析的格式，不会出现兼容性问题。

方法2：提取时分并手动设置到Date对象（更灵活） #

通过正则表达式提取时间字符串里的小时、分钟和AM/PM标识，转换为24小时制后，手动设置到Date对象中：

const time_t = "09:56 AM";
const timeMatch = time_t.match(/(\d{2}):(\d{2}) (AM|PM)/);

if (timeMatch) {
  let hours = parseInt(timeMatch[1], 10);
  const minutes = parseInt(timeMatch[2], 10);
  const period = timeMatch[3];

  // 12小时制转24小时制逻辑
  if (period === 'PM' && hours !== 12) {
    hours += 12;
  }
  if (period === 'AM' && hours === 12) {
    hours = 0;
  }

  // 创建Date对象（默认使用当前日期）并设置时分秒
  this.audit_time = new Date();
  this.audit_time.setHours(hours, minutes, 0, 0);
}

这种方法能精确控制时间值，适合需要对日期或时间做自定义调整的场景。

方法3：使用第三方日期库（推荐，兼容性最佳） #

如果你的项目已经引入了轻量的日期库（比如date-fns，比moment.js更推荐，因为它支持tree-shaking，体积更小），可以用库的解析函数来处理：

// 先安装date-fns：npm install date-fns
import { parse } from 'date-fns';

const time_t = "09:56 AM";
// 第三个参数是解析时使用的基准日期，这里用当前日期
this.audit_time = parse(time_t, 'hh:mm a', new Date());

date-fns的parse函数支持明确的格式字符串，完全不用担心浏览器兼容性问题，代码也更简洁。

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