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