Angular Material 日期选择器在手动更改并按下选项卡时会更改疯狂的日期

Question

我在这里使用了Angular材料日期选择器控件。我的组件有一个奇怪的问题。即当我使用日历控件选择它时就很好。但是，如果我手动更改日期，然后按选项卡按钮，则会出现完全疯狂的日期。关于如何避免这种情况的任何线索？我这里没有任何日期初始化或类似的东西。我也用反应形式进行了测试，但行为相同。这个疯狂的日期会随着不同的值而变化。即不是同一个疯狂的日期

.html

<mat-form-field class="example-full-width">
        <input matInput [matDatepicker]="picker" placeholder="Choose a date">
        <mat-datepicker-toggle matSuffix [for]="picker">
          <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
        </mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

行为：

Answer 1

我认为根据您的要求，您应该创建自定义日期适配器。 检查这个例子： https://stackblitz.com/edit/angular-hv6jny-ynqfb2

Answer 2

我想这都是关于 useValue 你如何在日期选择器中显示日期格式。它应该与 dateInput

匹配

parse: {
    dateInput: 'DD-MMM-YYYY HH:mm:ss',
  },
providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE]
    },
    { provide: MAT_DATE_FORMATS, useValue: FORMATS },
  ]

export const FORMATS = {
  parse: {
    dateInput: 'DD-MMM-YYYY HH:mm:ss',
  },
  display: {
    dateInput: 'DD-MMM-YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'YYYY-MM-DD HH:mm:ss',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};