React Day Picker 日历叠加在其他组件后面弹出

Question

如何让 React 日期选择器输入字段的日历叠加弹出窗口显示在其他表单组件之上？日历被其他表单组件隐藏。我可以在某处设置某种 z-index 吗？

<DayPicker.Input
    name={this.id}
    placeholder="MM/DD/YYYY"
    format="M/D/YYYY"
    value={this.value}
    onDayChange={this.handleDayChange.bind(this)}
    dayPickerProps={datePickerProps}
/>

Answer 1

叠加层有一个绝对定位的 DayPickerInput-Overlay class：您可以向其添加 z-index 以使叠加层位于其他元素的顶部。

Answer 2

此外，您可以使用 material-ui 的 Portals with a custom overlay component (props - overlayComponent) to render it on top of everything. But it can cause a problem with the positioning component, so I recommend use Popper 作为自定义叠加组件，因为它显示在屏幕上的空闲 space 区域。请参阅 codesandbox 示例。

示例：https://codesandbox.io/s/optimistic-glitter-c77gb?file=/src/DateRangePicker.js

React Day Picker 日历叠加在其他组件后面弹出

React Day Picker calendar overlay pops up behind other components

reactjs

react-day-picker