React Material UI DataGrid如何格式化日期为dd-mm-yyyy hh:mm

你使用的 MUI DataGrid 组件默认type: 'date'类型列只会按内置本地化规则渲染纯日期内容，无法直接输出你需要的dd-mm-yyyy hh:mm带时分的格式，只需要给对应日期列新增valueFormatter格式化属性即可实现需求，不需要修改组件全局配置。

具体修改方式 #

调整dataInici日期列的配置，新增格式化逻辑，你原来的列配置里headerName写的是ID属于笔误，可以同步改成对应日期字段的表头名称：

const columns = [
    { 
      field: 'dataInici', 
      headerName: '开始日期', // 替换为你实际需要的日期表头文案
      width: 200,   
      type: 'date',
      // 新增日期格式化逻辑
      valueFormatter: (params) => {
        if (!params.value) return '';
        const date = new Date(params.value);
        // 数字补零工具函数
        const padZero = (num) => num.toString().padStart(2, '0');
        const day = padZero(date.getDate());
        const month = padZero(date.getMonth() + 1); // 月份默认从0计数，需要+1
        const year = date.getFullYear();
        const hours = padZero(date.getHours());
        const minutes = padZero(date.getMinutes());
        return `${day}-${month}-${year} ${hours}:${minutes}`;
      }
    },
    { field: 'idSolicitud', headerName: 'id Solicitud', width: 130, },
    { field: 'decisioFrau', headerName: 'Risc', width: 130  },
    {
      field: 'importe',
      headerName: 'importe',
      type: 'number',
      width: 90,
    }
];

表格组件部分的代码不需要做任何修改，直接用原来的写法即可生效。

简化写法（项目已引入日期处理库时使用） #

如果你的项目里已经安装了dayjs/date-fns这类日期处理库，可以不用手写补零逻辑，直接调用库的格式化方法即可，以dayjs为例：

1. 先在文件顶部引入dayjs：

   import dayjs from 'dayjs';
   

2. 把列配置里的valueFormatter替换成如下写法即可：

   valueFormatter: (params) => params.value ? dayjs(params.value).format('DD-MM-YYYY HH:mm') : ''
   

注意事项 #

• 确保传入rows的dataInici字段是合法可解析的时间值：Date对象、时间戳、ISO格式时间字符串都可以正常被解析
• 保留列配置里的type: 'date'即可，不会影响表格原生的日期排序、过滤功能，valueFormatter只会修改单元格展示内容，不会改动原始行数据
• 如果需要兼容IE等不支持padStart的老旧浏览器，可以把补零函数替换为：

  const padZero = (num) => num < 10 ? '0' + num : num;
  

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