CODEWITHSUNDEEP
angularangular-material
TirupathiRao
TirupathiRao

Reputation: 61

Angular datepicker showing wrong text for December month

Angular material date picker showing DES for the month December, Expected Month text is 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>

Upvotes: 1

Views: 297

Answers (1)

ic_paty
ic_paty

Reputation: 432

I think you need to change the language of your Datepicker by updating the locale code as mentionned in the code below:

Component 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 File

<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>

You can find more details in the official documentation of the component.

Hope it helps!

Upvotes: 1

Related Questions