reactjs React modern calendar datepicker与下面的datepicker输入重叠

gr8qqesn 于 2023-03-22 发布在 React

关注(0)|答案(1)|浏览(139)

我在table中使用react-modern-calendar-datepicke。在我的应用程序中，每行都有一个日期选择器。当日期选择器从底部打开时，它会与下面几行中的日期选择器的值重叠。

在沙盒中查看我的样本：Open Sandbox

但是当日历从顶部打开时，它工作得很好。

我试图改变z索引，但不为我工作。有人有这个问题的解决方案吗？

reactjs

来源：https://stackoverflow.com/questions/64458075/react-modern-calendar-datepicker-overlaps-with-datepicker-inputs-below

1条答案

按热度按时间

9vw9lbht1#

它需要更改父元素的位置和z索引。
下面是一个简单的demo：（完整代码可在底部沙箱中查看）

<td style={{ position:"relative", zIndex:"999" }}>
            <DatePicker
              value={selectedDay}
              onChange={setSelectedDay}
              inputPlaceholder="Select a day"
              shouldHighlightWeekends
            />
          </td>

另外我修改了你的代码，希望对你有帮助！
代码示例：