Angular Material Datepicker - manual date entry in the input field

Datepicker works fine until I type the date manually in. If I type a date between 01.MM.YYYY and 12.MM.YYYY the value switches to MM.DD.YYYY but if I type for example 16.09.2021 it stays DD.MM.YYYY.

How can I change the date format from input field?

HTML

<div class="form-group inline datepicker">
<mat-form-field appearance="fill">
<input matInput
[matDatepicker]="validFromPicker"
[formControl]="validFromFormControl"
(dateChange)="setValidFromDate($event.value)">
<mat-datepicker-toggle matSuffix [for]="validFromPicker"></mat-datepicker-toggle>
<mat-datepicker #validFromPicker></mat-datepicker>
</mat-form-field>
</div>


TypeScript

validFrom: Date;
validFromFormControl: FormControl;

ngOnInit() {
this.validFromFormControl = new FormControl(new Date());
this.validFrom = new Date();
}

setValidFromDate($event: any) {
this.validFrom = $event;
}


I tried to set in AppModule the locale like in this thread - https://stackoverflow.com/a/54670289/11945378 but without success.

Continue reading...