在MUI DataGrid中格式化日期

Question

如何将MUI DataGrid中的日期数据从mongo格式格式化为moment格式

我还想包含一个额外的字段与编辑图标，当点击时，将重定向到编辑页面

这是我的。

const columns = [
{ field: 'createdAt', headerName: 'Join Date', width: 100 },
{ field: *****, headerName: 'Edit', width: 120 }
]

我得到的输出是2022-04-03T09:24:40.199Z。我想用moment.js格式化它。我怎样才能做到这一点呢?

是否可以包含编辑图标并传递所单击项的id

由于该字段包含由字符串表示的数据库中的数据。我尝试过模板字面量。

Answer 1

尝试在createdAt字段对象中添加valueFormatter属性，如下面的代码所示。这应该能解决你的问题。

const columns = [
...
{ 
field: 'createdAt', 
headerName: 'Join Date', 
width: 100,
valueFormatter: params => 
moment(params?.value).format("DD/MM/YYYY hh:mm A"),
},
...
]

您还可以在本文档中找到更多关于DataGrid单元格定制的信息:

https://mui.com/x/react-data-grid/column-definition/rendering-cells

Answer 2

对于轻量级dayjs，您可以采用Be Munin的答案

const columns = [
...
{ 
field: 'createdAt', 
headerName: 'Join Date', 
width: 100,
valueFormatter: params => 
valueFormatter: (params) => dayjs(params.value).format('DD/MM/YYYY'),
},
...
]