mat-datepicker with filtered input

Question

I am struggling for a few days already with a "simple" problem.

The requirement is to make simple date picker with a possibility to filter manual input data in a format dd/mm/yyyy with automatic adding of slashes (/) between day, month and year. I can't believe it haven't built already.

I chose Material mat-datepicker because ng-Material is well-written and there are lots of useful features. But could not find any compulsory keyboard filter.

I found a few add-on directives as helpers for filtered input. They work until there are no additional controls to the input.

Well, I'm stuck. Does anyone have a solution for filtered input for datepicker's input control which works under Angular 9 with IVY? Just like the old jQuery's datepicker...

Roberc Roberc · Accepted Answer · 2020-06-25T09:43:43

As nobody could help in this challenge, I had to find a solution - it's simple and it works.

I took the textMask directive as shown here: How to add mask on angular material date picker For my big surprise it worked with no errors.

And applied to the code as appMaskDate:

    <mat-form-field>
        <input matInput [matDatepicker]="datepicker" [disabled]="is_disabled" 
               appMaskDate (dateInput)="addEvent('input', $event)" 
               (dateChange)="addEvent('change', $event)" [value]="select">
        <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
        <mat-datepicker #datepicker color="primary"></mat-datepicker>
    </mat-form-field>

My mistake and only reason of confuse was that there are 2 events fired from input string: (dateInput) and (dateChange) and they return different values in the _i property of moment.

just to save a time to somebody who'll have to apply an input mask to the date picker. And to save embarrassment during the explore of strange world of Angular Material and Angular CDK ;)

mat-datepicker with filtered input

1 Answers