Angular Datepicker更改日期格式

Posted 2023-03-13

【中文标题】Angular Datepicker更改日期格式

【英文标题】：Angular Datepicker change dateformat

【发布时间】：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 的日期管道。
import DatePipe from '@angular/common'; new DatePipe('en').transform(this.datepicker.value, 'yyyy/MM/dd');
使用dateformat（它改变了Date对象的原型，增加了一个format方法） 使用date-fns 使用moment.js（矫枉过正，对于这么小的用途来说超级重）

【讨论】：

如何在 .ts 文件中做到这一点？

对于：“我如何在 .ts 文件中执行此操作？”见：angular.io/api/common/formatDate

我个人会在推荐中添加date-fns.org/v1.29.0/docs/format

【参考方案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);