Angular 2中实现YYYY/MM/DD日期输入及解决输入报错问题

咱们先理清核心问题：原生HTML date 类型输入框只支持YYYY-MM-DD格式的输入和显示，但你的API需要的是YYYY/MM/DD格式，同时你当前的DateValueAccessor指令只做了Date对象与原生输入框的基础绑定，缺少格式转换逻辑，这就导致了输入时的格式冲突和报错。

问题根源分析 #

1. 原生date输入框的valueAsDate属性要求传入Date对象，但如果你的API返回的是YYYY/MM/DD格式的字符串，直接赋值会导致Date构造函数解析失败（部分浏览器不支持这种格式的解析），进而抛出错误。
2. 当用户在输入框中选择或输入日期时，原生控件返回的是YYYY-MM-DD格式的字符串或Date对象，而你的API需要YYYY/MM/DD格式，这部分转换逻辑缺失。

修正后的DateValueAccessor指令 #

我们需要给指令增加双向格式转换逻辑：从API到输入框时，把YYYY/MM/DD字符串转换成Date对象；从输入框到API时，把Date对象转换成YYYY/MM/DD格式的字符串。

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

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

@Directive({
  selector: '[useValueAsDate]',
  providers: [DATE_VALUE_ACCESSOR]
})
export class DateValueAccessor implements ControlValueAccessor {
  @HostListener('input', ['$event.target.valueAsDate']) 
  onChange = (_: Date) => { };

  @HostListener('blur', []) 
  onTouched = () => { };

  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) { }

  // 将API的YYYY/MM/DD字符串或Date对象转换成输入框可识别的Date对象
  writeValue(value: string | Date): void {
    let dateValue: Date | null = null;
    if (value) {
      if (typeof value === 'string') {
        // 处理YYYY/MM/DD格式的字符串，转换成Date对象（注意月份是0-based）
        const [year, month, day] = value.split('/').map(Number);
        dateValue = new Date(year, month - 1, day);
      } else {
        dateValue = value;
      }
    }
    this._renderer.setProperty(this._elementRef.nativeElement, 'valueAsDate', dateValue);
  }

  // 将输入框的Date对象转换成API需要的YYYY/MM/DD格式字符串
  registerOnChange(fn: (_: string) => void): void {
    this.onChange = (date: Date) => {
      if (date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const formattedDate = `${year}/${month}/${day}`;
        fn(formattedDate);
      } else {
        fn('');
      }
    };
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
  }
}

关键修改点说明 #

• writeValue方法：新增了对YYYY/MM/DD字符串的解析逻辑，将其转换成符合要求的Date对象（注意月份是0-based，所以要减1），再赋值给输入框的valueAsDate。
• registerOnChange方法：把输入框返回的Date对象转换成YYYY/MM/DD格式的字符串，传给表单控件，这样提交给API时格式就完全匹配了。
• 替换了已废弃的Renderer为Angular 4+推荐使用的Renderer2，避免版本兼容问题。

组件端注意事项 #

1. 确保表单控件的初始值如果来自API，格式是标准的YYYY/MM/DD字符串，指令会自动将其转换成Date对象显示在输入框中。
2. 提交表单时，表单控件的值已经是YYYY/MM/DD格式的字符串，可以直接传给API，无需额外转换。

报错解决 #

你遇到的错误大概率是因为直接把YYYY/MM/DD字符串赋值给了valueAsDate，导致Date构造函数解析失败。上面的指令已经处理了这种情况，将字符串转换成了正确的Date对象，能直接解决该报错。

内容的提问来源于stack exchange，提问作者T M