Angular Material Datepicker - 在输入字段中手动输入日期

Question

Datepicker 工作正常，直到我手动输入日期。如果我输入 01.MM.YYYY 和 12.MM.YYYY 之间的日期，值切换到 MM.DD.YYYY 但如果我输入例如 16.09。 2021 年保持 DD.MM.YYYY。

如何更改输入字段的日期格式？

HTML

<div class="form-group inline datepicker">
  <mat-form-field appearance="fill">
      <input matInput
             [matDatepicker]="validFromPicker"
             [formControl]="validFromFormControl"
             (dateChange)="setValidFromDate($event.value)">
      <mat-datepicker-toggle matSuffix [for]="validFromPicker"></mat-datepicker-toggle>
      <mat-datepicker #validFromPicker></mat-datepicker>
  </mat-form-field>
</div>

TypeScript

 validFrom: Date;
 validFromFormControl: FormControl;
 
 ngOnInit() {
   this.validFromFormControl = new FormControl(new Date());
   this.validFrom = new Date();
 }

 setValidFromDate($event: any) {
   this.validFrom = $event;
 }

我尝试在 AppModule 中设置语言环境，就像在这个线程中一样 - 但没有成功。

Answer 1

您需要使用 MomentDateAdapter 来轻松更改语言环境：

providers: [
// The locale would typically be provided on the root module of your application. We do it at
// the component level here, due to limitations of our example generation script.
{ provide: MAT_DATE_LOCALE, useValue: 'en-US' },

// `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
// `MatMomentDateModule` in your applications root module. We provide it at the component level
// here, due to limitations of our example generation script.
{
  provide: DateAdapter,
  useClass: MomentDateAdapter,
  deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
},
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }]

这里有一个 stackblitz 示例来向您展示整个代码。

Angular Material Datepicker - 在输入字段中手动输入日期

Angular Material Datepicker - manual date entry in the input field

date

typescript

angular-material

angular