带有 Moment Adapter 的 Angular Material Datepicker：设置模型值的格式

Question

我有一个 Angular Material Datepickermomentjs通过MomentDateAdapter. 我想将模型接收的值格式化为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)". 这MatDatepickerInput通过$event.target. 的$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。我怎样才能做到这一点？

Answer 1

我只是将display.dateInput它设置为我想要的任何东西并且它起作用了-

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

Answer 2

有点 hackish，但是将以下内容添加到<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')"
>