I am looking to create a simple Date Formatter Directive for the MatDatepicker. For example, when I input 4 or 6 numbers into the calendar, the directive should automatically convert it to a real date.
0123 -> 2021-01-23 200415 -> 2020-04-15
However, when I try to retrieve the value on blur, MatDatePicker attempts to cast it as a new Date(inputvalue). This results in converting '0123' to (123-01-01). Is there a way to disable this feature of the datepicker or any other way to implement this functionality?
<mat-form-field appearance="fill" class="example-form-field">
<mat-label>Choose a date</mat-label>
<input simpleDateFormatterDirective matInput [matDatepicker]="datepicker">
<mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
<mat-datepicker #datepicker>
<mat-datepicker-actions>
<button mat-button matDatepickerCancel>Cancel</button>
<button mat-raised-button color="primary" matDatepickerApply>Apply</button>
</mat-datepicker-actions>
</mat-datepicker>
</mat-form-field>