Как отобразить измененную дату в датпикере материала

У меня есть этот календарь, в котором я хочу отображать значение по умолчанию для ранее введенной пользователем даты. Однако он не отображает никакого значения, когда я пытаюсь изменить дату. Новую дату все еще можно сохранить, поэтому мне любопытно, как исправить отображение при изменении данных.

Вот код для справки

<mat-form-field>
  <input matInput [matDatepicker]="dp" placeholder="Date of Birth: No change Display" [formControl]="getDate(userPrivate.date_of_birth)" [(ngModel)]="userPrivate.date_of_birth">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp >
  </mat-datepicker>
</mat-form-field>

и на моем .ts

getDate(x){
  // convert Epoch time to formcontrol
  var date = new FormControl(new Date(parseInt(x)));
  // return newDate;
  return date;
  }

angular angular-material mat-datepicker
person Monomoni    schedule 03.10.2019    source источник
comment
исправьте элемент управления формой, почему вы используете ngModel с formControl?   -  person Robert    schedule 03.10.2019
comment
Это потому, что я все еще новичок в angular и впервые пробую реактивную форму, используя руководство из material.angular.io/components/datepicker/overview и добавил мою собственную модель ngModel для получения значения данных. Посмотрим на patchvalue   -  person Monomoni    schedule 03.10.2019

Ответы (1)


arrow_upward
0
arrow_downward

Это то, что я делал, когда работал с mat-datepicker

<input matInput [matDatepicker]="dp" placeholder="Choose a date" [formControl]="dateForm" (click)="dp.open()"
        (dateChange)="dateChange($event)" #dateInput>
    <mat-datepicker #dp></mat-datepicker>

В .ts я использую библиотеку moment, чтобы установить дату в элементе управления формой.

this.dateForm.setValue(moment(previous_input_date, date_format));
person Chandra Kanth    schedule 03.10.2019
comment
Это хороший совет. В приведенном выше примере я использую привязку события к событию (dateChange) в соответствии с документацией по материалам material.angular.io/components/datepicker/api - person Chandra Kanth; 04.10.2019
comment
Теперь, когда я внимательно посмотрел, вы совершенно правы. - person Robert; 04.10.2019