Angular Material Datepicker with Moment Adapter：设置模型值的格式答案

【问题标题】：Angular Material Datepicker with Moment Adapter: Setting the format of the model valueAngular Material Datepicker with Moment Adapter：设置模型值的格式
【发布时间】：2020-03-06 03:05:30
【问题描述】：

我有一个通过MomentDateAdapter 使用momentjs 的Angular Material Datepicker。我想将模型接收到的值格式化为YYYY-MM-DD。目前模型中的值为2019-11-09T05:00:00.000Z。

我在表单控件中使用自定义日期格式，使用MAT_DATE_FORMATS 来显示详细日期，例如November 9, 2019。但是，这不会影响模型获得的价值。

这是设置表单控件格式的代码。我没有看到任何设置模型值格式的选项。

const VERBOSE_DATE_FORMAT = {
  parse: {
    dateInput: ['LL', 'YYYY-MM-DD' ],
  },
  display: {
    dateInput: 'LL',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
}


@Component({
  ...
  providers: [
      {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
      {provide: MAT_DATE_FORMATS, useValue: VERBOSE_DATE_FORMAT},
    ]
})
...

我尝试使用(dateInput)="onDateChange($event)"。通过$event.target 暴露MatDatepickerInput 组件。 $event.target.value 是一个 Moment 对象。我尝试使用$event.target.value = $event.target.value.format('YYYY-MM-DD') 设置该值，但这并不影响模型。

<mat-form-field>
    <input matInput [matDatepicker]="date"
        placeholder="Date"
        #date="ngModel"
        [(ngModel)]="item.date"
        name="date"
        autocomplete="off" 
        (dateInput)="onDateChange($event)"
    >
    <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
    <mat-datepicker #date>
    </mat-datepicker>
</mat-form-field>


onDateChange( $event ) {
    const formatted = $event.value.format('YYYY-MM-DD')
    $event.target.value = formatted
}

我希望 item.date 成为 2019-11-09。我怎样才能做到这一点？

【问题讨论】：

标签： angular date angular-material momentjs

【解决方案1】：

我只是将display.dateInput 设置为我想要的任何值，它就起作用了 --

providers: [
        {
            provide: MAT_DATE_FORMATS,
            useValue: {
                display: {
                    dateInput: 'YYYY-MM-DD',
                },
            },
        },

【讨论】：

你能解释一下这段代码属于哪里吗？
这是 Angular 模块的 providers 部分（例如 app.module.ts）

【解决方案2】：

有点骇人听闻，但将以下内容添加到 <input> 指令会产生所需的结果：

(dateInput)="item.date = $event.value.format('YYYY-MM-DD')"

这看起来像：

<input matInput 
    name="date"
    placeholder="Date"
    #date="ngModel"
    [(ngModel)]="item.date"
    [matDatepicker]="date"
    (dateInput)="item.date = $event.value.format('YYYY-MM-DD')"
>

【讨论】：