角日期选择器显示12月份的文本错误

时间:2019-12-23 11:23:42

标签: angular angular-material

角材料日期选择器显示12月份的DES,“预期月份”文本为DEC Screenshot

<mat-form-field>
   <input matInput [matDatepicker]="picker" placeholder="Choose a date" [min]="startDate">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

1 个答案:

答案 0 :(得分:1)

我认为您需要通过更新以下代码中提到的语言环境代码来更改Datepicker的语言:

组件TS

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

@Component({
  selector: 'datepicker-formats-example',
  templateUrl: 'datepicker-formats-example.html',
  styleUrls: ['datepicker-formats-example.css'],
  providers: [
     { provide: MAT_DATE_LOCALE, useValue: 'en-US' }, //english
     //{ provide: MAT_DATE_LOCALE, useValue: 'fr-FR' }, //french
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
  ],
})
export class DatepickerFormatsExample {
}

HTML文件

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

您可以在组件的official documentation中找到更多详细信息。

希望有帮助!