angular - 如何在材料日期选择器中使用 Angular Date Pipe？

Question

我是 Angular 的新手，我想为我的日期选择器格式化我的输入值，但我不知道怎么做。我想做这样的事情：

    <mat-date-range-input [rangePicker]="picker">
    <input
      class="hide"
      matStartDate
      [value]="startDate | date: 'shortDate': '' "
      #dateRangeStart
      placeholder="Start date"
    />
    <input
      class="hide"
      matEndDate
      [value]="endDate | date: 'shortDate': '' "
      placeholder="End date"
      [max]="today"
      #dateRangeEnd
      (dateChange)="dateRangeChange(dateRangeStart, dateRangeEnd)"
    />
    />

Answer 1

DatePipe在 .ts 中导入：

import {DatePipe} from '@angular/common';

constructor(private datePipe: DatePipe) {}

在app.module.ts中，导入 DatePipe 并将其添加到providers：

providers: [DatePipe]

在 dateChange 函数中添加以下内容：

dateRangeChange (dateRangeStart, dateRangeEnd) {
    startDate = this.datePipe.transform(dateRangeStart, 'yyyy-MM-dd');
    endDate = this.datePipe.transform(dateRangeEnd, 'yyyy-MM-dd');
}