I am using angular material date range picker which has start and end date picker. When I select the date from date picker it is working perfectly.
But when I started to type month (MM/DD/YYYY) and focus out the input field or click outside of the input area the date get auto-filled with "01/2001". For example I type 12 and click outside of the input field the date gets auto-filled with "12/01/2001".
How could I hide wrong dates that are auto-filled for date range picker, and instead keep the input field as I typed when the field is out of focus?
There is a solution for simple date picker, but not for date range picker: stackblitz example
HTML file
<mat-form-field class="form-input">
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
<input
matStartDate
formControlName="start"
placeholder="MM/DD/YYYY"
maxlength="10"
/>
<input
matEndDate
formControlName="end"
placeholder="MM/DD/YYYY"
maxlength="10"
/>
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker xPosition="start" yPosition="below">
<mat-date-range-picker-actions>
<button mat-button matDateRangePickerCancel>Cancel</button>
<button mat-raised-button color="primary" matDateRangePickerApply>
Apply
</button>
</mat-date-range-picker-actions>
</mat-date-range-picker>
@if (range.controls.start.hasError('matStartDateInvalid')) {
<mat-error>Invalid start date</mat-error>
} @if (range.controls.end.hasError('matEndDateInvalid')) {
<mat-error>Invalid end date</mat-error>
}
</mat-form-field>