Datepicker Angular Material: Input field format change when change value of the field

Question

I'm using a mat-date-rang-input of Angular Material. I changed the date format of Angular Material from MM/dd/yyyy to dd/MM/yyyy, and that's works alright.

<mat-form-field ngClass="filters_dateInterval">
    <mat-label>Date interval</mat-label>
    <mat-date-range-input [rangePicker]="picker" md-date-locale="{
                  inputDisplay: dd/MM/yyyy
                }}">
        <input matStartDate placeholder="Início" [(ngModel)]="dateStartFilterField" (valueChanges)="show($event)" />
        <input matEndDate placeholder="Fim" [(ngModel)]="dateEndFilterField" />
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker" ngClass="filters_dateInterval__icon"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

However, when I tested the ui/ux, I noticed something unusual. After I wrote a date in the format dd/MM/yyyy and focused out, it lost that format and the date changed to the format MM/dd/yyyy.

I tried changing the app.module.ts to include a provider to format the date.

providers: [
    {
      provide: LOCALE_ID,
      useValue: DATE_FORMAT_PTBR
    }
]

This is my DATE_FORMAT_PTBR:

export const DATE_FORMAT_PTBR = {
  parse: {
    dateInput: 'dd/MM/yyyy',
  },
  display: {
    dateInput: 'dd/MM/yyyy',
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  },
  formater: {
    dateInput: 'dd/MM/yyyy',
  }
};

I tried changing the useValue of providers to 'pt-BR' too, but it did not affect the situation.

Have you tried using DatePipe e.g. <input matStartDate placeholder="Início" [(ngModel)]="(dateStartFilterField | date : 'dd/MM/yyyy')" (valueChanges)="show($event)" /> — amishra
– amishra, Commented Mar 30, 2022 at 0:26
I tried now, but cannot is possible include pipe and date propertie in [(ngModel)]. — Ricardo Mazzarioli
– Ricardo Mazzarioli, Commented Mar 30, 2022 at 5:47

turivishal · Accepted Answer · 2022-03-30 12:46:02Z

1

Correct the TS file as below,

import { MAT_DATE_FORMATS } from '@angular/material/core';

export const MY_DATE_FORMATS = {
    parse: {
      dateInput: 'DD/MM/YYYY',
    },
    display: {
      dateInput: 'DD/MM/YYYY',
      monthYearLabel: 'MMMM YYYY',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'MMMM YYYY'
    },
};


 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
  ]
})

And HTML file as below,

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

edited Mar 30, 2022 at 12:46

turivishal

36.4k7 gold badges48 silver badges69 bronze badges

answered Mar 30, 2022 at 11:37

Nikhil Makwana

1,0645 gold badges17 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gigaDIE Over a year ago

it is not working for me

Nikhil Makwana Over a year ago

@gigaDIE what issue are you facing?

Collectives™ on Stack Overflow

Datepicker Angular Material: Input field format change when change value of the field

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related