angular - 如何将 Angular Material 日期选择器中的日期作为字符串绑定(bind)到模型？

Question

我们使用标准的日期选择器组件，来自 Angular Material (v. 9.1.2)，如下所示:

<mat-form-field>
    <mat-label i18n>Date of birth</mat-label>
    <input matInput [matDatepicker]="picker" formControlName="dateOfBirth" />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

日期采用 ISO 格式，例如 1979-12-02 .一旦绑定(bind)到表单并显示出来，我们就可以通过调用 getRawValue 来取回它。在整个表格上。但是，这会将日期返回为 javascript Date ，然后将其转换为字符串并以“完整” ISO 格式发送到后端，例如 1979-12-02TXX:00:00.000Z ，这会破坏联系人/API。

如果我们使用 MatMomentDateModule而不是 MatNativeDateModule ，我们得到一个 js 日期(而不是 javascript Date )，但这对格式化没有帮助。

有没有办法将控件的原始值绑定(bind)为字符串而不是日期？最好不要将组件包装在 ControlValueAccessor 中?也许是定制 DateAdapter ?

Answer 1

你是对的，你应该实现自定义 DateAdapter使用短 ISO 日期字符串。
基本上你只需要创建一个扩展 DateAdapter 的类并实现以下方法:

  abstract getYear(date: D): number;

  abstract getMonth(date: D): number;

  abstract getDate(date: D): number;

  abstract getDayOfWeek(date: D): number;

  abstract getMonthNames(style: 'long' | 'short' | 'narrow'): string[];

  abstract getDateNames(): string[];

  abstract getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[];

  abstract getYearName(date: D): string;

  abstract getFirstDayOfWeek(): number;

  abstract getNumDaysInMonth(date: D): number;

  abstract clone(date: D): D;

  abstract createDate(year: number, month: number, date: number): D;

  abstract today(): D;

  abstract parse(value: any, parseFormat: any): D | null;

  abstract format(date: D, displayFormat: any): string;

  abstract addCalendarYears(date: D, years: number): D;

  abstract addCalendarMonths(date: D, months: number): D;

  abstract addCalendarDays(date: D, days: number): D;

  abstract toIso8601(date: D): string;

  abstract isDateInstance(obj: any): boolean;

  abstract isValid(date: D): boolean;

  abstract invalid(): D;

Angular 团队提供了两个很好的例子: MomentDateAdapter和 NativeDateAdapter .
实现适配器后，您需要将其添加到模块或组件中，如下所示:

  providers: [
    {provide: DateAdapter, useClass: YourISODateAdapter, deps: [...]}
  ],