如何为日期设置 Material UI DataGrid 初始状态过滤器模型？

Question

我想渲染一个带有初始过滤器模型的 Matial UI 数据网格，因此只显示即将到来的日期。 （直到用户清除默认设置的过滤器）

在没有设置任何 initialState 的情况下加载数据网格后，我可以毫无问题地为日期创建过滤器。

但是！ 当我尝试涉及日期列的初始过滤器模型时

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

我不断收到 Uncaught TypeError: filterItem.value.match is not a function 堆栈跟踪的顶部

buildApplyFilterFn gridDateOperators.js:10
getApplyFilterFn gridDateOperators.js:62

我假设项目过滤器对象中的值属性需要某种类型转换。仍在研究，但到目前为止我在 MUI 文档中找不到任何有用的信息。 如果有人解决了这个问题，我将不胜感激朝着正确方向迈出的一步！谢谢。

我还确保我的 type 和 valueGetter 在我的列数组中得到了适当的定义。记住我想要一个 class_end_date 的初始状态过滤器模型

{
            field: 'class_start_date',
            headerName: 'Start Date',
            width: 140,  
            type: 'date',
            valueGetter: (params) => {
                return new Date(params.value)
            }
          
        },
        {
            field: 'class_end_date',
            headerName: 'End Date',
            width: 140,  
            type: 'date',
            valueGetter: (params) => {
                return new Date(params.value)
            }
        },

我也尝试过使用 dateTime 作为列类型，将 valueGetters 和 filtermodel 值中的日期格式化为 mm/dd/yyyy 格式， 我试着确保 value 属性是一个字符串

filterModel:{
               items: [{
                    columnField: 'class_end_date',
                         operatorValue: 'onOrAfter',
                         value: `${new Date()}`
               }],
           }

Answer 1

在 Datagrid Docs 这里说我们可以使用 initialState 属性初始化排序模型。

这对我有用：

initialState={{
       sorting: {
           sortModel: [{ field: "date", sort: "desc" }],
            },
          }}

希望有帮助。