Angular 通过键盘输入的角度材质日期选择器格式仅适用于Chrome

我正在使用Angular Material提供的日期选择器组件，我遇到了以下问题：如果我想键入日期，而不是选择以下格式：“2019.12.20”，那么它只能在Chrome中工作。我在Edge和Firefox上试用过，如果使用这种格式，日期值为空。但是，如果我使用“-”或“/”而不是“.”，例如“2019-12-20”，那么它就可以正常工作

我已将提供商设置为：

提供者：[
{提供：MAT_DATE_LOCALE，useValue:'hu'}，
{提供：DateAdapter，useClass:AppDateAdapter}，
{提供：MAT_DATE_格式，useValue:APP_DATE_格式}
]

我的DateAdapter如下所示：

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

---

知道怎么了吗？如果您需要有关此问题的更多信息，请告诉我。

似乎问题出在Edge和IE中的NativeDateAdapter。请尝试改用MomentDateAdapter

这么快的解释： 在提供程序中使用MomentDateAdapter，如下代码所述：

TS文件

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

import * as _moment from 'moment';

const moment = _moment;

export const MY_FORMATS = {
  parse: {
    dateInput: ['YYYY.MM.DD', 'YYYY-MM-DD', 'YYYY/MM/DD', 'YYYY MM DD']
  },
  display: {
    dateInput: 'YYYY MMM DD',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

/** @title Datepicker with custom formats */
@Component({
  selector: 'datepicker-formats-example',
  templateUrl: 'datepicker-formats-example.html',
  styleUrls: ['datepicker-formats-example.css'],
  providers: [
     { provide: MAT_DATE_LOCALE, useValue: 'hu' },
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
export class DatepickerFormatsExample {
  date = new FormControl(moment());
}

<mat-form-field>
  <input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp></mat-datepicker>
</mat-form-field>

HTML文件

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

import * as _moment from 'moment';

const moment = _moment;

export const MY_FORMATS = {
  parse: {
    dateInput: ['YYYY.MM.DD', 'YYYY-MM-DD', 'YYYY/MM/DD', 'YYYY MM DD']
  },
  display: {
    dateInput: 'YYYY MMM DD',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

/** @title Datepicker with custom formats */
@Component({
  selector: 'datepicker-formats-example',
  templateUrl: 'datepicker-formats-example.html',
  styleUrls: ['datepicker-formats-example.css'],
  providers: [
     { provide: MAT_DATE_LOCALE, useValue: 'hu' },
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
export class DatepickerFormatsExample {
  date = new FormControl(moment());
}

<mat-form-field>
  <input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp></mat-datepicker>
</mat-form-field>

在上面的示例中，日期字段接受以下格式作为输入

['YYYY.MM.DD'，'YYYY-MM-DD'，'YYYY/MM/DD'，'yyyyy-MM-DD']

，然后将以该格式显示它们