Angular 角度反应形式物料日期选择器手动输入格式DD/MM/YYYY

我想更改datePicker的输入格式，默认值为MM/DD/YYYY 我想把它改成DD/MM/YYYY。 html代码：

<mat-form-field>
    <mat-label>Date de creation min</mat-label>
    <input formControlName="dateDebut" matInput [matDatepicker]="pickerCreationMin"
           placeholder="jj/mm/aaaa">
    <mat-datepicker-toggle matSuffix [for]="pickerCreationMin"></mat-datepicker-toggle>
    <mat-datepicker #pickerCreationMin></mat-datepicker>
</mat-form-field>

取消创建日期最小值

format-picker.ts

import { NativeDateAdapter } from '@angular/material';
import { MatDateFormats } from '@angular/material/core';

export class AppDateAdapter extends NativeDateAdapter {
   format(date: Date, displayFormat): string {
      if (displayFormat === 'input') {
        let day: string = date.getDate().toString();
        day = +day < 10 ? '0' + day : day;
        let month: string = (date.getMonth() + 1).toString();
        month = +month < 10 ? '0' + month : month;
        let year = date.getFullYear();
        return `${day}-${month}-${year}`;
      }
      return date.toDateString();
   }
}
export const APP_DATE_FORMATS: MatDateFormats = {
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
  },
  display: {
    dateInput: 'input',
    monthYearLabel: { year: 'numeric', month: 'numeric' },
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric'},
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
};

从'@angular/material'导入{NativeDateAdapter}；
从“@angular/material/core”导入{MatDateFormats}；
导出类AppDateAdapter扩展了NativeDateAdapter{
格式（日期：日期，显示格式）：字符串{
如果（displayFormat==='input'）{
let day:string=date.getDate（）.toString（）；
天=+天<10？'0'+天：天；
let month:string=（date.getMonth（）+1.toString（）；
月=+月<10？'0'+月：月；
让year=date.getFullYear（）；
返回`${day}-${month}-${year}`；
}
返回日期。toDateString（）；
}
}
导出常量应用程序\日期\格式：MatDateFormats={
解析：{
dateInput:{月：'短'，年：'数字'，日：'数字'}，
},
显示：{
dateInput:'输入'，
monthYearLabel:{年：'numeric'，月：'numeric'}，
dateA11yLabel:{year:'numeric'，month:'long'，day:'numeric'}，
Monthyear11ylabel:{年：'数字'，月：'长'}，
}
};

但当我用DD/MM/YYYY格式手动输入日期时，我得到了无效日期的错误

---

例如：2019年8月24日

试试这个，如果它对你有用，请接受答案：）

---

这里是AppDateAdapter的另一个版本：

export class AppDateAdapter extends NativeDateAdapter {

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

   format(date: Date, displayFormat: string): string {
      if (displayFormat == "input") {
        let day = date.getDate();
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
      } else if (displayFormat == "inputMonth") {
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        return  this._to2digit(month) + '/' + year;
      } else {
          return date.toDateString();
      }
   }

   private _to2digit(n: number) {
      return ('00' + n).slice(-2);
   } 
}

export const APP_DATE_FORMATS =
{
   parse: {
       dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
   },
   display: {
       dateInput: 'input',
       monthYearLabel: 'inputMonth',
       dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
       monthYearA11yLabel: {year: 'numeric', month: 'long'},
   }
}

---

你怎么知道他是否在使用矩呢？我没有任何问题可以使用矩，但是我们的用户用这种格式写日期“DD/MM/YYYY”，默认的验证器采用这种格式“MM/DD/YYYY”。这对我来说是可行的，但我应该添加提供程序：[{provide:DateAdapter，useClass:AppDateAdapter}，{provide:MAT_DATE_FORMATS，useValue:APP_DATE_FORMATS}，]在每个模块中，而不仅仅是在根模块中

export class AppDateAdapter extends NativeDateAdapter {

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

   format(date: Date, displayFormat: string): string {
      if (displayFormat == "input") {
        let day = date.getDate();
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
      } else if (displayFormat == "inputMonth") {
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        return  this._to2digit(month) + '/' + year;
      } else {
          return date.toDateString();
      }
   }

   private _to2digit(n: number) {
      return ('00' + n).slice(-2);
   } 
}

export const APP_DATE_FORMATS =
{
   parse: {
       dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
   },
   display: {
       dateInput: 'input',
       monthYearLabel: 'inputMonth',
       dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
       monthYearA11yLabel: {year: 'numeric', month: 'long'},
   }
}