我在反应日期选择器位置上遇到问题

Question

我正在使用 react-datepicker，但出于某种原因，它在容器后面显示日历。

我试过：

.react-datepicker-popper {
  z-index: 9999 !important;
}

但是没用。

这是日期选择器组件

<DatePicker
     selected={startDateSingleDay}
     onChange={onChangeDatePickerStartDateSingleDay}
     dateFormat="yyyy-MM-dd"
     className="text-center"
     showMonthDropdown
     showYearDropdown
     dropdownMode="select"
     onChangeRaw={handleDateChangeRaw}
     popperClassName="date-picker-reports"
     placeholderText="Choose a date"
   />

有什么建议吗？

Answer 1

我修复了它，因为 react-popper 会将弹出窗口置于与 parent div。对于 parent div 受到某种限制的情况——a scrollable div -- popper 将出现在 div 内并且将是受其制约。

在我的例子中，我希望弹出窗口不受约束 parent。为了解决这个问题，我将弹出窗口放在受约束的容器。

import { Portal } from "react-overlays";

const CalendarContainer = ({ children }) => {
  const el = document.getElementById("calendar-portal");

  return <Portal container={el}>{children}</Portal>;
};

并像这样将 popperContainer 属性添加到 DatePicker：

<DatePicker
    selected={startDate}
    onChange={onChangeDatePickerStartDate}
    dateFormat="yyyy-MM-dd"
    className="text-center date-picker-reports"
    showMonthDropdown
    showYearDropdown
    dropdownMode="select"
    onChangeRaw={handleDateChangeRaw}
    popperPlacement="top-start"
    placeholderText="Choose a start date"
    popperContainer={CalendarContainer}
/>

最终结果：

Answer 2

已针对 react-datepicker 4.2.1 进行测试

添加道具 portalId 应该会自动解决问题。

根据其文档，如果在 dom 中找不到提供的 portalId，则默认情况下会使用在 prop 中传递的 id 创建一个。

<DatePicker
 portalId="root-portal"
 selected={startDateSingleDay}
 onChange={onChangeDatePickerStartDateSingleDay}
 dateFormat="yyyy-MM-dd"
 className="text-center"
 showMonthDropdown
 showYearDropdown
 dropdownMode="select"
 onChangeRaw={handleDateChangeRaw}
 popperClassName="date-picker-reports"
 placeholderText="Choose a date" 
/>

Answer 3

由于 react-datepicker 在内部使用 popperjs，我们甚至可以将 popperPrpps prop 与 strategy: 'fixed' 或 positionFixed: true 一起用于旧版本的 popperjs。

Answer 4

in material table i'm facing same issue.

popperProps={{strategy: 'fixed'}} 通过使用这个日期选择器属性 this is how we can use in code

我在反应日期选择器位置上遇到问题

I'm having trouble with react-datepicker position

css

reactjs

react-datepicker