如何格式化角垫日期选择器值

Question

我在我的表单中使用 mat 日期选择器并将值保存到我的数据库中。该值以这种格式保存：2019-08-22T23:00:00。我正在从数据库中取回这些值并使用 ngModel 将它们绑定到表单输入，但我在将日期绑定到 mat 日期选择器时遇到问题。

这是我的 HTML：

<mat-form-field>
   <input matInput [matDatepicker]="picker" placeholder="Date of birth" 
   [ngModel]="user.dob | date " name='dob'>
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

我将上面的值发送到 mysql 数据库。我注意到，当我选择像 2019 年 8 月 23 日这样的日期时，它会以这种格式 2019-08-22T23:00:00 返回 22 日。当我从数据库中取回数据并尝试将其绑定到上面的日期类型输入字段时，它没有绑定。如何使日期选择器返回选定的日期，以及如何以dd-mm-yy 的格式将日期绑定到它。谢谢。

Answer 1

最简单的方法是使用表单控件。这可以绑定到value 字段或formControl 字段，即：

@Component({
  selector: 'datepicker-value-example',
  templateUrl: 'datepicker-value-example.html',
  styleUrls: ['datepicker-value-example.css'],
})
export class DatepickerValueExample {
  date = new FormControl('2019-08-22T23:00:00');
}

AppComponent.ts

<mat-form-field>
  <input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input matInput [matDatepicker]="picker3" placeholder="Value binding" [value]="date.value">
  <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
  <mat-datepicker #picker3></mat-datepicker>
</mat-form-field>

AppComponent.html

你可以在这里看到一个有效的闪电战：https://stackblitz.com/edit/angular-umwtzi?file=app%2Fdatepicker-value-example.html

或材料文档中的更多文档和示例：https://material.angular.io/components/datepicker/examples