如何在Ag-Grid日期列过滤时仅比较日期排除时间部分？

问题根源 #

AG-Grid默认的日期等于过滤是精确匹配时间戳，包括时分秒。如果你选择的是某天的日期，过滤值会是当天00:00:00的时间戳，但你的数据里的Date类型带有具体时分秒，两者时间戳不一致，自然匹配不到结果。

解决方案1：自定义日期比较器（推荐） #

在列定义里配置自定义比较函数，忽略时分秒，只比较年月日：

const columnDefs = [
  {
    headerName: '日期',
    field: 'yourDateField', // 替换成你的字段名
    filter: 'agDateColumnFilter',
    filterParams: {
      comparator: (filterDate, cellValue) => {
        // 提取单元格日期的年月日，转为当天0点的时间戳
        const cellDate = new Date(cellValue);
        const cellDateMidnight = new Date(
          cellDate.getFullYear(),
          cellDate.getMonth(),
          cellDate.getDate()
        ).getTime();
        
        // 过滤值默认是当天0点的时间戳
        const filterTimestamp = filterDate.getTime();

        // 只比较年月日对应的时间戳
        if (cellDateMidnight === filterTimestamp) return 0;
        return cellDateMidnight > filterTimestamp ? 1 : -1;
      }
    }
  }
];

这个配置会让过滤逻辑只校验年月日是否一致，不管具体时分秒，完美匹配你的需求。

解决方案2：预处理数据（备选） #

如果不想写自定义逻辑，可以提前给每条数据生成一个仅含年月日的字段，用这个字段做过滤：

// 预处理原始数据，新增仅日期字段
const processedData = yourRawData.map(item => ({
  ...item,
  dateOnly: new Date(item.yourDateField.getFullYear(), item.yourDateField.getMonth(), item.yourDateField.getDate())
}));

// 列定义里指定过滤用的字段
const columnDefs = [
  {
    headerName: '日期',
    field: 'yourDateField',
    filter: 'agDateColumnFilter',
    filterField: 'dateOnly' // 用预处理后的仅日期字段过滤
  }
];

关于官方示例的说明 #

官方示例里的日期数据本身没有时分秒，所以直接用等于过滤就能匹配。你的数据带时间，必须处理时分秒的差异才能生效。

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