如何修改MUI X Data Grid日期选择器默认格式为YYYY-MM-DD？

我正在尝试修改MUI X Data Grid日期列的默认日期显示格式。目前已通过以下代码实现选择日期后按预期的YYYY-MM-DD格式展示：

valueFormatter: (params) => moment(params?.value).format("YYYY-MM-DD"),

但我希望日期选择器也显示为YYYY-MM-DD格式，然而默认情况下它显示为dd-mm-yyyy。我想要将该初始格式文本改为YYYY-MM-DD，尝试配置format、views等属性均无效，相关列配置代码如下：

{
  field: "discussed_date",
  headerName: "Date(YYYY-MM-DD)",
  type: "date",
  editable: true,
  resizable: true,
  minWidth: 180,
  width: 180,
  format:"YYYY-MM-DD", //tried this, not working
  views:["year", "month", "day"]  //tried this not working
  // inputFormat:"YYYY/MM/DD"   
},

请问有解决方法吗？

解决方法 #

MUI X Data Grid的date类型列默认使用Material UI的DatePicker组件，要修改其输入框的显示格式，可通过以下两种方案实现：

方案1：列配置中添加editComponentProps（适用于MUI X v5+） #

直接在列配置里指定编辑组件的格式参数，无需自定义组件：

{
  field: "discussed_date",
  headerName: "Date(YYYY-MM-DD)",
  type: "date",
  editable: true,
  resizable: true,
  minWidth: 180,
  width: 180,
  valueFormatter: (params) => moment(params?.value).format("YYYY-MM-DD"),
  // 配置日期选择器的输入格式
  editComponentProps: {
    inputFormat: "YYYY-MM-DD",
    format: "YYYY-MM-DD"
  }
}

方案2：自定义编辑组件（灵活适配需求） #

如果方案1无效，可完全自定义日期选择器组件，用moment处理格式转换：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import TextField from '@mui/material/TextField';

// 列配置
{
  field: "discussed_date",
  headerName: "Date(YYYY-MM-DD)",
  type: "date",
  editable: true,
  resizable: true,
  minWidth: 180,
  width: 180,
  valueFormatter: (params) => moment(params?.value).format("YYYY-MM-DD"),
  editComponent: (params) => (
    <DatePicker
      value={params.value ? moment(params.value).toDate() : null}
      onChange={(newValue) => params.onChange(newValue)}
      inputFormat="YYYY-MM-DD"
      format="YYYY-MM-DD"
      renderInput={(inputProps) => <TextField {...inputProps} />}
    />
  )
}

注意事项 #

• 确保项目中已正确安装moment并完成配置，若使用date-fns替代moment，格式串需改为yyyy-MM-dd（符合date-fns的规则）。
• 旧版本MUI X可能需要通过全局localeText配置日期格式，但优先推荐列级别的配置方式，更灵活。

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