反应日期选择器样式

Question

我的网页中有一个 react datepicker (https://reactdatepicker.com/) 组件。

理想情况下，当我点击日期时，popper 将充当页面上的元素（而不是 popper）。

理想的样子：

然而，目前发生了什么？

它的样子：

我试图弄乱样式以强制 popper 存在于页面中而不是顶部，但我真的不知道如何做到这一点（网络编程新手）。

有没有人知道从哪里开始强制日历组件表现得像第一张图片而不是第二张图片？将不胜感激。

我知道它可以内联，但我希望折叠行为 -> 点击日期 -> 打开日历。

Answer 1

根据项目页面下方的example，您可以给日期选择器一个inline 属性以使其成为非popper，如下所示：

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      inline
    />
  );
};

产生预期结果：

这样一来，您只需将日期/时间存储在 onChange 中任何需要的地方。