Close DatePicker Modal, by a button or after selecting date

[HaminJuri]

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"

[sepehrsamavati]

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()}
/>

[rzkhosroshahi]

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.

[mahbobJan]

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

[mmsadati]

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?

[MHMighani]

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?

[rzkhosroshahi]

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.

[MahdiFarzami]

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.