reactjs - 在移动屏幕上反应日期选择器切割日历

Question

我正在使用react-datepicker。

我在一行中有两个日期选择器，它在桌面屏幕上运行完美，但是在移动屏幕上使用它时，日历从右侧切割，因为它没有从右侧获得足够的空间。

此外，它也没有显示滚动条滚动到右侧。

下图是它在手机上的样子。

score 14 · Accepted Answer

我刚遇到这个问题

在较小的视口上，日历被窗口截断。（从屏幕向右或向左溢出）

为了解决这个问题，我不得不使用popperModifiers道具

进一步来说，popperModifiers.preventOverflow

<DatePicker
  ...
  popperModifiers={{
    preventOverflow: {
      enabled: true,
    },
  }}
</DatePicker>

在此处查看 popperModifiers文档

score 4 · Accepted Answer

在对存储库进行了一些研究之后，这似乎是一个已知问题。一个建议是使用日期选择器的门户版本，它将日期选择器置于模式中。您可以保留较大屏幕的当前行为，并仅将门户解决方案用于移动设备。

score 0 · Accepted Answer

我通过使用以下代码解决了这个问题：

.react-datepicker{
    position:absolute !important;
    right: -290px !important;
}

这解决了所有屏幕尺寸的问题

你不会.react-datepicker在你的 CSS 中看到这个类。这是内置在 npm 包中的。

您将不得不使用该right: -290px图来获得适用于您的代码的正确图。

3 回答 3