dateformat mask到角度材质2中的md-datepicker

Posted 2021-04-05

如何将dateformat掩码添加到md-datepicker？

如果我将日期格式指定为DD/MM/YYYY，那么一旦用户开始输入datepicker内部，用户就可以插入

• DD到31
• MM到12
• YYYY到9999与单独的/

所以最后的结果如下

使用__/__/____面具的正确日期。

目前我尝试插入这样的内容，但它不适用

<md-form-field>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date" ui-mask="XX.XX.XXXX">
  <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
  <md-datepicker #picker></md-datepicker>
</md-form-field>

所以我尝试了以下方法，没有这项工作

ui-mask="XX.XX.XXXX"

os-mask="3?9/19/9999"

MASK="DD/MM/YYYY"

Plunkr Example

答案

角度材料2中没有任何掩蔽功能。您可以使用文本掩码库（https://github.com/text-mask/text-mask），但角度版本不适用于material2，因为angular不允许输入字段具有多个ValueAcessor。

解决方法是使用文本掩码的vanilla版本：

1 - 导入组件中的库

import * as textMask from "vanilla-text-mask/dist/vanillaTextMask.js";

2 - 在组件中添加掩码并初始化输入（不要忘记导入AfterViewInit并将其实现到组件中）

  mask = [ /[1-9]/, /d/, /d/];
  maskedInputController;

  @ViewChild("input", { read: ViewContainerRef }) public input;

  ngAfterViewInit(): void {
    setTimeout(() => {
      this.maskedInputController = textMask.maskInput({
        inputElement: this.input.element.nativeElement,
        mask: this.mask
      });
    });
  }

  ngOnDestroy() {
    this.maskedInputController.destroy();
  }

3 - 在模板中，确保input元素具有#input属性

<mat-form-field class="input">
  <input matInput [matDatepicker]="picker" [(ngModel)]="selectedValue" #input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>