dateformat掩码到md-datepicker角材料2

问题描述：

如何将dateformat掩码添加到md-datepicker？dateformat掩码到md-datepicker角材料2

如果我指定的日期格式为DD/MM/YYYY，则一旦用户开始里面键入日期选择器，用户将能够插入

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

答

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

一个解决办法是使用文字面具的香草版本：

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属性

<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>

dateformat掩码到md-datepicker角材料2

相关推荐