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

时间:2017-09-28 17:45:35

标签: angular datepicker angular-material angular-material2

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

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

  • DD upto 31
  • MM upto 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

1 个答案:

答案 0 :(得分:0)

角度材质2中还没有任何遮罩功能。 您可以使用文本掩码库(https://github.com/text-mask/text-mask),但角度版本不能使用material2,因为angular不允许输入字段具有多个ValueAcessor。

解决方法是使用text-mask的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>