我使用的是primereact版本6.2.1,在使用primereact中的日历时,我启用了showTime的选项。这会显示一个覆盖了网页其余部分的datePicker。所有这些都很好。除非选择了日期和时间,否则关闭日期选择器的唯一方法是单击浏览器上的其他位置。有没有办法手动关闭它?
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>}
/>
}
您可以使用ref手动关闭覆盖,您可以检查此链接沙箱
或查看github链接以获取更多选项github
如果您获得Calendar
的引用,则可以调用calendarRef.current.hideOverlay();
我还打开了这张票:https://github.com/primefaces/primereact/issues/2685
提交此PR:https://github.com/primefaces/primereact/pull/2687