Angular Datepicker更改日期格式答案

【问题标题】：Angular Datepicker change dateformatAngular Datepicker更改日期格式
【发布时间】：2019-04-07 01:25:57
【问题描述】：

我使用来自 Angular Material 的 DatePicker，我想将输出格式更改为 yyyy/mm/dd。

目前它以以下格式打印日期：Wed Nov 14 2018 00:00:00 GMT+0100 (Central European Normal Time)

我该怎么做？

datepicker = new FormControl('', [Validators.required]);


console.log(this.datepicker.value.toString());

【问题讨论】：

您可以在模板中使用 DatePipe 以所需格式显示日期，更多信息请参阅angular.io/api/common/DatePipe
datepicker 值是一个 Date 对象，Date 对象上的“to string”方法以该格式打印。如果您希望格式不同，那么原因很重要。如果你想在屏幕上打印，那么上面提到的日期管道是正确的方法，否则你可能需要别的东西。

【解决方案1】：

DatePicker 适用于日期对象。当您在调试控制台上打印时，您将始终以完整模式看到日期。如果您希望您的组件以特定格式显示日期，则需要在模块上配置库。

@NgModule({
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
  ],
})
export class MyApp {}

更多信息请访问official documentation。希望对你有帮助。

【讨论】：

【解决方案2】：

要仅格式化变量的输出，您应该使用pipes。

可以在docs 上找到数据管道。

基本上，在您的component.html 上，您必须这样做：

<p>The date is {{ datepicker.value | date:'yyyy/MM/dd' }}</p>

这将显示格式为yyyy/mm/dd 的datapicker.value。您还有很多其他选项可以根据管道格式化输出，甚至创建自己的输出。

要格式化 .ts 文件中的日期，您有几个选择。

使用来自 Angular 的日期管道。
1. import { DatePipe } from '@angular/common';
2. new DatePipe('en').transform(this.datepicker.value, 'yyyy/MM/dd');
使用dateformat（它改变了Date对象的原型，增加了一个format方法）
使用date-fns
使用moment.js（矫枉过正，对于这么小的用途来说超级重）

【讨论】：

【解决方案3】：

您可以使用Moment.js 将您的日期格式化为“YYYY/MM/DD”格式

moment(this.datepicker.value).format('YYYY/MM/DD')

使用时刻将帮助我们将日期更改为不同的格式

【讨论】：

【解决方案4】：

首先，

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

那么，

let val = this.dynamicForm.get('datePicker').value;
val = formatDate(val,'yyyy/MM/dd','en');
this.dynamicForm.controls['datePicker'].setValue(val);

【讨论】：