input输入年月日时，自动转换为yyyy年MM月dd日，提交时yyyy-MM-dd格式

date-mask.directive.ts

import {
  Directive,
  ElementRef,
  forwardRef,
  HostListener,
  OnInit,
  Renderer2
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as moment from 'moment';

/**
 * DateMaskDirective
 *
 * @export
 * @class NumberMaskDirective
 */
@Directive({
  // tslint:disable-next-line: directive-selector
  selector: 'input[dateMask]',
  exportAs: 'dateMask',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DateMaskDirective),
      multi: true
    }
  ]
})
export class DateMaskDirective implements OnInit, ControlValueAccessor {

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
  private element: HTMLInputElement;

  private displayFormat = 'YYYY年MM月DD日';

  private editFormat = 'YYYYMMDD';

  private format = 'YYYY-MM-DD';

  public _onTouched = () => {};

  public _onChange = (_: any) => {};

  /**
   * init directive
   */
  public ngOnInit(): void {
    this.element = this.elementRef.nativeElement;
  }

  /**
   * onFocus
   *
   * @param {string} value
   * @memberof NumberMaskDirective
   */
  @HostListener('focus', ['$event.target.value'])
  public onFocus(value: string): void {
    const date = moment(value, this.displayFormat, true);
    if (date.isValid()) {
      this.element.value = this.removeFormat(value, this.displayFormat);
    } else {
      this.element.value = value;
    }
  }

  /**
   * onBlur
   *
   * @param {string} value
   * @memberof NumberMaskDirective
   */
  @HostListener('blur', ['$event.target.value'])
  public onBlur(value: string): void {
    this.setValue(value);
  }

  /**
   * change
   */
  @HostListener('input', ['$event.target.value'])
  public onChange(value: string): void {
    this.setValue(value);
  }

  /**
   * setting value
   * @param value 
   */
  private setValue(value: string): void {
    const date = moment(value, this.editFormat, true);
    if (!date.isValid()) {
      this.element.value = value;
      this._onChange(value);
      this._onTouched();
      return;
    }

    this.element.value = moment(value, this.editFormat).format(
      this.displayFormat
    );
    this._onChange(moment(value, this.editFormat).format(this.format));
    this._onTouched();
  }

  /**
   * implements ControlValueAccessor
   * @param value
   */
  public writeValue(value: any): void {
    if (value === null || value === '') {
      this.element.value = '';
      return;
    }
    const date = moment(value, this.format, true);
    if (date.isValid()) {
      this.element.value = moment(value).format(this.displayFormat);
    } else {
      this.element.value = value;
    }
  }

  /**
   * implements ControlValueAccessor
   * @param fn
   */
  public registerOnChange(fn: (value: any) => any): void {
    this._onChange = fn;
  }

  /**
   * implements ControlValueAccessor
   * @param fn
   */
  public registerOnTouched(fn: () => any): void {
    this._onTouched = fn;
  }

  /**
   * remove format
   *
   * @param {string} target
   * @memberof TelNoMaskDirective
   */
  private removeFormat(target: string, format: string): string {
    return moment(target, format).format(this.editFormat);
  }

  /**
   * implements isDisabled
   * @param isDisabled
   */
  public setDisabledState(isDisabled: boolean): void {
    this.renderer.setProperty(this.element, 'disabled', isDisabled);
  }
}

input输入年月日时，自动转换为yyyy年MM月dd日，提交时yyyy-MM-dd格式