6

如何使反应日期选择器输入字段的日历叠加弹出窗口显示在其他表单组件的顶部？日历被其他表单组件隐藏。我可以在某处设置某种 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}
/>
4

2 回答 2

9

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

于 2017-06-27T23:21:03.027 回答
0

此外，您可以使用带有自定义覆盖组件（props- overlayComponent ）的Portal将其呈现在一切之上。但是它会导致定位组件出现问题，所以我推荐使用material-ui的Popper作为自定义覆盖组件，因为它显示在屏幕的空闲空间区域。请参阅代码框示例。

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

于 2021-03-23T07:52:22.080 回答