WickyNilliams/cally

[Question] Is there a way to reset user's start date selection on calendar-range

Closed this issue · 5 comments

dgonzalezr commented

Our date picker displays a panel that renders the cally component inside when the date picker input is focused/clicked.
We have noticed a strange behavior when using the calendar-range component, I'll try to explain it:

  • When the user clicks the input and selects the start date of the range but suddenly clicks outside of the element, we close the calendar panel (where cally is rendered)
  • At this point, a start date has been selected in Cally, but there was no end date selected
  • If the user clicks the date picker input and opens the calendar panel again, the previous selection is still there.

Is there a way we can reset the calendar-range state? I'm attaching a video here for clarification, the same can be seen in the Cally documentation site.

CleanShot.2024-05-29.at.18.35.20.mp4

What we would like, is a way that allows us to reset the calendar-range state if the user clicks outside and no end date has been selected. This should take into account that if a date range (start/end date is already set) we should be able to keep that range selection and only reset the start date selection action that was not completed.

I hope I've explained myself, otherwise please feel free to ask for details, I'll be more than glad to provide as many as needed.

WickyNilliams commented

Makes sense. There's definitely a need for some ability to cancel a tentative selection. I'll have a think on how best to support this

  • 👍3
WickyNilliams commented

Check out #49. I've exposed a tentative prop on the range component. You can clear this whenever you like e.g. on click outside / close of the picker, and it should give you the desired behavior. Additionally, you can set tentative to a date yourself, if you ever need to start a selection for a user.

Would this work for you?

dgonzalezr commented

Hey @WickyNilliams , thank you for taking the time to look into this so quickly.

I looked at the changes in the PR, if I understood correctly we would have a new tentative prop that can be set externally (default it will be the range start date value I think). That means I can set tentative as undefined on the calendar click outside handler and the range start selection will be cleared. Did I miss something?

I think this will work great for us 👍🏼

WickyNilliams commented

No, you didn't miss anything, that's exactly right 👍

  • 🎉1
WickyNilliams commented

Released in 0.7.0

  • 🎉1