question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[DatePicker] 'clearable' prop has no effect.

See original GitHub issue

Duplicates

  • 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:

  1. Import DatePicker.
  2. Use DatePicker normally and add clearable={true}.
  3. See no difference with or without clearable prop.
  4. 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:closed
  • Created 2 years ago
  • Comments:17 (8 by maintainers)

github_iconTop GitHub Comments

2reactions
mnajdovacommented, Mar 21, 2022

Ok, this is improving the feature that is already implemented. Worth creating a new issue for it. cc @flaviendelangle

1reaction
flaviendelanglecommented, Jun 29, 2022

I think this issue is related to your topic https://github.com/mui/mui-x/issues/4450

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found