Angular Material mat-datepicker (change) event and format

Question

I am using angular material datepicker directive and I have few problems.

1. When I open date picker dialog and select any date, date shows up in i

Answer 1

There seems to be a deficiency in the MatDatePicker, so that if you first clear the date (if it has a value), go to another field, then edit the field with manual input (without using the date picker), and leave the field, the month and the day are switched. In order to correct this behaviour, you have to define the "parse" method in addition to the "format" method in the AppDateAdapter class (see the answer of Rak2018):

parse(value: any): Date | null {
    const vals = value.split('.'); // or '-' if you use - as separator
    if (vals.length !== 3 || parseInt(vals[2] < 1900) return null;
    return new Date(parseInt(vals[2]), parseInt(vals[1]) - 1, parseInt(vals[0]));
}

What I mean by deficiency is that normally, you could define in providers something like

{ provide: MAT_DATE_LOCALE, useValue: 'de' }

and that works except in the case described above. So the problem is that the default "parse" method does not obey this MAT_DATE_LOCALE setting.

See also How to implement MD_DATE_FORMATS for datepicker?