Выбор даты коврика выбранная дата не совпадает

Question

Выбранная дата из средства выбора даты мата и ее значение в реактивной форме не совпадают.

ngOnInit() {
    this.findForm = this._fb.group({
      date: ['', Validators.required]
    });
}

И в шаблоне

<code><mat-form-field [formGroup]="findForm">
  <input matInput formControlName="date" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<pre>{{this.findForm.get('date').value |json }}

У меня есть полный рабочий код на стеке

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

Answer 1

Как уже упоминалось в комментариях, даты от MatDatePicker в формате UTC.Но вы можете преобразовать их в локальный формат, используя это:

formatDate() {
  var date = new Date(`${this.findForm.value.date} UTC`);
  return date.toString();
}

И в шаблоне:

<code><mat-form-field [formGroup]="findForm">
  <input matInput formControlName="date" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<pre>{{ formatDate() }}

Вот Образец StackBlitz для вашей ссылки.