-
Notifications
You must be signed in to change notification settings - Fork 88
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
DatePicker closes automatically once date is selected #266
Comments
maybe this can help? |
I am using the "renderButton" prop I cannot use the conditional rendering technique. Best could be to have a props to handle visibility of calendar |
I'm having the same issue @sehrish30. Did you find a good solution? I am using it together with the time picker plugin. From a UX perspective, selecting the date and then having to open Datepicker again to select the time feels a bit weird. |
for anyone that's stuck on this, here's my solution - this only closes the calendar when the click is outside of the element. in my actual implementation this is on only when I'm rendering the timepicker const ref = useRef<HTMLElement>();
const [shouldClose, setShouldClose] = useState(false);
...
const handleClickOutside = (event: MouseEvent) => {
const target = event.target as HTMLElement;
const isClickOutside = !ref.current?.contains(target);
setShouldClose(isClickOutside);
};
useEffect(() => {
document.addEventListener('click', handleClickOutside, true);
return () => document.removeEventListener('click', handleClickOutside, true);
}, []);
...
<DatePicker
...
ref={ref}
onClose={() => shouldClose}
/> |
if you check the first example here
https://shahabyazdi.github.io/react-multi-date-picker/events/
the dropdown automatically closes once I select the date. Is there anyway i can control the open and close state of the DatePicker.
One option can be to use onClose or using ref but how can i stop the Datepicker from being closed once date has been set
` const handleDate = (date: DateObject | DateObject[]) => {
setTempValue(date);
datePickerRef.current?.openCalendar();
};
onChange={handleDate}
`
still the calendar closes :/ please its urgent can someone help me with it
The text was updated successfully, but these errors were encountered: