Is it possible to use the DateRangePicker without the Button?

[ChristophP]

Hi,

thanks for making this great library. Really helps to not have to worry about all the ARIA patterns yourself.

We're in need of a DateRangePicker. We would like our picker to open when the Input is clicked rather than having a button next to it, similar to how the MUI DateRangePicker behaves (here's an example) .

So starting from this...

... I tried briefly to make this happen by removing the Button and using click handlers to control on the DateInputs the isOpen prop without success. I then resorted to using onFocus events on the DateInputs which worked for opening but not to open it a second time since the focus on the input stays after closing.
Now I am unsure if I'm trying to do something the DateRangePicker was not meant for.

Would appreciate some pointers on how to best achieve this or if this is something to stay away from.

[snowystinger]

You could make the entire field a button with the formatted date range and just open to a Range Calendar
Something along these lines https://codesandbox.io/s/hungry-marco-fmgv9p?file=/src/index.js

If you're really trying to keep the input, you may want to refer to this issue for some troubles you might run into or just things to consider #4723

[snowystinger]

Similar discussion here #4914 (comment)