Reset Date Range Picker

[eliobricenov]

Is there any way to reset the selected range? I've looked everywhere and couldn't find anything related.

For example, in this demo https://codesandbox.io/s/objective-shape-8r4utm?file=/src/RangeCalendar.js I'd like to add a clear button that'd reset the state back to its placeholder value.

[reidbarber]

You can use state.setValue() (where state is from useRangeCalendarState ) to set the state to the same value as the default value.

Here is a forked version of the example you linked, but with a clear button added: https://codesandbox.io/s/daterangepicker-with-clear-button-13l5s6?file=/src/RangeCalendar.js

[eliobricenov]

let me try to get a sandbox for you

[eliobricenov]

hmmm, idk in this fork I can clear https://codesandbox.io/s/quizzical-wildflower-ngomh6?file=/src/App.tsx idk what's happening :/, maybe is Next JS?

[eliobricenov]

well, this seems to work too: https://codesandbox.io/s/recursing-ully-szzi9p

I'll have to debug further and report back.

Thanks a lot for the help, appreciate it, awesome work with this library.

[eliobricenov]

Ok, so it seems that I get the error because I'm also using useDateRangePicker hook, and setting the state as null is breaking something somewhere.

[eliobricenov]

Ok I finally was able to create a sandbox with the error: https://codesandbox.io/s/boring-dust-mpcbgk?file=/src/RangeCalendar.js

[eliobricenov]

Sorry for the previous spam. Ultimately, the error can be reproduced here:

Ok I finally was able to create a sandbox with the error: https://codesandbox.io/s/boring-dust-mpcbgk?file=/src/RangeCalendar.js
it seems that I get the error because I'm also using useDateRangePicker hook, and setting the state as null is breaking something somewhere.

Do you have anything in mind? @reidbarber

[reidbarber]

This actually looks like a bug. I think we're missing an optional chaining operator here:

react-spectrum/packages/@react-stately/datepicker/src/useDateRangePickerState.ts

Line 80 in 92294d1

if (controlledValue == null && placeholderValue.start && placeholderValue.end) {