javascript - 如何防止带有 Moment Js 的 Angular Material 6 DatePicker 转换不正确的格式？

Question

我将 Angular Material Datepicker 与 Momentjs 结合使用，这有助于我使用任何类型的分隔符来表示天、月和年(例如/、. 等)。

它在选择日期并添加正确或几乎正确的格式时非常有效，即:DD/MM/YYYY。

我已经包含在我的模块中:

export const MY_FORMATS = {
  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'MM/DD/YYYY',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

然后:

  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],

当用户输入格式为 YYYY/MM/DD 的日期时会出现问题，它会自动转换为 DD/MM/YYYY，这不应该发生，因为它是不正确的。

如何防止这种情况发生，如何阻止 Momentjs 转换这种格式并保持输入无效？

Answer 1

Angular Material Datepicker 中没有任何配置可以更改该行为。但是您可以通过添加一个隐藏的输入字段并与日期选择器绑定(bind)来实现相同的目的。 这是我如何做到的示例。

在 HTML 文件中:

<mat-form-field>
<input matInput #autocomplete placeholder="Please choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

在ts文件中:

toFormattedDate(iso: string) {
  const date = new Date(iso);
  console.log(date);
  return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
}

看看我的Stackblitz example .