如何在 Angular 6 中将材料日期选择器日期值格式化为“MM-DD-YYY”格式？

Question

我正在尝试将以下日期格式化为 Angular 6 中的 MM-DD-YYYY 格式。我也查看了 SO 和其他网站上发布的更简单的问题，但我无法解决它。

我正在使用 Material Angular DatePicker组件。

日期选择器给我

Thu Oct 25 2018 00:00:00 GMT+0400 (Gulf Standard Time)

我想将其格式化为

MM-DD-YYYY

我的代码

<mat-form-field>
    <input matInput [min]="minDate" [matDatepicker]="date" [(ngModel)]="request.date | request.date: 'dd/MM/yyyy hh:mm a'" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
    <mat-datepicker #date></mat-datepicker>
</mat-form-field>

我也尝试过像下面这样的 DatePipe 模块，但没有任何效果

this.datePipe.transform(this.request.date,"MM-DD-YYYY")

Answer 1

您可以使用DatePipe根据您的要求格式化日期。

在 main.module.ts 中导入

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

并添加Datapipe到 Providers 数组中。

然后在相关组件中导入与

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

并在构造函数中

constructor(private datePipe : DatePipe)
{

}

并使用日期管道只需使用

this.datePipe.transform(your_date, 'MM-dd-yyyy');

看一看StackBlitz 示例，其中我以MM-dd-yyyy格式对日期值进行了处理。