Currently, I am utilizing a mat-date-rang-input component from Angular Material. To customize the date format to dd/MM/yyyy, I made adjustments within Angular Material which is functioning correctly.
<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="Start" [(ngModel)]="dateStartFilterField" (valueChanges)="show($event)" />
<input matEndDate placeholder="End" [(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, during my test of the user interface/user experience (ui/ux), I observed an unexpected behavior. Upon entering a date in the format dd/MM/yyyy and moving focus away, the format would revert back to MM/dd/yyyy.
To address this issue, I attempted modifying the app.module.ts file by adding a provider for date formatting.
providers: [
{
provide: LOCALE_ID,
useValue: DATE_FORMAT_PTBR
}
]
This is how I defined the 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 also tried changing the value of useValue to 'pt-BR' in providers, but unfortunately, it did not resolve the issue.