从SQL Server向Angular JS赋值日期的解决方案咨询

我刚接触AngularJS的时候也踩过这个坑！HTML5的date类型输入框对绑定的格式要求特别苛刻，必须是**YYYY-MM-DD格式的纯字符串**，而MS SQL Server返回的DATETIME数据，要么是带时分秒的完整日期字符串，要么是一个嵌套了date属性的对象（就像你尝试的response.data[0].end_date.date），直接赋值肯定无法被输入框识别。

下面是我亲测有效的解决方案：

第一步：先明确返回数据的类型 #

先在控制台打印一下返回的日期数据，确认它的结构：

console.log(response.data[0].end_date);

• 如果打印结果是一个Date对象，直接处理即可；
• 如果是类似{ date: "2024-05-20T00:00:00.000Z", ... }的对象，就需要先提取date属性再转换；
• 如果是带时分秒的字符串（比如"2024-05-20 14:30:00"），也要先转成Date对象再处理。

第二步：编写日期格式化工具函数 #

写一个通用函数，把各种格式的日期转换成HTML5 date输入框需要的YYYY-MM-DD格式：

function formatDateForInput(date) {
  if (!date) return '';
  
  // 处理带date属性的嵌套对象
  if (date.date) {
    date = new Date(date.date);
  } 
  // 处理字符串类型的日期
  else if (!(date instanceof Date)) {
    date = new Date(date);
  }
  
  // 格式化年、月、日（注意月份是从0开始的，要+1，且补零）
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  
  return `${year}-${month}-${day}`;
}

第三步：赋值给$scope变量 #

在获取到后端数据后，用这个工具函数处理后再赋值：

$scope.end_date = formatDateForInput(response.data[0].end_date);

第四步：优化HTML代码 #

HTML里的value="{{end_date}}"可以去掉，因为ng-model已经实现了双向绑定，同时存在反而可能导致冲突，简化后的代码：

<input type="date" id="end_date" ng-model="end_date" />

额外注意：时区问题 #

如果你的SQL Server存储的是UTC时间，转换时可能需要调整为本地时间，或者根据业务需求处理时区偏移。如果不需要时区转换，上面的函数就足够用了。

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