Open HaminJuri opened 11 months ago
I couldn't close it either, so I did it by clicking its input, which involves DOM manipulation and is not considered best practice:
// in Component.tsx
const toggleModal = useCallback(() => {
const dateInput: HTMLInputElement | null = wrapperRef.current?.querySelector(`.${dateInputClassName}`) ?? null;
dateInput?.click();
}, []);
wrapperRef
: reference to the parent of <DatePicker />
component
dateInputClassName
: class name used in <DatePicker inputClass={dateInputClassName} />
This can be called in onChange
callback:
<DatePicker
inputClass={dateInputClassName}
onChange={() => toggleModal()}
/>
There are two ways you can achieve it. The calendar will be closed when the user clicks outside the date picker, however, you can also pass the show
prop if you want to close the date picker manually.
There are two ways you can achieve it. The calendar will be closed when the user clicks outside the date picker, however, you can also pass the
show
prop if you want to close the date picker manually.
show prop not work
There are two ways you can achieve it. The calendar will be closed when the user clicks outside the date picker, however, you can also pass the
show
prop if you want to close the date picker manually.show prop not work
I have the same issue When is this bug going to be fixed?
H @rzkhosroshahi
I'm working on this issue. I want to know that when the show
prop is passed, do you want the calendar window still closes when the user clicks outside or nothing happens and it is fully controlled by the show
prop?
after reading this issue seems my issue is duplicated. https://github.com/rzkhosroshahi/zaman/issues/140
I might change the show
prop to the defaultShow
. it won't control the inside component state. In other words, it gonna just set the default behavior of showing date-picker, and my component its not going to listen to the prop.
i have same issue and handle it with this code
function simulateClick(x, y) { const event = new MouseEvent('click', { view: window, bubbles: true, cancelable: true, clientX: x, clientY: y });
const target = document.elementFromPoint(x, y);
if (target) {
target.dispatchEvent(event);
}
}
its not best way but there is no ohter way.
Hey, as it's on the title: How do you close DatePicker Modal by using a button or after the user selects its desired date? package.json: "...", "react": "18.2.0", "next": "13.4.12", "zaman": "^2.0.7"