format date on type in angular input/date-picker

Question

How to allow format date on an input field on type in angular input/date picker? and also it should not allow letters input and other characters.

User can type date on input field and auto format it and also user can also select date on the date picker.

I tried to use mask but mask and matDatepicker does not work together and causes an issue.

Any idea with this one would be much appreciated. Thanks.

#code

 <mat-form-field appearance="fill" class="w-49per">
                <mat-label>Proposed Term Start</mat-label>
                  <input 
                    name = "proposedTermStart" 
                    matInput
                    (dateChange)="setProposedScheduleInitialStartDate()"
                    [matDatepicker]="proposedTermStart" 
                    [min]="currentDate"
                    [(ngModel)]="dealDispositionFormFields.proposedTermStart"
                    >
                  <mat-datepicker-toggle matSuffix [for]="proposedTermStart"></mat-datepicker-toggle>
                  <mat-datepicker #proposedTermStart></mat-datepicker>
              </mat-form-field>

Answer 1

For the date format, you have several options:

1. Use a library. eg momentjs . Check this stackblitz
2. Datepicker with custom formats. Check this stackblitz

For the date validation you can use matDatepickerFilter or your own custom Validator. Remember that MatNativeDateModule is based on the functionality available in JavaScript's native Date object.