Угловой материал Datepicker с адаптером момента: настройка формата значения модели - PullRequest
Новая
       41

Угловой материал Datepicker с адаптером момента: настройка формата значения модели

0 голосов
/ 10 ноября 2019

У меня есть угловой инструмент DatePicker, использующий momentjs через 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. Как мне этого добиться?

...