Question

我使用mat-datepicker在Angular5中编写自定义datepicker输入组件imlements ControlValueAccessor。

日期picker.component.html：

<mat-form-field>
    <input matInput [matDatepicker]="picker" [(ngModel)]="value" (blur)="onBlur()">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker (selectedChanged)="onChange($event)" #picker></mat-datepicker>
</mat-form-field>

date-picker.component.ts：

import { Component, OnInit, Input, Output, forwardRef, EventEmitter } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

const noop = () => {
};

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => DatePickerComponent),
  multi: true
};

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.css'],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'he-IL' },
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
    CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR
  ],
})
export class DatePickerComponent implements OnInit, ControlValueAccessor {

  @Input()
  required: boolean;

  @Output()
  change: EventEmitter<Date> = new EventEmitter<Date>();

  innerValue: Date = new Date();

  //Placeholders for the callbacks which are later provided
  //by the Control Value Accessor
  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;


  //get accessor
  get value(): Date {
    return this.innerValue;
  };

  //set accessor including call the onchange callback
  set value(v: Date) {
    if (v !== this.innerValue) {
      this.innerValue = v;
    }
  }

  constructor(private adapter: DateAdapter<any>) { }

  ngOnInit() {
    this.adapter.setLocale('he');
  }

  //Occured value changed from module
  writeValue(value: any): void {
    if (value !== this.innerValue) {
      this.innerValue = value;

      //invoke value change event
      this.change.emit(this.innerValue);
    }
  }
  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

  onChange(event) {
    this.value = event;
    this.onBlur();
  }

  onBlur() {
    this.onChangeCallback(this.innerValue);
    //invoke value change event
    this.change.emit(new Date(this.innerValue));
    //this.onTouchedCallback();
  }
}

我想添加强制日期掩码的功能，例如'dd/MM/yyyy'

我找到了匹配的例子，但它用angularJS和md datepicker编写：

Angular Material Datepicker and ngMask

在Angular中实现的任何想法？

编辑：

附加现场演示，基于Vivek Doshi的好答案，由于[textMask]属性，此演示无效。

Live Demo

Answer 1

您可以在 angular2-text-mask

的帮助下实现这一目标

组件方：

public mask = {
    guide: true,
    showMask : true,
    mask: [/\d/, /\d/, '/', /\d/, /\d/, '/',/\d/, /\d/,/\d/, /\d/]
  };

模板面：

<mat-form-field>
  <input matInput [textMask]="mask" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<强> WORKING DEMO

现在你需要做的就是绑定逻辑和验证，

以下是 WORKING DEMO ，其解决方案为ControlValueAccessor。

第3次演示，包含您的代码

<强> WORKING DEMO

Answer 2

如果我了解您的问题，为什么不尝试使用pipe？像这样：

"{{yourDateModel | date: 'dd/MM/yyyy'}}"

{html date-picker组件

带有日期掩码的角度mat-datepicker

编辑：

2 个答案: