Selecting time with set_focus_date

[armanpwnz]

Hi,

I select the date and time, then hide <DateProvider> with the button, and then when I open it I can't select the time without the code like this:

useEffect(() => { dispatch({ type: "SET_FOCUS_DATE", date: selectedDates[0] }); }, [dispatch, selectedDates]);

https://codesandbox.io/p/devbox/time-selection-useeffect-wpz4dr?file=%2Fsrc%2Fcomponents%2Ftime.tsx here a example with a toggle button

Thanks

[Feshchenko]

Hey, @armanpwnz your link is not working

[armanpwnz]

@Feshchenko https://codesandbox.io/p/sandbox/time-selection-useeffect-wpz4dr should work

[Feshchenko]

still not working 🤷

[armanpwnz]

@Feshchenko https://codesandbox.io/p/devbox/time-selection-useeffect-wpz4dr?file=%2Fsrc%2Fcomponents%2Ftime.tsx should work, sorry, I forgot to access the sandbox.

[Feshchenko]

Hey @armanpwnz, I hope you are doing well. What is happening in your example, the focusDate is the internal datepicker state. So when you hide and show it the state is lost, that's how React works. You have a focusDate prop in configuration. So what you need to do is to persist it outside of UI that will be hidden. Here is a link to Sanbox with a working example without useEffect and manual dispatch, (but your solution is also good)