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

问题描述

我是 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)"
    />
    />

解决方法

在 .ts 中导入 DatePipe：

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');
}