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

Question

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

在没有任何initialState设置的情况下加载数据网格后，为日期创建过滤器没有问题。数据网格渲染后手动设置过滤器

然而!当我尝试使用包含日期列

的初始过滤器模型时

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

我不断得到Uncaught TypeError: filterItem.value.match不是一个函数堆栈顶部

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列类型，格式化日期从valuegetter和过滤器模型值mm/dd/yyyy格式，我试着确保value属性是一个字符串

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

Answer 1

有趣的是，将今天的日期转换为yyy-mm-dd字符串就成功了。

我的看法是，当MUI valueGetter返回日期对象时，它将在过滤器中进行比较后转换回字符串。

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

WHERE formatDate是我的一个实用函数，它可以转换为'yyyy-mm-dd'

Answer 2

在Datagrid Docs中，这里说我们可以使用initialState道具初始化排序模型。

这个为我工作:

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

希望有帮助。