Angular 如何在matDatepicker中转换窗体控件的历元格式

我有一个日期字段，其中保存了一个历元字符串。我想使用angular material date picker来更改日期，这可以通过以下方式进行转换：

//convert matDatepicker timestamp format to epoch and save
var newDOB = new Date(privateUser.date_of_birth).getTime().toString();
privateUser.date_of_birth = newDOB;

但是，在将其存储到数据库之前，当尝试在日期选择中显示它作为默认日期时，我不太确定如何恢复它

这是我目前的代码

<div *ngIf="(userPrivate$ | async) as userPrivate">
  <form (ngSubmit)="updateUser(user, userPrivate)">
    <mat-form-field >
      <input matInput type="text" [(ngModel)]="user.username" name="username" placeholder="Username">
    </mat-form-field >
    <mat-form-field >
      <input matInput [matDatepicker]="dp" placeholder="Date of Birth"   [(ngModel)]="userPrivate.date_of_birth" name="date_of_birth">
      <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
      <mat-datepicker #dp >
      </mat-datepicker>
    </mat-form-field>
  </form>
</div>

---

我该如何处理这个问题，以便我可以将日期输入显示为默认的出生日期值？

当您的日期选择器中的日期格式与您自己的数据结构不同时，通常有两种选择：1）以某种方式告诉日期选择器组件将其数据结构转换为您的数据结构，这通常是通过传递适配器类（2）来完成的，让datePicker将自己的数据格式传递给表单或模型，并且仅在发布表单或设置表单值时手动转换

使用适配器

实际上，material datepicker确实为您提供了提供适配器的可能性，其用法在

手动转换

手动转换时，您必须执行从数据结构到datepickers结构的转换，以设置初始值以及父组件更新表单值。每当你想保存表单中的数据时，你必须进行反向转换

因此，您不必以任何方式将转换方法添加到模板中，在submit方法中进行转换。 在您的示例中，绝对错误的是

[formControl]

需要的是角度表单控件，而不是值（本例中的日期本身）

就我个人而言，我会选择适配器解决方案，因为这样转换逻辑就不会分散，而是集中到特定的类，这也更容易测试

完全无关的音符

通常，尽量不要在值绑定中调用方法，例如

（为了简洁起见，省略了一些属性）

这些方法在每次更改检测时都会被调用（这可能非常频繁，特别是如果您不使用

ChangeDetectionStrategy.onPush

），因此每次更改检测时都会进行转换，即使源值没有更改

在这些绑定方法中很容易隐藏复杂的计算，这可能会大大降低应用程序的速度

相反，只在源值更改时进行计算，将结果存储在组件的字段中，并在模板中绑定该字段

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

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

getDate(date){
  // convert Epoch time to timestamp format
  var newDate= new Date(date).getTime();
  return newDate;
}