[DatePicker] 'clearable' prop has no effect.
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
<DatePicker label="Basic example" value={value} onChange={(newValue) => { setValue(newValue); }} clearable={true} renderInput={(params) => <TextField {...params} />} />
The above implementation does not add any clear button whatsoever.
Expected behavior 🤔
A clear action button should be added somewhere and that button should clear the date inputs value.
Steps to reproduce 🕹
Steps:
- Import DatePicker.
- Use DatePicker normally and add
clearable={true}
. - See no difference with or without
clearable
prop. - Example: https://codesandbox.io/s/basicdatepicker-material-demo-forked-k4p8z?file=/demo.js
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
System:
OS: macOS 11.6
Binaries:
Node: 14.18.0 - ~/.nvm/versions/node/v14.18.0/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.15 - ~/.nvm/versions/node/v14.18.0/bin/npm
Browsers:
Chrome: 97.0.4692.71
Edge: 97.0.1072.62
npmPackages:
@mui/base: 5.0.0-alpha.64
@mui/icons-material: 5.0.4 => 5.0.4
@mui/lab: 5.0.0-alpha.64 => 5.0.0-alpha.64
@mui/material: 5.2.8 => 5.2.8
@mui/private-theming: 5.2.3
@mui/styled-engine-sc: 5.0.0
@mui/system: 5.2.8
@mui/types: 7.1.0
@mui/utils: 5.2.3
@types/react: 17.0.21 => 17.0.21
react: 17.0.2 => 17.0.2
react-dom: 17.0.2 => 17.0.2
styled-components: 5.3.1 => 5.3.1
typescript: 4.4.3 => 4.4.3
Issue Analytics
- State:
- Created 2 years ago
- Comments:17 (8 by maintainers)
Top Results From Across the Web
How can I clear MUI DatePicker input? - Stack Overflow
Store a date field in state, passed as the value prop to DatePicker; Change the date to null when desired to 'clear' the...
Read more >DatePicker API - MUI X
Name Type Default
onChange * func
renderInput * func
acceptRegex RegExp /\dap/gi
Read more >The Ultimate MUI v5 DatePicker and TimePicker Tutorial (Plus ...
How can I clear the MUI DatePicker? The clearable prop is no longer an option on the Material-UI DatePicker. Instead, add a Button...
Read more >Configuration | Vue 3 Datepicker - GitHub Pages
The component behaves as close to Vue 3 documentation on custom component inputs as possible, using modelValue prop and update:modelValue event pair.
Read more >Date Picker - Components - Paste: The Design System for ...
If the Date Picker has associated help text or error text, include the aria-describedby prop on the Date Picker. This should match the...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Ok, this is improving the feature that is already implemented. Worth creating a new issue for it. cc @flaviendelangle
I think this issue is related to your topic https://github.com/mui/mui-x/issues/4450