MUI DataGrid使用valueFormatter时如何在单元格编辑中保留原有日期值

在编辑MUI datagrid的「普通」日期时间单元格时，日期值会在编辑模式下保留。但如果使用valueFormatter和valueParser钩子控制渲染逻辑，编辑模式下原有日期会消失，会显示为「dd/mm/yyyy --:--」的占位格式。
请问在使用valueFormatter的前提下，如何让原有日期值在编辑模式下正常显示？

根因说明 #

MUI DataGrid 内置的日期时间编辑组件默认只能识别Date类型的输入值，valueFormatter仅作用于查看模式的单元格渲染逻辑，不会处理编辑模式下传给输入组件的原始值。如果你的列字段原始值是时间戳、ISO字符串等非Date类型，编辑组件无法正常解析就会显示占位符。

修复步骤 #

• 给对应日期列补充valueGetter钩子，提前把原始值转换成Date类型，编辑模式会优先读取valueGetter的返回值传给编辑组件，原有valueFormatter、valueParser逻辑无需修改：

const columns = [
  // 其他列配置省略
  {
    field: 'dateCreated',
    headerName: 'Date Created',
    type: 'dateTime',
    // 新增valueGetter逻辑
    valueGetter: (params) => {
      if (!params.value) return null;
      // 适配你的原始值格式，时间戳/ISO字符串都可直接用new Date转换
      return new Date(params.value);
    },
    // 原有valueFormatter保持不变，仅作用于非编辑状态的单元格显示
    valueFormatter: (params) => {
      if (!params.value) return '';
      // 你的自定义格式化逻辑，比如转成指定格式的字符串
      return params.value.toLocaleString('zh-CN');
    },
    // 原有valueParser保持不变，用于把编辑后的值转成服务端需要的存储格式
    valueParser: (value) => {
      return value ? value.toISOString() : null;
    }
  }
]

• 如果你自定义了编辑单元格组件（通过renderEditCell配置），只需手动把params.value（已经过valueGetter处理成Date类型）绑定到自定义编辑组件的value属性即可。

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