如何在角度材料日期选择器中插入点到日期并限制年份？

Question

Angular 材料 datepicker 中的组件：

inputEvent(event, type: number): void {...}
changeEvent(event, type: number): void {...}

newDateStart: Date = null;
endDateStart: Date = null;

模板：

<mat-date-range-input [rangePicker]="picker">
    <input #fromInput matStartDate placeholder="Start Date"
           (dateInput)="inputEvent($event, 0)"
           (dateChange)="changeEvent($event, 0)">
    <input #toInput matEndDate placeholder="End Date"
           (dateInput)="inputEvent($event, 1)"
           (dateChange)="changeEvent($event, 1)">
</mat-date-range-input>

以及 datepicker 的 CustomDateAdapter：

export class CustomDateAdapter extends NativeDateAdapter {

  parse(value: any): Date | null {
    // if ((typeof value === 'string') && (value.indexOf('.') > -1)) {
    if (typeof value === 'string') {
      let str: string[] = [];

      if (value.indexOf('.') > -1) {
        str = value.split('.');
      } else if (value.indexOf(' ') > -1) {
        str = value.split(' ');
      } else if (value.indexOf('-') > -1) {
        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);
    } else if ((typeof value === 'string') && value === '') {
      return new Date();
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }

  getFirstDayOfWeek(): number {
    return 1;
  }
}

日期格式为 05.03.2022，其中 05 - 天，03 - 月，2022 - 年。

可以输入：

1. “05032022”，在这种情况下我需要添加“.”。插入此字符串以获取“05.03.2022”并将此新字符串插入模板
2. “05.03.202200”的输入中，在这种情况下，我需要将年份限制为 4 个数字长度

如何在日期中插入点并限制年份角材料日期选择器？

Answer 1

使用输入类型日期，这将负责验证。

<input type="date" (dateChange)="changeEvent($event)">

dateChange(e){
    let date = new Date(e.target.value);
    let month = date.getMonth();
    let day = date.getDate();
    let year = date.getFullYear();
    let formatedDate = month +'.' + day + '.'+ year;

}