CODEWITHSUNDEEP
angularangular-materialangular13
Michał Ręka
Michał Ręka

Reputation: 1

Is it possible to set Angular Material 13 datepicker input format to match locale?

I have datepicker in mat-form-field:

<mat-form-field>
    <mat-label>label</mat-label>
    <input
      [max]="endDate"
      [ngModel]="startDate"
      (click)="pickerFrom.open();"
      readonly
      matInput
      [matDatepicker]="pickerFrom"
    />
    <mat-datepicker #pickerFrom></mat-datepicker>
</mat-form-field>

It works as intended, but in input date is always displayed in 'en-US' locale, which is default as far as I know.

Is it even possible to show dynamic date format based on user's system using Angular Material datepicker?

Regular mat-input with dataType='data' without Angular Material's datepicker works, but together creates a conflicts - after choosing date, logic behind datepicker throws an error that it is in wrong format.

I know there is possibility to change format by providing MAT_DATE_FORMATS or MAT_DATE_LOCALE, but it changes only to given format, not dynamically based on user's system.

I tried to switch between moment and native DataAdapters, but without success.

Upvotes: 0

Views: 757

Answers (1)

MGX
MGX

Reputation: 3531

Maybe you should read the documentation about Anguar i18n and the datepicker.

import { registerLocaleData } from '@angular/common';
import FR from '@angular/common/locales/fr';

registerLocaleData(FR);

@NgModule({
  // ...
  providers: [
    { provide: LOCALE_ID, useValue: 'fr-FR' },
    { provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
  ]
  // ...
})

Upvotes: 0

Related Questions