角材料日期选择器值格式答案

【问题标题】：Angular material datepicker value format角材料日期选择器值格式
【发布时间】：2019-04-08 13:30:40
【问题描述】：

我有一个这样的 Datepicker 输入：

<mat-form-field class="example-full-width">
    <input #startDate matInput [matDatepicker]="picker" (dateInput)="first($event.value)" placeholder="Enter date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

当输入改变时，first 函数接收$event.value 日期，格式如下：

2019 年 4 月 9 日星期二 00:00:00 GMT+0200

我需要这个（AAAA-MM-DD）：

2019-04-09

有没有什么方法可以改变 Datepicker 的输出值而不需要手动解析它？谢谢。

【问题讨论】：

您的意思是不使用 JavaScript Date 方法？不，我不这么认为。你可以在Angular Datepicker查看api

标签： angular input angular-material

【解决方案1】：

使用材料DatePicker，您可以选择MatNativeDateModule 或MatMomentDateModule 作为日期实现。在您的情况下，我建议您使用MatMomentDateModule，届时$event.value 将是一个Moment 对象，可以轻松转换为字符串。

这是我的解决方案

app.module.ts

@NgModule({
  imports: [
    ...,
    MatDatepickerModule,
    MatMomentDateModule
  ]

your.component.ts

<input #startDate matInput [matDatepicker]="picker" (dateInput)="first($event.value.format('YYYY-MM-D'))" placeholder="Enter date">

这是一个有效的StackBlitz。

【讨论】：

【解决方案2】：

你可以使用 DatePipe。

在您的组件中：

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

constructor(private datePipe : DatePipe)
{

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

您还必须在 app.module 中添加。

希望对你有帮助！

【讨论】：

1. Angular 已经有一个日期管道 2。即使您的解决方案符合他的要求，并且有效，您也没有向他展示如何使用该管道。 3.管道不适用于通过angular中的函数表达式从模板传递到组件的值

【解决方案3】：

例如创建自定义格式模板

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'YYYY',
  },
};

这将是您的格式，您必须将其导入组件提供程序中

import { MAT_DATE_FORMATS } from '@angular/material';

  //...

providers: [
   {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
 ],

希望对你有所帮助。

【讨论】：