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?
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/