如何隐藏primereact日历组件

Question

有一种方法可以使用自定义按钮隐藏日历吗？

<Calendar onHide={handleCalendarHide} />;

现在我只能在日历之外点击隐藏日历，这会触发隐藏事件，但我想在选择日期然后点击应用按钮时隐藏日历。

有没有办法触发一些函数来隐藏此日历？

Answer 1

试试下面的代码。它在输入元素旁边显示了一个内置按钮，作为一个按钮，除了获得焦点的输入元素之外，还可以显示/隐藏日历：

const [date3, setDate3] = useState(null);
<Calendar id="icon" value={date3} onChange={(e) => setDate3(e.value)} showIcon />

直接从组件页面获取：https://www.primefaces.org/primereact/calendar/

但是，如果你真的需要一个自定义按钮来显示/隐藏日历覆盖，试试这个：

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

演示：https://f8n50l.csb.app/