AngularJS CRUD应用日期存储与查询格式不匹配问题求助

我来帮你梳理下这个日期匹配的核心问题：前端显示/搜索用的日期格式和数据库返回的Date字段格式不统一，导致过滤器无法匹配。咱们一步步来解决：

问题根源分析 #

• 数据库存储的日期格式正确，但后端接口返回的Rec.Date是JSON序列化后的特殊格式（类似/Date(1620000000000)/），你之前用slice(6,-2)提取时间戳来格式化显示，但这个处理只作用于视图，并没有修改数据源里的字段格式。
• 你的DatePicker生成的changeDate是DD/MM/YYYY格式的字符串，而filter: {Date:changeDate}是直接做字符串匹配，自然无法和原始的JSON日期格式匹配。

解决方案（两种可选方案） #

方案1：后端统一返回日期格式（推荐） #

最省心的方式是让后端接口/Reclamations/ReclamationsList直接返回可读的标准日期字符串（比如DD/MM/YYYY），这样前端无需额外处理。

如果是ASP.NET技术栈，可以在WebApi配置中设置JSON序列化的日期格式：

// 在WebApiConfig.cs中添加配置
config.Formatters.JsonFormatter.SerializerSettings.DateFormatString = "dd/MM/yyyy";

配置后，后端返回的Date字段会直接是dd/MM/yyyy格式的字符串，前端显示和搜索可以直接使用该字段，无需任何转换。

方案2：前端统一格式化日期（无法修改后端时使用） #

如果后端无法调整，就在前端拿到数据后，统一把原始的JSON日期格式转换成标准字符串，确保显示和搜索用的是同一个格式：

步骤1：修改控制器中的数据处理逻辑

在ReclamationsByDateController.js的GetAllReclamations函数中，遍历返回的数据，统一格式化Date字段：

function GetAllReclamations() {
    var getRecData = ReclamationsByDateService.getReclamations();
    getRecData.then(function (reclamation) {
        // 遍历数据，将JSON日期格式转为标准dd/MM/YYYY字符串
        $scope.reclamations = reclamation.data.map(function(rec) {
            // 提取时间戳并格式化
            var timestamp = parseInt(rec.Date.slice(6, -2));
            rec.formattedDate = moment(timestamp).format("DD/MM/YYYY");
            return rec;
        });
    }, function () {
        alert('Error in getting reclamations records');
    });
}

步骤2：修改视图的显示与过滤逻辑

• 表格中显示格式化后的日期：

<td style="font-size: small; color:red;"><strong>{{Rec.formattedDate}}</strong></td>

• 搜索过滤时匹配格式化后的字段：

<tr ng-repeat="Rec in reclamations | filter: {formattedDate:changeDate}" 
    ng-class-odd="'odd'" ng-class-even="'even'" 
    ng-style="{ 'background-color' : (Rec.Status == 'Pending') ? 'orange' : 'null' }">

额外优化：DatePicker组件冲突处理 #

你当前的input type="date"是HTML5原生日期控件，和AngularUI的datepicker-popup可能存在冲突，建议统一使用AngularUI的日期选择器，把input类型改为text：

<input type="text" class="form-control" 
       datepicker-popup="{{format}}" ng-model="dt" 
       is-open="opened" min-date="minDate" max-date="'2015-06-22'" 
       ng-change="changeSelect(dt)" date-disabled="disabled(date, mode)" 
       ng-required="true" close-text="Close" />

总结 #

核心思路就是让用于显示的日期和用于搜索过滤的日期格式完全一致：要么后端统一返回标准格式，要么前端在数据加载时统一转换格式，这样Angular的过滤器就能正确匹配结果了。

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