如何隐藏primereact日历组件

Question

是否有一种使用自定义按钮隐藏日历的方法？

<Calendar onHide={handleCalendarHide} />;

现在我只能隐藏日历，只点击日历外部的这个triger onHide事件，但是我想在选择日期时隐藏日历，然后单击apply按钮。

有一种方法可以触发函数来隐藏这个日历吗？

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/