AngularJS ui-grid日期输入格式不匹配报错问题求助

这个问题我之前也踩过坑，核心原因很明确：Angular的<input type="date">组件对ngModel的绑定值有严格要求——它必须是JavaScript Date对象，但你服务器返回的是2018-01-31这样的字符串，这就直接触发了ngModel:datefmt格式错误。你之前加的type: 'date'和cellFilter没用，是因为前者只是ui-grid的列类型标记（用于排序等逻辑），后者只会作用于单元格的显示内容，不会改变MODEL_COL_FIELD的实际数据类型。

下面给你几个实用的解决方案，按推荐优先级排序：

方案一：预处理服务器数据（最推荐） #

在把数据赋值给ui-grid之前，遍历每条记录，将日期字符串转换为Date对象。这样整个数据模型的类型统一，后续的绑定和过滤都会正常工作：

// 假设你从服务器拿到的响应数据是response.data
response.data.forEach(item => {
  // 注意：确保服务器返回的是ISO格式字符串（yyyy-MM-dd），new Date才能正确解析
  item.startDate = new Date(item.startDate);
  // 如果遇到时区导致日期偏移的问题，可以改成：
  // item.startDate = new Date(`${item.startDate}T00:00:00`);
});

// 再赋值给ui-grid的data属性
$scope.gridOptions.data = response.data;

处理完后，你的单元格模板不需要修改，input[type="date"]能直接绑定Date对象，同时cellFilter: 'date:"yyyy-MM-dd"'也会生效（如果需要纯显示的场景）。

方案二：在单元格模板中用Getter/Setter处理类型转换 #

如果不想修改原始服务器数据，可以通过ng-model-options的getterSetter功能，在模板中完成字符串和Date对象的双向转换：

首先修改你的单元格模板：

const dateCellTemplate = `
<div>
  <input type="date" 
         ng-model="grid.appScope.dateConverter(row.entity.startDate)" 
         ng-change="grid.appScope.saveEdit(row)"
         ng-model-options="{ getterSetter: true }">
</div>
`;

然后在你的控制器中定义dateConverter方法，作为ngModel的 getter 和 setter：

$scope.dateConverter = function(dateValue) {
  // Getter：把字符串转成Date对象给input绑定
  if (angular.isString(dateValue)) {
    return new Date(dateValue);
  }
  // Setter：把修改后的Date对象转回字符串，存回数据实体
  else if (dateValue instanceof Date) {
    // 格式化为yyyy-MM-dd的字符串
    const year = dateValue.getFullYear();
    const month = String(dateValue.getMonth() + 1).padStart(2, '0');
    const day = String(dateValue.getDate()).padStart(2, '0');
    this.row.entity.startDate = `${year}-${month}-${day}`;
    return dateValue;
  }
  return null;
};

这个方法会在input读取值时把字符串转成Date，在用户修改后把Date转回字符串存回数据，完美适配你的编辑需求。

补充注意事项 #

• 确保服务器返回的日期字符串是标准ISO格式（yyyy-MM-dd），否则new Date()可能解析出错
• 如果遇到时区导致的日期偏移问题（比如转成Date后变成前一天），可以在构造Date时加上T00:00:00强制使用本地时区的零点
• ui-grid的type: 'date'可以保留，它会让列的排序逻辑按照日期类型处理，更准确

内容的提问来源于stack exchange，提问作者Hola Soy Edu Feliz Navidad