Angular中NzDatePicker点击报错：无法转换Invalid Date为日期的解决方法

问题根源 #

你加载的过期日期是dd-MM-yyyy格式的字符串（比如19-07-2024），但直接把这种格式的字符串传给NzDatePicker绑定的表单控件时，JavaScript的Date构造函数无法正确解析它，导致组件内部抛出转换错误。

解决方案 #

1. 新增日期格式转换函数

在组件类里添加一个辅助函数，把dd-MM-yyyy格式的字符串转换成合法的Date对象：

parseDDMMYYYYToDate(dateStr: string): Date | null {
  if (!dateStr) return null;
  // 拆分日、月、年
  const [day, month, year] = dateStr.split('-').map(Number);
  // 注意JavaScript的月份是0-based（0=1月），所以要减1
  return new Date(year, month - 1, day);
}

2. 修改表单赋值逻辑

在setAboutFormData方法里，用上面的函数转换加载的日期字符串后再传给表单：

setAboutFormData(): void {
  const loadedObsoleteDate = this.loadedProduct?.obsolete_date;
  console.log('Loaded obsolete date:', loadedObsoleteDate);

  const parsedDate = loadedObsoleteDate ? this.parseDDMMYYYYToDate(loadedObsoleteDate) : null;
  this.aboutForm.patchValue({
    obsolete_date: parsedDate || null,
  });
}

3. 调整表单控件初始值

把obsolete_date控件的初始值改为null（更符合日期类型的空值语义）：

initializeAboutForm(): void {
  this.aboutForm = this.formBuilder.group({
    obsolete_date: new FormControl<Date | null>(null),
  });
}

4. 优化禁用日期函数（可选）

原disabledDate函数可以简化，同时处理current为null的情况：

disabledDate = (current: Date | null): boolean => {
  if (!current) return false;
  
  const yesterday = new Date();
  yesterday.setDate(yesterday.getDate() - 1);
  
  // 统一清空时分秒，避免时间部分影响日期比较
  current.setHours(0, 0, 0, 0);
  yesterday.setHours(0, 0, 0, 0);
  
  return current < yesterday;
};

原理说明 #

NzDatePicker内部依赖Date类型的值来渲染和交互，而dd-MM-yyyy不是JavaScriptDate构造函数能直接识别的标准格式（标准格式是yyyy-MM-dd或MM/dd/yyyy等），所以必须手动转换为合法的Date对象，才能让组件正常工作。

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