如何将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"
答案 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>