React AG Grid 自定义日期时间排序（格式MM/DD/YYYY ##:##AM/PM）

AI 小北

2026-8-18

React AG Grid 日期时间排序问题解决方法

你的问题出在AG Grid默认按字符串规则排序，而日期时间字符串的字符顺序和实际时间顺序不匹配（比如"7:00PM"的字符排序会在"8:00AM"之前，但实际时间更晚）。以下是两种解决方法：

方法一：转换为Date对象（推荐）

在渲染表格前，把日期时间字符串转换成JavaScript的Date对象，AG Grid会自动按时间戳排序，确保日期和时间都正确排序。

数据处理代码

// 原始数据
const rawData = [
  { dateTime: "10/31/2022  8:00AM" },
  { dateTime: "12/31/2022  4:59PM" },
  { dateTime: "12/12/2022  3:00PM" },
  { dateTime: "10/31/2022  7:00PM" },
  { dateTime: "10/31/2022  7:00AM" },
];

// 转换为Date对象，保留原始字符串用于显示
const processedData = rawData.map(item => ({
  ...item,
  dateTimeObj: new Date(item.dateTime)
}));

列定义配置

const columnDefs = [
  {
    headerName: "日期时间",
    field: "dateTimeObj", // 按Date对象排序
    sortable: true,
    valueFormatter: params => params.data.dateTime // 显示原始日期时间字符串
  }
];

方法二：自定义排序器

如果无法提前转换数据，可以给列添加comparator函数，手动解析字符串并比较时间戳：

列定义配置

const columnDefs = [
  {
    headerName: "日期时间",
    field: "dateTime",
    sortable: true,
    comparator: (valueA, valueB) => {
      // 解析字符串为Date对象并获取时间戳
      const timeA = new Date(valueA).getTime();
      const timeB = new Date(valueB).getTime();
      // 降序排序返回 timeB - timeA，升序则返回 timeA - timeB
      return timeB - timeA;
    }
  }
];