Access current state of calendar (isOpen/isClose)

[zacBkh]

Hi!

I was wondering if there is a way to know whether the date picker is close or open?
I would like to display an overlay behind it in case it's open.

It could be something like:

<Datepicker onStateChange={handler}

Then we could access the value (open or close e.g) in the handler.

[zacBkh]

EDIT, WORKAROUND FOUND

Hi folks, for those who might be interested I have implemented a custom hook that checks, on each click, if the css class of the date picker has changed and return whether it is open or not.
It relies on css class names, so not optimal, but working great until we have a native state-based solution!

1. Create the hook

const useOnDetectDatePickerOpen = () => {
 const [isDatePickerOpen, setDatePickerOpen] = useState(false)

 const handleClickOnPage = () => {
   setTimeout(() => {
     const datePickerIsOpen = document.querySelector(
       'div.block.translate-y-0.opacity-1.block'
     )
     if (datePickerIsOpen) {
       setDatePickerOpen(true)
     } else {
       setDatePickerOpen(false)
     }
   }, 20)
 }

 useEffect(() => {
   document.addEventListener('click', handleClickOnPage)

   return () => {
     document.removeEventListener('click', handleClickOnPage)
   }
 }, [])

 return isDatePickerOpen
}

export default useOnDetectDatePickerOpen

2. Then, simply use it anywhere

const isDatePickerOpen = useOnDetectDatePickerOpen()