如何为Material UI DataGrid设置日期类型初始筛选模型？

问题根源 #

你遇到的filterItem.value.match is not a function错误，核心原因是DataGrid的日期筛选器内部要求筛选值为ISO 8601格式的字符串，而你传入的new Date()是Date对象，组件无法对其执行字符串的match方法，进而抛出错误。手动设置筛选时组件会自动完成格式转换，但初始状态需要你手动指定符合要求的格式。

修正方案 #

将初始筛选模型中的value改为ISO格式字符串，通过new Date().toISOString()生成：

initialState = {{
  filter: {
    filterModel: {
      items: [{
        columnField: 'class_end_date',
        operatorValue: 'onOrAfter',
        value: new Date().toISOString()
      }],
    }
  }
}}

额外验证点 #

1. 保持列配置中的type: 'date'不变，你的valueGetter返回Date对象是正确的，组件会自动将其转换为内部处理所需的格式。
2. 若使用dateTime类型，同样需要传入包含时间的ISO字符串（new Date().toISOString()本身就包含时间部分），无需额外修改格式。
3. 避免使用自定义日期格式（如mm/dd/yyyy），因为DataGrid默认的日期运算符仅支持ISO格式字符串的匹配逻辑。

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