React与MUI X Data Grid中日期筛选格式异常问题

要让日期筛选器使用dd-mm-yyyy格式，仅靠valueGetter修改单元格显示是不够的，需要自定义筛选器组件并配置正确的日期解析逻辑，具体步骤如下：

1. 安装依赖（如未安装） #

如果项目中还没用到@mui/x-date-pickers和date-fns，先执行安装：

npm install @mui/x-date-pickers date-fns

2. 自定义日期筛选器组件 #

创建基于DatePicker的自定义筛选组件，强制指定日期格式为dd-MM-yyyy：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

const CustomDateFilter = ({ value, onChange }) => {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        format="dd-MM-yyyy"
        value={value ? new Date(value) : null}
        onChange={(newValue) => {
          // 将选中日期转为ISO字符串，匹配数据源格式
          onChange(newValue ? newValue.toISOString() : null);
        }}
        slotProps={{ textField: { size: 'small' } }}
      />
    </LocalizationProvider>
  );
};

3. 修改列配置 #

在lastLogin列中绑定自定义筛选器，并配置筛选操作符确保逻辑正确：

import { format } from 'date-fns';

const userColumns = [
  { field: "id", hide: true, filterable: false },
  { field: "group", headerName: "Group", flex: 1 },
  {
    field: "lastLogin",
    headerName: "Last Login",
    flex: 1,
    valueGetter: ({ value }) => value ? format(new Date(value), `dd-LL-yyyy`) : "N/A",
    type: "date",
    // 自定义筛选操作符，处理日期比较逻辑
    filterOperators: [
      {
        label: '等于',
        value: 'equals',
        getApplyFilterFn: (filterItem) => {
          if (!filterItem.value) return null;
          const filterDate = new Date(filterItem.value);
          return (row) => {
            const rowDate = new Date(row.lastLogin);
            // 仅比较年月日，忽略时分秒差异
            return rowDate.toDateString() === filterDate.toDateString();
          };
        },
      },
      {
        label: '早于',
        value: 'before',
        getApplyFilterFn: (filterItem) => {
          if (!filterItem.value) return null;
          const filterDate = new Date(filterItem.value);
          return (row) => new Date(row.lastLogin) < filterDate;
        },
      },
      {
        label: '晚于',
        value: 'after',
        getApplyFilterFn: (filterItem) => {
          if (!filterItem.value) return null;
          const filterDate = new Date(filterItem.value);
          return (row) => new Date(row.lastLogin) > filterDate;
        },
      }
    ],
    // 绑定自定义筛选组件
    filterComponent: CustomDateFilter,
  }
];

原理说明 #

• valueGetter仅负责单元格的日期显示格式，不影响筛选器的默认行为；
• 原生日期输入框的格式由浏览器区域设置控制，无法强制指定dd-mm-yyyy，因此需要用@mui/x-date-pickers的组件自定义格式；
• 配置filterOperators是为了避免因时分秒差异导致筛选结果不准确，确保仅比较日期的核心部分（年月日）。

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