dateformat掩碼到md-datepicker角材料2

Question

如何將dateformat掩碼添加到md-datepicker？

如果我指定的日期格式爲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

Answer 1

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