how to hide primereact Calendar component

Question

There is a way to hide calendar using custom button ?

<Calendar onHide={handleCalendarHide} />;

Right now I Can hide calendar only clicking outside of the calendar, this triger onHide event, but I want to hide calendar when I select the date and then click apply button.

There is a way to trigger some function to hide this calendar?

Can you provide the implementation code for the `Calendar` component? — Laurean Ray Bahala, Aug 16 '22 at 12:50
this is Calendar from npm packakges primereact https://www.primefaces.org/primereact/calendar/ This is way I just asking that is possible — Mateusz Matuś Kowalski, Aug 16 '22 at 13:05

Andy Refuerzo · Answer 1 · 2022-08-16T13:55:28.223

Try this code below. It shows a built-in button beside the input element that serves as a button that can show/hide the calendar in addition to the input element getting the focus:

const [date3, setDate3] = useState(null);

<Calendar id="icon" value={date3} onChange={(e) => setDate3(e.value)} showIcon />

Taken directly from the component pages: https://www.primefaces.org/primereact/calendar/

But if you really need a custom button to show/hide the calendar overlay, try this:

const [date3, setDate3] = useState();
const [isVisible, setIsVisible] = useState(false);

const handleVisibility = (e) => {
  setIsVisible(!isVisible);
};

const handleVisibleChange = (e) => {
  console.log(e);
};

<Button label="Custom Button" onClick={handleVisibility} />
<Calendar
    id="icon"
    value={date3}
    onChange={(e) => setDate3(e.value)}
    showOnFocus={false}
    visible={isVisible}
    onVisibleChange={handleVisibleChange}
  />

Demo: https://f8n50l.csb.app/

I didin't add ```onVisibleChange={handleVisibleChange}``` this is why this does not working for me. Thank you so much!!! — Mateusz Matuś Kowalski, Aug 17 '22 at 06:10

how to hide primereact Calendar component

1 Answers1