[docs] Using data grid with date pickers

[cherniavskii]

Closes #4909 until we provide out of the box support for pickers in data grid

Preview: https://deploy-preview-5053--material-ui-x.netlify.app/x/react-data-grid/editing/#usage-with-mui-x-date-pickers

• Use DatePicker for date column type
• Use DatePicker for date column filter input
• Use DateTimePicker for dateTime column type
• Use DateTimePicker for dateTime column filter input

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	251.9	423.8	384.1	344.5	71.977
Sort 100k rows	ms	455.7	827.1	682.2	661.88	125.42
Select 100k rows	ms	99.7	188.7	176.8	143.8	33.773
Deselect 100k rows	ms	102.1	205	197	173.64	39.243

Generated by 🚫 dangerJS against cc8e020

[m4theushw]

The date formats between view mode and edit are different. In view mode I see the dates as dd/mm/YYYY (same as new Date().toLocaleDateString()), but on edit mode it's mm/dd/YYYY). I think we should provide some instructions explaining that the date format must be changed according to the locale, or find a way to make it work automatically. Related to https://mui.com/x/react-date-pickers/localization/#date-engine-locale

[cherniavskii]

Nice catch! I've used dateAdapter in valueFormatter to make sure data formats are the same in view and edit mode, even when locale is changed

[m4theushw]

Great, could you add a warning saying that the import must be changed to change the date format?

[cherniavskii]

Done

[m4theushw]

Awesome!

There's only one detail left. The calendar button is overflowing and causing scrollbars. Increasing the right margin of the [aria-label="Choose date"] element seems to fix it.

[joserodolfofreitas]

This is looking great! 👌

[oliviertassinari]

As a side note, the font size in the textbox looks off the expected design values from the theme for native and non native date pickers:

https://deploy-preview-5053--material-ui-x.netlify.app/x/react-data-grid/editing/#making-a-column-editable

https://deploy-preview-5053--material-ui-x.netlify.app/x/react-data-grid/editing/#usage-with-mui-x-date-pickers

[cherniavskii]

@oliviertassinari Nice catch!

[Manisha11sep]

@cherniavskii @cherniavskii Was it released? I am using v6 version of MUI but still, the date filter uses a native date picker from the browser.
This is from safari