MUI DataGrid日期筛选异常：仅“早于”操作符无法生效

先明确核心逻辑：DataGrid的筛选是基于列的原始数据而非valueFormatter格式化后的显示值，所以优先从列配置和数据类型入手排查：

1. 确保列类型与原始数据匹配 #

如果列类型设为date/dateTime，原始数据必须是Date对象或可被new Date()正确解析的ISO格式字符串（如"2024-05-20T12:00:00Z"）。若原始数据是自定义格式（如"2024/05/20"），会导致“早于”操作符的日期比较逻辑出错。

正确列配置示例：

const columns = [
  {
    field: 'createdAt',
    headerName: '创建时间',
    type: 'dateTime', // 带时间的场景推荐用dateTime
    valueFormatter: (params) => formatDateAndTime(params.value),
    // 无需额外配置valueGetter，筛选默认使用原始行数据
  }
];

2. 修复valueGetter报错问题 #

之前用valueGetter报错，大概率是返回了格式化后的字符串而非原始日期值。valueGetter的作用是提供筛选/排序用的原始数据，正确写法：

valueGetter: (params) => {
  // 若原始数据是字符串，先转为Date对象
  return typeof params.row.createdAt === 'string' 
    ? new Date(params.row.createdAt) 
    : params.row.createdAt;
}

如果返回字符串，筛选器会按字符串规则比较而非日期逻辑，既会导致筛选失效也可能触发报错。

3. 调试“早于”操作符的比较逻辑 #

可以自定义“早于”操作符的比较函数，打印日志定位问题：

import { gridFilterOperators } from '@mui/x-data-grid';

// 复制默认操作符并修改“早于”逻辑
const customDateOperators = [...gridFilterOperators];
const beforeOpIndex = customDateOperators.findIndex(op => op.value === 'lt');
if (beforeOpIndex !== -1) {
  customDateOperators[beforeOpIndex] = {
    ...customDateOperators[beforeOpIndex],
    getApplyFilterFn: (filterItem) => {
      return (params) => {
        const rowValue = params.value;
        const filterValue = filterItem.value;
        // 打印值的类型与内容，排查是否存在Invalid Date
        console.log('行数据值:', rowValue, '筛选输入值:', filterValue);
        return rowValue < filterValue;
      };
    }
  };
}

// 列配置中使用自定义操作符
{
  field: 'createdAt',
  headerName: '创建时间',
  type: 'dateTime',
  valueFormatter: (params) => formatDateAndTime(params.value),
  filterOperators: customDateOperators,
}

4. 检查formatDateAndTime函数 #

确保该函数仅返回格式化后的字符串，不要修改传入的params.value本身——函数应该是纯函数，只做格式转换不修改原始数据。

总结 #

问题根源大概率是原始数据类型不匹配或筛选时拿到了非日期值。先确认原始数据是Date对象/ISO字符串，再确保列类型正确，避免用valueGetter返回格式化后的字符串。若仍有问题，通过自定义操作符打印日志排查具体的比较值。

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