[question] [data grid] How to specify a format for date inputs?

[theobrasseurbentley]

The problem in depth

My locale is en-gb. Dates in edit cells are formatted with dd/MM/yyyy.

How do I specify another format?

Live example: https://codesandbox.io/p/sandbox/gallant-roentgen-l2k5wc?file=%2Fsrc%2FApp.tsx

Your environment

Browser: Edge

npx @mui/envinfo Need to install the following packages: @mui/envinfo@2.0.19 Ok to proceed? (y) y

System: OS: Windows 11 10.0.22631 Binaries: Node: 18.17.0 - C:\Program Files\nodejs\node.EXE npm: 9.6.6 - ~\OpenGround\Repos\react-portal\node_modules.bin\npm.CMD pnpm: Not Found Browsers: Chrome: 123.0.6312.123 Edge: Chromium (123.0.2420.97) npmPackages: @emotion/react: 11.10.6 @emotion/styled: 11.10.6 @mui/base: 5.0.0-alpha.96 @mui/core-downloads-tracker: 5.12.2 @mui/icons-material: 5.11.16 @mui/material: ^5.10.15 => 5.12.2 @mui/private-theming: 5.12.0 @mui/styled-engine: 5.12.0 @mui/system: 5.12.1 @mui/types: 7.2.4 @mui/utils: 5.15.14 @mui/x-data-grid: 6.16.3 @mui/x-data-grid-premium: ^6.16.3 => 6.16.3 @mui/x-data-grid-pro: 6.16.3 @mui/x-date-pickers: ^6.11.0 => 6.11.0 @mui/x-license-pro: ^6.0.0-beta.3 => 6.10.2 @mui/x-tree-view: ^6.0.0-alpha.1 => 6.0.0-alpha.1 @types/react: ^18.0.21 => 18.2.0 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ^5.3.3 => 5.3.3

Search keywords: date edit cell format Order ID: 82553

[michelengelen]

Hey @theobrasseurbentley your codesandbox is private... could you make it public so we can have a look? Thanks! 🙇🏼

[theobrasseurbentley]

oops... made public

[michelengelen]

OK, thanks! You are basically doing it right. The valueFormatter can be used to format the value. If you just want to use the standard locale format you can use toLocaleDateString() from the date object:

valueFormatter(value) {
  const dateValue: Date = value;
  return dateValue.toLocaleDateString("en-gb");
}

You can split the parts just as you did before:

valueFormatter(value, row, column) {
  const dateValue: Date = value;
  return `${dateValue.getDate()}/${dateValue.getMonth() + 1}/${dateValue.getFullYear()}`;
},

[!NOTE]
Date.prototype.getMonth() will return 0 for January, 1 for February, ... So make sure to add +1 to it whenever you are using it on its own

Or you can use a date library, e.g. luxon, if you want more formatting options: You can split the parts just as you did before:

valueFormatter(value, row, column) {
  const dt: DateTime = DateTime.fromJSDate(value);
  return dt.toFormat('dd - MM - yyyy / HH:mm');
},

Does that help you?

[theobrasseurbentley]

Thank you michelengelen!

How about when the cell is in edit mode?

[michelengelen]

For that you would have to create your custom edit cell, since the existing input will use the browser default.

afaik there is currently no recipe availabe that shows how to implement our DatePicker component, but with the existing ones this should be doable. Take this as an example: Custom edit component

If you need help implementing that feel free to reach out.

[theobrasseurbentley]

That works Thank you!

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@theobrasseurbentley: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.