在手机屏幕上反应日期选择器切割日历

Question

我正在使用 react-datepicker。

我在一行中有两个 datepicker，它在桌面屏幕上运行完美，但在移动屏幕上使用时，日历从右侧切开，因为它没有从右侧得到足够的space。

此外，不显示滚动条向右滚动。

下图是在移动设备上的样子。

Answer 1

在对存储库进行一些研究后，它似乎是日期选择器的 known issue. One suggestion is to use the portal version，它将日期选择器置于模式中。您可以保留大屏幕的当前行为，并仅使用移动门户解决方案。

Answer 2

我刚遇到这个问题

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

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

更具体地说，popperModifiers.preventOverflow

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

检查 popperModifiers Docs Here

Answer 3

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

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

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

您不会在 css 中看到 .react-datepicker class。这是内置在 npm 包中的。

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

React datepicker cutting calendar on mobile screen