前端日期格式转换异常求助：如何将ISO日期转为DD-MM-YYYY格式

场景重现 #

从后端获取的leavedays数组：

var leavedays= 
[
  {"_id":"62d544ae9f22d","season":2022,"name":"LEAVEDAY1","dateFrom":"2022-07-26T00:00:00.000Z","dateTo":"2022-07-27T05:30:00.000Z"}, 
  {"_id":"62d544ec3339f22e","season":2022,"name":"LEAVEDAY2","dateFrom":"2022-07-20T00:00:00.000Z","dateTo":"2022-07-21T00:00:00.000Z"}
];

在Controller中尝试转换日期格式：

$scope.leavedays= leavedays;
for (let i = 0; i < $scope.leavedays.length; i++) {
   var dateFrom = new Date($scope.leavedays[i].dateFrom);
   var yearFrom = dateFrom.getFullYear();
   var monthFrom= dateFrom.getMonth() + 1;
   var dtFrom = dateFrom.getDate();

   if (dtFrom < 10) {
   dtFrom = "0" + dtFrom;
   }
   if (monthFrom < 10) {
   monthFrom = "0" + monthFrom;
   }
   var myDateFrom = dtFrom+"-" + monthFrom +"-"+yearFrom;
   console.log(myDateFrom);
   $scope.leavedays[i].dateFrom = myDateFrom;
}
for (let i = 0; i < $scope.leavedays.length; i++) {
    var dateTo = new Date($scope.leavedays[i].dateTo);
    var yearTo = dateTo.getFullYear();
    var monthTo= dateTo.getMonth() + 1;
    var dtTo = dateTo.getDate();

    if (dtTo < 10) {
        dtTo = "0" + dtTo;
    }
    if (monthTo < 10) {
        monthTo = "0" + monthTo;
    }
    var myDateTo = dtTo+"-" + monthTo +"-"+yearTo;
    console.log(myDateTo);
    $scope.leavedays[i].dateTo =myDateTo;
}

前端表格代码：

<tr dir-paginate="leaveday in leavedays">
      <td>{{leaveday.name}}</td>
      <td>{{leaveday.dateFrom}}</td>
      <td>{{leaveday.dateTo}}</td>
</tr>

问题：前端仍显示原始ISO格式（如2022-07-26T00:00:00.000Z），而非预期的26-07-2022。

核心原因分析 #

1. 数据不可修改：后端返回的对象可能被Angular的$http自动冻结，直接修改属性无法生效
2. 脏检查未触发：如果修改数据的操作在Angular的digest cycle之外，视图不会同步更新
3. 代码冗余：两次遍历数组属于重复操作，但不是导致格式不生效的直接原因

解决方案 #

方案1：修复Controller代码逻辑 #

先复制可编辑的数据副本，合并遍历逻辑提升效率：

// 复制原数组，避免原对象不可修改
$scope.leavedays = angular.copy(leavedays);

// 一次遍历处理两个日期字段
angular.forEach($scope.leavedays, function(day) {
    // 处理dateFrom
    const dateFrom = new Date(day.dateFrom);
    const yearFrom = dateFrom.getFullYear();
    const monthFrom = String(dateFrom.getMonth() + 1).padStart(2, '0');
    const dtFrom = String(dateFrom.getDate()).padStart(2, '0');
    day.dateFrom = `${dtFrom}-${monthFrom}-${yearFrom}`;

    // 处理dateTo
    const dateTo = new Date(day.dateTo);
    const yearTo = dateTo.getFullYear();
    const monthTo = String(dateTo.getMonth() + 1).padStart(2, '0');
    const dtTo = String(dateTo.getDate()).padStart(2, '0');
    day.dateTo = `${dtTo}-${monthTo}-${yearTo}`;
});

• 用angular.copy()生成可编辑的数组副本
• 用padStart(2, '0')替代手动判断补零，代码更简洁
• 采用angular.forEach符合AngularJS的代码风格

方案2：自定义日期过滤器（推荐） #

视图层的格式转换用过滤器更合理，无需修改原始数据：

1. 定义过滤器：

app.filter('dateFormat', function() {
    return function(dateString) {
        if (!dateString) return '';
        const date = new Date(dateString);
        const day = String(date.getDate()).padStart(2, '0');
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const year = date.getFullYear();
        return `${day}-${month}-${year}`;
    };
});

2. 前端直接调用过滤器：

<tr dir-paginate="leaveday in leavedays">
      <td>{{leaveday.name}}</td>
      <td>{{leaveday.dateFrom | dateFormat}}</td>
      <td>{{leaveday.dateTo | dateFormat}}</td>
</tr>

• 过滤器可复用在其他需要相同格式的场景
• 保留原始数据的ISO格式，不影响后续业务逻辑处理

方案3：手动触发视图更新 #

如果修改数据的操作在Angular digest cycle之外（比如异步回调），需要手动触发更新：

// 修改完数据后执行
$scope.$apply();

或者用$timeout包裹修改逻辑：

$timeout(function() {
    // 这里放置修改leavedays的代码
});

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