MUI (MaterialUI) datagrid how to preserve date in cell editing when using valueFormatter

Viewed 904

When editing a 'normal' datetime cell in MUI datagrid the date is preserved in edit mode. See green circle in image below.

However if I use the valueFormatter and valueParser hooks to control the rendering, the date disappears in edit mode and is rendered as "dd/mm/yyy --:--" (red circle).

How do I preserve the show the current date in edit mode, while using valueFormatter?

enter image description here

Here is codesandbox. Notice the difference when editingthe "DateCreated" and "Last Login" columns

1 Answers

I think you are sending an incorrect format for the lastLogin value from your rows.

If you check your rows, your are setting dateCreated with the randomCreatedDate() function, which is giving you a format like: "Fri Dec 25 2020 07:29:02 GMT+0000 (Greenwich Mean Time)" so the edit input can read that date. That's not happening for lastLogin value.

You should send the right format value for lastLogin from rows. From my understanding, valueFormatter is going to format your value before being rendered, but the format of the value is still the original one so in the edit input you are not going to see any date because the format is incorrect for that input.

Related