如何设置DatePipe的输入格式

Question

我只想显示月份和年份，即 09/24。

现在，我收到了过去 3 个月通过 API 生成的账单列表，其中账单日期格式为 'dd-mm-yyyy'。

billDataList = [
                 {'id' = 101, 'bill_date': '17-08-2024'},
                 {'id' = 102, 'bill_date': '02-08-2024'},
                 {'id' = 103, 'bill_date': '26-09-2024'}  
               ]

在html模板中，列表循环显示id和日期

<ng-container *ngFor="let bill of billDataList>
   <div class="bill-row-small">
      <span>{{bill['id']: {{bill['bill_date'] | date:'MM/yy'}}</span>
   </div>
</ng-container>

但它抛出错误：

InvalidPipeArgument：“无法将管道“DatePipe”的“28-09-2024”转换为日期

这可能是因为默认情况下 DatePipe 采用格式为 'medium' 即 'MMM d, y, h:mm:ss a'。

如何设置日期输入格式为'dd-mm-yyyy'

Answer 1

Angular 的

DatePipe

需要一个

Date

对象、一个数字（自 UTC 纪元以来的毫秒数）或 ISO 字符串作为输入，这就是像

"28-09-2024"

这样的输入会导致错误的原因。这是为了避免歧义，例如，

02-08-2024

可能表示 8 月 2 日或 2 月 8 日。您可以使用

自定义管道

将日期字符串转换为 Date 对象，然后再将其传递到日期管道：

@Pipe({
  name: 'stringToDate',
  standalone: true,
})
export class StringToDatePipe implements PipeTransform {
  transform(value: string): Date {
    const [day, month, year] = value.split('-');
    return new Date(year, month - 1, day);
  }
}

并像下面这样使用它：

<span>{{bill['id']: {{bill['bill_date'] | stringToDate | date:'MM/yy'}}</span>