Manually closing the calendar primereact

Question

I'm using primereact version 6.2.1, While using the calendar from primereact i have enabled the option for showTime. This brings up a datePicker with an overlay blocking out the rest of the webpage. All this works fine. Except after a date and time are picked the only way to close the datePicker is to click somewhere else on the browser. Is there a way to close it manually ?

Answer 1

import React, { useRef } from 'react';

import { Calendar } from 'primereact/calendar';

    const CustomCalendar = (props) => {
     const cal = useRef(null);
      const handleClose = () => {
        cal.current.hideOverlay()
        // if you're using touchUI option you have to hade it also ;)
        cal.current.touchUIMask.style.display = "none";
      };
      return  <Calendar
        ref={cal}
        {...props}
        footerTemplate={(e) => <div className='footer-calendar'><button onClick={handleClose}>Done</button></div>}
      />
    }

You can close overlay manually using ref, you can check this link sandbox

or check the github link for more options github

Answer 2

If you get a ref to your Calendar you can call calendarRef.current.hideOverlay();

I also opened this ticket: https://github.com/primefaces/primereact/issues/2685

Submitted this PR: https://github.com/primefaces/primereact/pull/2687