md-data-table日期排序异常求助：MM-DD-YYYY HH:mm:ss格式未按年份排序

这个问题我之前也碰到过！根源在于md-table默认是按字符串进行排序的，你的日期格式是「MM-DD-YYYY HH:mm:ss」，字符串排序会逐字符比较——比如"01-01-2023"和"12-31-2020"，字符串层面"0"开头的会排在"1"开头的前面，完全不管后面的年份，自然就出现了不符合预期的排序结果。

解决方案：自定义日期排序函数 #

我们需要告诉md-table不要用默认的字符串比较，而是把日期转换成可比较的时间戳来排序，具体步骤如下：

1. 在你的Angular控制器中定义一个自定义排序函数
   这个函数会接收两行数据，把日期字符串转换成标准的Date对象，再通过时间戳进行比较：

   $scope.customDateSort = function(rowA, rowB) {
     // 拆分日期和时间部分，处理成浏览器能正确解析的格式
     const parseDateString = (dateStr) => {
       const [datePart, timePart] = dateStr.split(' ');
       // 把MM-DD-YYYY转为YYYY-MM-DD，保证Date解析正确
       const [month, day, year] = datePart.split('-');
       return new Date(`${year}-${month}-${day}T${timePart}`);
     };
   
     const dateA = parseDateString(rowA.yourDateColumnName);
     const dateB = parseDateString(rowB.yourDateColumnName);
   
     // 返回时间戳差值，实现正确的升序/降序排序
     return dateA.getTime() - dateB.getTime();
   };
   

   记得把yourDateColumnName替换成你实际的日期列字段名。

2. 在md-table的表头单元格中指定这个排序函数
   修改你的HTML代码，在对应日期列的md-header-cell上添加md-order-by="customDateSort"：

   <md-table-container> 
     <table md-table md-row-select="options.rowSelection" multiple="{{options.multiSelect}}" ng-model="selected" md-progress="promise"> 
       <thead ng-if="!options.decapitate" md-head md-order="query.order" md-on-reorder="logOrder"> 
         <md-row>
           <!-- 其他表头列 -->
           <md-header-cell md-order-by="customDateSort">日期</md-header-cell>
           <!-- 其他表头列 -->
         </md-row>
       </thead>
       <!-- 表格主体部分 -->
     </table>
   </md-table-container>
   

为什么这样有效？ #

md-table的md-order-by属性不仅可以接收字段名，还能接收自定义比较函数。这个函数返回的差值会告诉排序算法两行数据的先后顺序：

• 返回负数：rowA排在rowB前面
• 返回0：两行排序优先级相同
• 返回正数：rowB排在rowA前面

这样排序就会基于日期的实际时间值，而不是字符串的字符顺序，自然就能正确包含年份进行排序了。

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