Angular 8中input type date绑定.NET Core返回的带T的Date值为何不显示？

我之前也碰到过完全一样的问题，核心是HTML日期输入框、.NET Core序列化和Angular绑定之间的格式匹配问题，咱们一步步来解决：

问题根源 #

HTML的<input type="date">只认可纯日期的ISO 8601格式字符串（YYYY-MM-DD），但.NET Core默认会把DateTime序列化为带时间后缀的格式（比如2024-05-20T00:00:00）。虽然Angular的[(ngModel)]支持绑定Date对象，但直接把带时间的后端响应赋值给dayValue时，这个Date对象的完整格式包含时间部分，导致输入框无法解析识别。而手动选择日期时，ngModel会自动把选中的日期转换为不带多余时间的Date对象，所以能正常显示。

解决方案 #

有两种实用的处理方式，你可以根据项目情况选择：

1. 后端统一处理（推荐，减少前端重复逻辑） #

在.NET Core的DayDTO类中，给DayValue字段添加序列化配置，让它只返回纯日期部分：

using Newtonsoft.Json;
using Newtonsoft.Json.Converters;

public class DayDTO 
{
    public int Id { get; set; }
    public string Name { get; set; }
    
    [JsonConverter(typeof(IsoDateTimeConverter), "yyyy-MM-dd")]
    public DateTime DayValue { get; set; }
}

这样后端返回的dayValue就会是2024-05-20这种纯日期格式，Angular接收后直接绑定就能正常显示。

2. 前端处理（适合无法修改后端的场景） #

在Angular组件拿到后端响应后，手动截断时间部分再赋值：

// 假设res是从.NET Core接口获取的响应数据
if (res.dayValue) {
    // 拆分字符串，只保留日期部分再转换为Date对象
    this.day.dayValue = new Date(res.dayValue.split('T')[0]);
}

或者给DayDTO类添加getter/setter自动处理格式：

export class DayDTO {
  id: number;
  name: string;
  private _dayValue: Date;

  get dayValue(): Date {
    return this._dayValue;
  }

  set dayValue(value: Date | string) {
    if (typeof value === 'string') {
      // 处理后端带T后缀的日期字符串
      const dateOnly = value.split('T')[0];
      this._dayValue = new Date(dateOnly);
    } else {
      this._dayValue = value;
    }
  }
}

这样不管是手动输入还是后端赋值，dayValue都会被处理成符合输入框要求的格式。

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