Angular/Ionic项目date pipe在iPhone/iOS格式化日期后显示NaN问题

问题根因 #

• iOS端所有浏览器共用WebKit内核，不支持YYYY-MM-DD HH:mm:ss格式的字符串作为Date构造函数/Angular date管道的入参，会被识别为无效日期，返回NaN
• 你已经通过formatAMPM方法将时间转为了类似3:45 PM的字符串，又在模板中对该字符串使用date管道，管道无法识别该格式，直接抛出错误

解决方案 #

方案1（推荐：全平台兼容） #

前端拿到后端返回的start_at字段后，手动解析为Date对象再存入列表，不要直接存原始字符串：

1. 新增通用日期解析方法，适配所有浏览器：

function parseCompatibleDate(dateStr: string): Date {
  const [datePart, timePart] = dateStr.split(' ');
  const [year, month, day] = datePart.split('-').map(Number);
  const [hour, minute, second] = timePart.split(':').map(Number);
  // JS月份从0开始计数，需要减1
  return new Date(year, month - 1, day, hour, minute, second);
}

2. 修改拉取列表的逻辑，用上面的方法处理日期：

userFrimes.forEach(uf => {
  const startDate = this.parseCompatibleDate(uf.start_at);
  if (!this.todoService.isFrimeExpired(startDate)) {
    this.todos.push({
      owner: this.userInfo.username,
      title: uf.title,
      message: uf.description,
      date: startDate, // 直接存Date对象
      max: uf.max,
      guests: uf.member.length,
      frime_id: uf.id,
      status: uf.status,
      user_id: uf.user_id
    });
  }
});

3. 简化模板代码，直接用Date对象调用date管道即可，不需要额外处理时间格式：

<ion-col size="3" class="date-wrapper">
  <h3 class="notification-date">
    {{ item.date | date: "shortDate" }}
  </h3>
  <h3 class="notification-date">
    {{ item.date | date: "HH:mm" }}
    <!-- 如果需要AM/PM格式，直接替换为 {{ item.date | date: "h:mm a" }} 即可，不需要自己写formatAMPM方法 -->
  </h3>
  <h3 class="notification-date">{{ item.guests + '/' + item.max }}</h3>
</ion-col>

方案2（轻量修改） #

如果不想改原有逻辑，也可以直接把原始日期字符串的空格替换为T，转为iOS支持的ISO格式：

const validDateStr = uf.start_at.replace(' ', 'T');
const startDate = new Date(validDateStr);

注意该方案需要确认你的时区是否匹配，避免出现日期偏移。

关于报错中的Re说明 #

这是Angular生产环境打包时对类名做的混淆压缩，Re就是DatePipe类压缩后的短名称，没有特殊含义，开发环境打包时会显示完整的类名。

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