[pickers][RFC] Which examples would you like to see for the Date and Time Pickers?

[joserodolfofreitas]

Summary

Hi everyone,
In the last MUI Developer survey, we've seen multiple requests for more examples in the documentation.
We hear you, and our goal is to provide the best experience and support for your projects.

So we'd like to ask the community: Which examples would help you accomplish your real-life use cases?
Feel free to let us know if you have ideas or struggle/have struggled with any particular customization because of a lack of an example.

🗳️ Request an example

Please leave your suggestions as comments on this thread (one request per comment), and feel free to 👍 upvote any comment with an example you'd like to see prioritized.

Thank you for your participation and valuable input!

🎯 Need some guidance to formulate your request?

• Try to be as clear as possible about the goal/custom behavior you want to achieve.
• Try complementing your request with a "how to" title, summarizing what you'd like to learn from this example.
• If it's a styling/visual customization, feel free to add a visual concept.
• It can include any feature or feature combination.

You can use the following template.

---

["How to" Title]

[What I need in detail]

(Optional) [media with a visual concept]

---

📡 Example:

How can I change the adornment on the Date Picker v6?

I need to set custom adornments on the text input of the new Date Pickers to display another layer of information from my business logic.

[famoser]

How to deal with timezones if the date is independent to local time (e.g. birthday)?

Mui uses a timestamp to represent the date within the picker, which may lead to problems if you are not storing a point in time (e.g. changedAt) but an actual date (e.g. birthday). Either pass mui the date in the local timezone, and be aware that mui exposes the date in the local timezone, too (example). Or pass the date in UTC, and configure mui to work on UTC (example).

See the question here and my improved understanding after help of @LukasTy here.

[Misiu]

How can we change (customize) the view in time picker, from this (https://mui.com/x/react-date-pickers/time-picker/):

to this:

Ref: #5079

[nphmuller]

How to test the date and time pickers. The docs mention some testing caveats, but testing got way more complicated in the MUI 6 pickers.

We currently use a couple of functions that MUI uses internally via https://github.com/mui/mui-x/blob/97220aaf2964a9dcd08d6a2a263f4f1610d71a75/test/utils/pickers-utils.tsx. But it would be nice to have this properly documented. It might also be worth considering making part of these utils public. They're pretty opiniated, but they've been helping us a lot so far.

I'm looking for:

• Reading and comparing the value
• Changing the value (preferably via React Testing Library).

[Thebarda]

How to handle a different timezone and how to customize the Adapter. I know that Date management in JS is a mess but it could be to have an example about handling a specific timezone across date management libraries.