Angular Mat DatePicker格式问题

Question

我是Angular的新手，我刚刚跳入一个现有项目。我的问题是关于有角度的材料的日期选择器。如果我通过切换选择日期，没问题，则日期是正确的，但是如果我要手动输入日期（使用的格式：dd / MM / yyyy），当我将焦点移到输入字段时，它将自动切换dd和MM。

例如，如果我输入：“ 07/04/2019”，则单击我要更改的下一个输入，日期更改为“ 04/07/2019”。

这里是输入内容：

<mat-form-field>
    <input matInput [matDatepicker]="availableFrom" placeholder="From" formControlName="availableFrom" (dateChange)="fromDateLessThanToDate()">
    <mat-datepicker-toggle matSuffix [for]="availableFrom"></mat-datepicker-toggle>
    <mat-datepicker #availableFrom></mat-datepicker>
</mat-form-field>

fromDateLessThanToDate() {
    if (DateUtils.fromDateLessThanToDate(this.conventionForm.value.availableFrom, this.conventionForm.value.availableTo))
      this.error_date = { isError: true, errorMessage: 'To date can\'t before From date' };
    else
      this.error_date = { isError: false, errorMessage: '' };
  }

当我们到达fromDatLessThanToDate()功能时，日期（this.conventionForm.value.availableFrom）已经具有错误的值（切换的日期和月份）。我已经测试了一些像Angular Material mat-datepicker (change) event and format这样的解决方案，但结果是相同的。

Answer 1

为您提供帮助有点迟，但也许会帮助发现此问题的其他人。

我今天遇到了这个问题，我创建了这个可行的修复程序：

export class CustomDateAdapter extends NativeDateAdapter {
  parse(value: any): Date | null {
    if (typeof value === 'string') {
      let str = null;
      if ((value.indexOf('/') > -1)) {
        str = value.split('/');
      } else if ((value.indexOf('-') > -1)) {
        str = value.split('-');
      } else if ((value.indexOf('.') > -1)) {
        str = value.split('.');
      }
      if (str === null) {
        return null;
      }
      const year = Number(str[2]);
      const month = Number(str[1]) - 1;
      const date = Number(str[0]);
      if (month > 11) {
        return new Date(year, date - 1, month + 1);
      }
      return new Date(year, month, date);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }
}

这将覆盖重要日期选择器解析日期的方式，您可以对其进行控制。您可以修改parse方法以执行所需的任何类型的解析。

然后在模块中，将以下行添加到providers数组中：

{ provide: DateAdapter, useClass: CustomDateAdapter },