search

jungsoft / materialui-daterange-picker

A react date range picker implementation using @material-ui.
MIT License
70 stars 81 forks source link

Can't reset selection #4

Open mariol3 opened 3 years ago

mariol3 commented 3 years ago

Hi!

We are currently using the date picker in a scenario where a user can selected a date range to enable filtering on a list of items. Selection is working great! We're instead encountering an issue in allowing the user to clear the selected range because from our understanding there is no way to programmatically clear the date range of the component.

This means that the date picker cannot be resetted to the initial state with no range highlighted on the calendar.

So, question is: are we missing something or the possibility to clear a selection is not there for now? If the latter is true it would be great to have it!

Thanks for the great work done with this project!

P.s. will try to attach also a working demo if can help in clarifying.

pedro-lb commented 3 years ago

Hey there @mariol3 !

Sadly there is no way to do this at the current state of this lib.

I can see this being implemented in several ways - for example, we could have a Clear button that clears the date selection and is shown/hidden as defined by a prop (e.g. showClearButton, default false to keep compatibility). This would be simple, internally handled, but not very customizable.

Another way to do this is to actually let the developer reset it programmatically. Since this component always manages the state internally and only exposes onChange, it would be more complex to implement (maybe expose the state as a value prop, so that we can control it externally).

Can you clarify on what exactly you need?

mariol3 commented 3 years ago

Hi Pedro, Yeah I definitely understand your points.

Currently in our context we need a way to clear it programmatically since we are providing an external button to trigger this action, hence the second option would be the one suitable for us.

mariol3 commented 3 years ago

I found an example of how to clear a date picker in the material ui library. Basically they just allow the developer to pass a null value and this will clear the state (and I guess re render the component) May be a good source of inspiration: https://codesandbox.io/s/hhlvg

pedro-lb commented 3 years ago

Good idea @mariol3 !

If you are willing to send a PR to implement this feature, please do so!

JimmySpann commented 2 years ago

Hey guys I'm really interested in this feature. If I create a pull request, would you be able to merge it?