MUI DataGridPremium筛选运算符查询：需实现日期筛选功能

完整筛选运算符列表 #

按数据类型分类如下：

文本/字符串类型 #

• is：等于指定值
• isNot：不等于指定值
• contains：包含指定子串
• notContains：不包含指定子串
• startsWith：以指定子串开头
• endsWith：以指定子串结尾
• isEmpty：值为空
• isNotEmpty：值不为空

数字类型 #

• is：等于指定数值
• isNot：不等于指定数值
• greaterThan：大于指定数值
• greaterThanOrEqual：大于等于指定数值
• lessThan：小于指定数值
• lessThanOrEqual：小于等于指定数值
• isEmpty：值为空
• isNotEmpty：值不为空

日期/时间类型 #

• is：等于指定日期
• isNot：不等于指定日期
• isAfter：晚于指定日期
• isOnOrAfter：等于或晚于指定日期
• isBefore：早于指定日期
• isOnOrBefore：等于或早于指定日期
• isEmpty：值为空
• isNotEmpty：值不为空

布尔类型 #

• is：等于指定布尔值（传入"true"或"false"字符串）

日期筛选：显示今日及之后的行解决方案 #

isOnOrAfter是符合需求的正确运算符，问题在于value的格式——MUI DataGrid要求日期筛选值为ISO格式字符串（如"2024-05-20"），而非xx/xx/xxxx这类自定义格式。

修正后的代码示例 #

import { DataGridPremium, GridToolbar } from '@mui/x-data-grid-premium';

// 获取今日的ISO格式日期字符串（仅保留日期部分）
const today = new Date().toISOString().split('T')[0];

<DataGridPremium
  columns={columns}
  rows={rows}
  getRowId={getRowId}
  slots={{
    toolbar: GridToolbar,
  }}
  density="compact"
  initialState={{
    filter: {
      filterModel: {
        items: [
          {
            field: "isActive",
            operator: "is",
            value: "true",
          },
          {
            field: "plannedDate",
            operator: "isOnOrAfter",
            value: today,
          },
        ],
      },
    },
  }}
/>

关键注意点 #

• 确保plannedDate字段存储的是可被DataGrid正确解析的日期格式（推荐ISO格式）。
• 若plannedDate为时间戳，需先转换为ISO格式字符串再传入筛选条件。

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