具有过滤输入的mat-datepicker

Question

我已经为 "simple" 问题苦苦挣扎了几天。

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

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

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

好吧，我卡住了。有没有人有针对 datepicker 的输入控件的过滤输入的解决方案，它在 Angular 9 和 IVY 下工作？就像旧 jQuery 的日期选择器一样...

Answer 1

由于没有人能帮助解决这个挑战，我必须找到一个解决方案 - 它简单而且有效。

我采用了 textMask 指令，如下所示：令我大吃一惊的是，它没有任何错误。

并作为 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) 并且它们 return 在 _i 属性时刻的不同值。

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

具有过滤输入的mat-datepicker

mat-datepicker with filtered input

datepicker

angular-material

angular