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

【问题标题】：React datepicker cutting calendar on mobile screen在移动屏幕上反应日期选择器切割日历
【发布时间】：2019-01-02 08:14:38
【问题描述】：

我正在使用 react-datepicker。

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

此外，它也 不显示滚动条以滚动到右侧。

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

【问题讨论】：

【解决方案1】：

我刚遇到这个问题

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

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

更具体地说，popperModifiers.preventOverflow

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

查看 popperModifiers Docs Here

【讨论】：

【解决方案2】：

在对存储库进行一些研究后，似乎这是一个known issue。一个建议是使用日期选择器的portal version，它将日期选择器置于模态中。您可以为大屏幕保留当前行为并仅将门户解决方案用于移动设备。

【讨论】：

【解决方案3】：

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

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

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

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

您必须使用right: -290px 数字来获得适用于您的代码的正确数字。

【讨论】：