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

【问题标题】：How to format material datepicker date value to "MM-DD-YYY" format in Angular 6?如何在Angular 6中将材料日期选择器日期值格式化为“MM-DD-YYYY”格式？
【发布时间】：2018-10-24 14:59:08
【问题描述】：

我正在尝试在 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")

【问题讨论】：

是MM-DD-YYYY格式还是ts显示？
@PrashantPimpale 谢谢我需要输出值在 MM-DD-YYYY 中才能将值发送到后端
你搜索过datepipe吗？
@PrashantPimpale 我试过了，但在我的情况下没有任何效果
错别字 --> this.datePipe.transform(this.request.date,"MM-dd-yyyy")

标签： javascript angular angular6

【解决方案1】：

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

在 main.module.ts 中导入

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

并在 Providers 数组中添加Datapipe。

然后在相关组件中导入同理

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

在构造函数中

constructor(private datePipe : DatePipe)
{

}

要使用日期管道，只需使用

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

查看StackBlitz Example，我在其中以MM-dd-yyyy 格式调整了日期值。

【讨论】：

这个有效，但我必须设置格式 this.datePipe.transform(this.request.date, "MM-dd-yyyy")

【解决方案2】：

使用 angular common 中的 dateformat 函数。

参考this答案

【讨论】：

【解决方案3】：

在你使用 mat-datepicker 的组件中试试这个

从“@angular/material”导入 { DateAdapter }；

构造函数（私有 dateAdapter：DateAdapter）{ this.dateAdapter.setLocale('你的语言环境'); }

【讨论】：

【解决方案4】：

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

formatDate(date, 'MMM, yyyy', 'en-US');

角度 9

【讨论】：