search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.52k stars 1.31k forks source link

[DatePicker] Add Delete Window Button (`×`) to top-right #5898

Open eggplants opened 2 years ago

eggplants commented 2 years ago

Duplicates

Latest version

Summary 💡

To close DatePicker, users have to click background, press ESC, or select a date.

I would like to add delete window button (× like ClearIcon) to the top right of DatePicker.

Examples 🌈

ex

Motivation 🔦

I thought about adding a button like "Close" to the ActionsBar, but I think it would be more user-friendly to have an × button in the top right or left corner, like a widget of a desktop app. There did not seem to be a Slot to add one at this time, so I created this issue.

Order ID 💳 (optional)

No response

flaviendelangle commented 2 years ago

Right now I don't think you have an easy way of doing it

You could copy paste the DatePickerToolbar component to create your own and add the icon on it And then use the ToolbarComponent prop of DatePicker to pass your custom component. But that would force you to duplicate a lot of our logic.

In the future, I think we should at least extract the dateText useMemo` to avoid forcing people to duplicate this logic.