带有过滤输入的 mat-datepicker答案

【问题标题】：mat-datepicker with filtered input带有过滤输入的 mat-datepicker
【发布时间】：2020-06-17 14:03:28
【问题描述】：

我已经为一个“简单”的问题苦苦挣扎了几天。

要求是制作简单的日期选择器，可以过滤手动输入的数据，格式为 dd/mm/yyyy，并在日、月和年之间自动添加斜杠 (/)。我不敢相信它还没有建成。

我选择 Material mat-datepicker 是因为 ng-Material 写得很好，而且有很多有用的功能。但找不到任何强制键盘过滤器。

我发现了一些附加指令作为过滤输入的助手。它们一直工作到输入没有其他控件为止。

好吧，我被困住了。有没有人为 datepicker 的输入控件提供过滤输入的解决方案，该解决方案在 Angular 9 和 IVY 下工作？就像旧 jQuery 的 datepicker...

【问题讨论】：

标签： angular datepicker angular-material

【解决方案1】：

由于没有人能在这个挑战中提供帮助，我必须找到一个解决方案 - 它既简单又有效。

我采用了如下所示的 textMask 指令：How to add mask on angular material date picker 令我大吃一惊的是，它没有出现任何错误。

并作为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>

我的错误也是唯一令人困惑的原因是输入字符串触发了 2 个事件：(dateInput) 和 (dateChange)，它们在 moment 的 _i 属性中返回不同的值。

只是为了节省时间给那些必须将输入掩码应用到日期选择器的人。并在探索Angular Material和Angular CDK的陌生世界时避免尴尬；）

【讨论】：