垫日期选择器选择的日期不匹配

Question

从 mat 日期选择器中选择的日期与其在反应形式中的值不匹配。

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

在模板中，

<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 }}</pre>

我在 stackblitz 上有完整的工作 code

选择一个日期，您会看到所选日期和它在反应形式中的值不一样。

Answer 1

如 cmets 中所述，来自 MatDatePicker 的日期采用 UTC 格式。但是您可以使用以下方法将它们转换为本地格式：

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

在模板中：

<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() }}</pre>

这里有一个Sample StackBlitz 供您参考。