Question

物料日期选择器具有一个输入字段，日历中的日期已插入其中。我需要为dd / mm / yyyy格式的输入字段创建一个掩码，以便用户可以使用键盘手动输入日期

我创建了一个带有mack的指令，提供了数据适配器

指令

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();
  }

}

日期适配器

import { NativeDateAdapter } from '@angular/material';
import { MatDateFormats } from '@angular/material/core';

export class AppDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: Object): string {
    if (displayFormat === 'input') {
      let day: string = date.getDate().toString();
      day = +day < 10 ? '0' + day : day;
      let month: string = (date.getMonth() + 1).toString();
      month = +month < 10 ? '0' + month : month;
      let year = date.getFullYear();
      return `${month}/${day}/${year}`;
    }
    return date.toDateString();
  }
}
export const APP_DATE_FORMATS: MatDateFormats = {
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
  },
  display: {
    dateInput: 'input',
    monthYearLabel: { year: 'numeric', month: 'numeric' },
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric'
    },
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
};

组件

providers: [
    MaskDateDirective,
    {provide: DateAdapter, useClass: AppDateAdapter},
    {provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS},
]

eventSubscription: Subscription;
  @ViewChild('startDate', {static: true}) startDate: ElementRef;
  @ViewChild(MatDatepickerInput,  {static: true}) datepickerInput: MatDatepickerInput<any>; 

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

ngOnDestroy() {
  this.eventSubscription.unsubscribe();
}

模板

<input
  required
  formControlName="startDate"
  matInput
  [matDatepicker]="picker3"
  [min]="minValidDate"
  [max]="maxValidDate"
  #startDate
  appMaskDate
/>

matDatepickerParse：文本：“ 10/09 / 201__” 必填：true

或者Datepicker无法正确解析日期，并且出现诸如日期之类的验证错误

角材料Datepicker手动输入

0 个答案: