React Date Picker 被隐藏在 Overflow Parent 后面（popover 固定位置问题）
Vin*_*ent 3 reactjs material-ui react-datepicker popper.js
我试图让 react datepicker 的日期选择弹出框从材质 UI 菜单项打开。
我已将菜单项设为 react datepicker 输入字段。问题是我的输入字段是选择日期弹出框的锚点，弹出框在我的菜单中打开。我希望弹出窗口在菜单上方打开。
react datepicker 文档没有很多关于 popover 位置的信息。知道如何实现这一目标吗？
我的菜单代码的快速概览：
// this icon is the anchor for the menu
<MoreIcon onClick={handleClick} />
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
//this is my Date picker component
<Reschedule handleReschedule={handleReschedule} />
</Menu>
和我的日期选择器组件（使用自定义输入字段作为菜单项）：
export const Reschedule = ({ handleReschedule }) => {
// ref to the datePicker to control open/close
const calendar = createRef();
//to Open the date picker
const openDatepicker = (e) => {
calendar.current.setOpen(true);
};
//to close the date picker
const closeDatepicker = (e) => {
calendar.current.setOpen(false);
};
const RescheduleButton = ({ onClick }) => {
return (
<MenuItem
className="overdue__rescheduleButton"
onClick={() => {
onClick();
}}
>
Reschedule
</MenuItem>
);
};
return (
<DatePicker
selected={null}
onChange={(date) => {
handleReschedule(date);
}}
ref={calendar}
minDate={subDays(new Date(), 0)}
customInput={<RescheduleButton onClick={openDatepicker} />}
popperPlacement="bottom-end"
/>
);
};
提前致谢
在撰写本文时，此道具尚未记录，但您可以使用它popperProps来配置 popper 属性 - 它们使用Popper.js。在您的情况下使用，positionFixed: true以便它相对于视口的初始包含块（即，<html>）
<DatePicker
popperProps={{
positionFixed: true // use this to make the popper position: fixed
}}
/>
https://github.com/Hacker0x01/react-datepicker/blob/master/src/popper_component.jsx
- 这对我有用：`popperProps={{策略：'固定'}}` (8认同)
小智 6
实现此目的的另一种方法是为 React datepicker 提供您想要附加选择器的 div 的 id。例如，应用程序顶部附近的 div：
<DatePicker
portalId="root"
/>
| 归档时间： |
|
| 查看次数： |
1954 次 |
| 最近记录： |