Angular 如何在角材质日期选择器上添加遮罩

我最近开始使用angular material来构建angular form，其中我需要使用angular material日期选择器，但无法在输入元素上添加任何掩码

我想让用户只能够输入数字，并在键入时将其格式化为日期格式（MM/DD/YYYY）

html：

<div class="example-container">
  <mat-form-field appearance="outline" class="col-sm-12 col-md-6 col-lg-6 required margin-top-ten">
    <mat-label>
      <span class="title">Date of Birth (MM/DD/YYYY)</span>  
    </mat-label>
    <input matInput [matDatepicker]="myDatepicker" formControlName="dateOfBirth" maxlength="10">
    <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
    <mat-datepicker #myDatepicker></mat-datepicker>  
  </mat-form-field>
</div>

出生日期（年月日）

注:

---

我试着使用ngx掩码，但不只是在日期选择器上工作，在常规文本输入（如电话或传真字段）上工作正常。

查看下面的文档，了解日期选择器的示例使用。

在组件中添加一个变量

myDatePickerOptions: IMyDpOptions = {
    // other options...
dateFormat: 'dd.mm.yyyy'
};

将其分配给输入元素

[选项]=“myDatePickerOptions”

创建指令

import { Directive, ElementRef, OnDestroy } from '@angular/core';
import * as textMask from 'vanilla-text-mask/dist/vanillaTextMask.js';

@Directive({
  selector: '[appMaskDate]'
})
export class MaskDateDirective implements OnDestroy {

  mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]; // dd/mm/yyyy
  maskedInputController;

  constructor(private element: ElementRef) {
    this.maskedInputController = textMask.maskInput({
      inputElement: this.element.nativeElement,
      mask: this.mask
    });
  }

  ngOnDestroy() {
    this.maskedInputController.destroy();
  }

}

对日期选择器输入使用掩码选择器

  <input matInput [matDatepicker]="dateOfBirth" #dateOfBirth appMaskDate>

---

我想您应该使用moment日期适配器，或者甚至编写您自己的适配器。如果我想在同一组件中使用两个日期选择器，意味着。它工作不正常，例如，我在表单中有两个日期选择器，如“开始日期”和“结束日期”，如果我在“开始日期”之后编辑“结束日期”，则“结束日期”值将附加到“开始日期”值。那么，如何解决这个问题呢？@VigneshMohanraj问题是@ViewChild（MatDatepickerInput）太泛化了。也许在日期选择器上放置一个ID，并按ID使用ViewChild，而不是按组件类型使用ViewChild。很好的解决方案，谢谢，我确实需要添加一个//@ts ignore来从“vanilla text mask/dist/vanillaTextMask.js”导入*作为文本掩码；为了防止编译错误，尽管问题与Angular Material datepicker有关，但您已经包含了一个使用不兼容的其他库的解决方案。

  eventSubscription: Subscription;
  @ViewChild('dateOfBirth') dateOfBirth: ElementRef;
  @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput<any>; 

   this.eventSubscription = fromEvent(this.dateOfBirth.nativeElement, 'input').subscribe(_ => {
      this.datepickerInput._onInput(this.dateOfBirth.nativeElement.value);
    });