I'm facing a challenge with the date picker component from Angular Material. When I try to manually type in a date like "2019.12.20" instead of selecting it, the input only works in Google Chrome. But when I tested it on Edge and Firefox, the date value appears as null with this format. Interestingly, if I use "-" or "/" instead of ".", for example, "2019-12-20," it works smoothly without any issues.
My providers are configured as follows:
providers: [
{ provide: MAT_DATE_LOCALE, useValue: 'hu' },
{ provide: DateAdapter, useClass: AppDateAdapter },
{ provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS }
]
This is my implementation of DateAdapter:
import { NativeDateAdapter } from '@angular/material';
export class AppDateAdapter extends NativeDateAdapter {
format(date: Date, displayFormat: Object): string {
if (displayFormat === 'input') {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `${year}.${month}.${day}`;
}
return date.toDateString();
}
}
export const APP_DATE_FORMATS =
{
parse: {
dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
},
display: {
dateInput: 'input',
monthYearLabel: { year: 'numeric', month: 'numeric' },
dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
monthYearA11yLabel: { year: 'numeric', month: 'long' },
}
};
If you have any insights on what might be causing this issue, or if you need more details regarding the problem, please let me know.