API返回自定义日期对象，使用Angular DatePipe报错，如何转为指定格式？

我从API获取的日期数据格式如下：

"mydate":{"year":2023,"month":2,"day":1}

尝试在Angular模板中用DatePipe格式化：

<td>{{ mydate | date }}</td>

结果触发错误：

Unable to convert "[object Object]" into a date' for pipe 'DatePipe

想把日期显示为Jan 2, 2023格式，该怎么处理？

解决方法 #

方法一：组件内转换为Date对象 #

DatePipe仅支持处理Date实例、时间戳或合法日期字符串，所以先在组件中将对象转为Date类型（注意JavaScript的月份是0-11区间，需要将API返回的月份减1）：

// 组件.ts文件
formattedDate: Date;

ngOnInit() {
  // 假设this.mydate是API返回的日期对象
  this.formattedDate = new Date(this.mydate.year, this.mydate.month - 1, this.mydate.day);
}

模板中直接使用转换后的Date对象，指定格式MMM d, y：

<td>{{ formattedDate | date:'MMM d, y' }}</td>

方法二：自定义复用管道 #

如果多个页面或组件需要处理这种格式的日期，自定义管道会更高效：

// date-object.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({name: 'dateObject'})
export class DateObjectPipe implements PipeTransform {
  transform(dateObj: {year: number, month: number, day: number}, format: string = 'MMM d, y'): string {
    const date = new Date(dateObj.year, dateObj.month - 1, dateObj.day);
    return new DatePipe('en-US').transform(date, format) || '';
  }
}

在对应模块的declarations数组中声明该管道，之后模板中直接调用：

<td>{{ mydate | dateObject }}</td>
<!-- 也可自定义其他格式 -->
<td>{{ mydate | dateObject:'MMMM dd, yyyy' }}</td>

方法三：模板内直接构造（不推荐） #

虽然可以在模板中直接创建Date对象，但会增加模板逻辑复杂度，严格模式下可能报错，仅作参考：

<td>{{ new Date(mydate.year, mydate.month - 1, mydate.day) | date:'MMM d, y' }}</td>

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