Angular Kendo Grid日期列排序未区分AM/PM的问题

你遇到的这个问题，核心原因大概率是Kendo Grid在排序时把StartTime当成了字符串处理，而非真正的Date对象——字符串排序是按字符顺序比对的，比如"10:00 AM"会被判定为比"02:00 PM"大，但实际日期时间里下午的02点肯定比上午10点晚，自然就出现了排序错位的情况。

下面是针对性的解决步骤，一步步来调整：

1. 确保StartTime是真正的Date对象 #

先检查你的数据来源：如果后端返回的是字符串格式的日期（比如ISO字符串或者"MM/dd/yyyy hh:mm tt"格式），一定要在绑定到Grid前转换成Date对象。比如在获取数据后做转换：

// 假设你从API获取到数据列表
this.summaryData = apiResponse.map(item => ({
  ...item,
  // 把字符串转成Date对象
  StartTime: new Date(item.StartTime)
}));

哪怕模型里定义的是Date类型，实际运行时如果后端返回的是字符串，不做转换的话，变量本质还是字符串，这会导致Kendo用错误的排序逻辑。

2. 在Grid列定义中明确指定日期类型 #

在Kendo Grid的列配置里，告诉Grid这个字段是日期类型，让它启用日期专属的排序规则：

<kendo-grid 
  [data]="summaryData" 
  [sort]="sort"
  (sortChange)="sort = $event"
>
  <!-- 其他列配置... -->
  <kendo-grid-column
    field="StartTime"
    title="Start Time"
    type="date" <!-- 关键：指定字段类型为date -->
    format="{0:MM/dd/yyyy hh:mm tt}" <!-- 按你需要的格式展示日期 -->
  >
  </kendo-grid-column>
</kendo-grid>

指定type="date"后，Kendo会自动用Date对象的时间戳来做比较，AM/PM的时间差异就能被正确识别了。

3. 自定义排序比较器（兜底方案） #

如果上面两步还没解决问题，可以给SortDescriptor添加自定义比较函数，强制按时间戳排序：

import { SortDescriptor } from '@progress/kendo-data-query';

public sort: SortDescriptor[] = [{
  field: 'StartTime',
  dir: 'asc',
  compare: (a, b) => {
    // 确保两个值都被转为Date对象
    const dateA = new Date(a.StartTime);
    const dateB = new Date(b.StartTime);
    // 用时间戳差值判断排序顺序
    return dateA.getTime() - dateB.getTime();
  }
}];

这个函数直接对比两个日期的时间戳，完全不受字符串格式影响，能彻底解决排序逻辑问题。

快速排查小技巧 #

• 可以在组件里打印typeof summaryData[0].StartTime，确认是不是"object"（Date对象的类型是object），如果是"string"，那第一步的转换就是必须的。
• 检查Grid的[data]绑定的是不是已经转换好Date对象的数组，而非原始的字符串数组。

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