日期选择器未清除 table 的边缘

Question

我有一个相当固执的 DatePicker，我似乎无法表现得很好。我正在使用 react-datepicker 的 DatePicker 组件。

我有一个 table，其中每一行都有一个 DatePicker。打开日期选择器的日历视图似乎无法清除 table:

的边缘

我已经尝试在table上设置style={{zIndex: "9999 !important"}}但无济于事。这似乎是任何人推荐的唯一解决方案。

使用 DatePicker 组件的代码如下所示：

<Row>
    <Col>
        <DatePicker
            onChange={onChangeCallback(user.id)}
            autoComplete="off"
            shouldCloseOnSelect={false}
            dateFormat="dd-MM-yyyy"
            selected={date}
            placeholderText="Vælg Dato..."
            clearButtonTitle="Ryd"
            isClearable
        />
    </Col>
    <Col>
        <Calendar
            color="#ff7e01"
            className="align-middle"
            size={18}
        />
    </Col>
</Row>

从 reactstrap.

导入 Row 和 Col

有趣的是，DatePicker 在不使用 Row 和 Col 时可以正常运行，因此其中一定有什么东西导致了这种干扰。

有什么线索吗？

Answer 1

我知道 , but as ccallendar ，datepicker-react 使用的库 @popperjs/core 从那时起发生了变化，更具体地说：

"7. Change positionFixed

In Popper 2, this is now the strategy option:
createPopper(reference, popper, {
  strategy: 'fixed',
});
"

-- https://popper.js.org/docs/v2/migration-guide/#7-change-positionfixed

将其应用于您的问题，这应该有效：

<Row>
    <Col>
        <DatePicker
            onChange={onChangeCallback(user.id)}
            autoComplete="off"
            shouldCloseOnSelect={false}
            dateFormat="dd-MM-yyyy"
            selected={date}
            placeholderText="Vælg Dato..."
            clearButtonTitle="Ryd"
            isClearable
            popperProps={{ strategy: "fixed" }}
        />
    </Col>
    <Col>
        <Calendar
            color="#ff7e01"
            className="align-middle"
            size={18}
        />
    </Col>
</Row>

日期选择器未清除 table 的边缘

Datepicker not clearing the edge of table

datepicker

reactjs

react-datepicker

reactstrap