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

Question

我正在使用 react-datepicker 。

我在一行中有两个 datepicker ，它在桌面屏幕上可以正常使用，但是在手机屏幕上使用时，日历从右侧开始切割，因为右侧没有足够的空间一侧。

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

下面是图片在移动设备上的外观。

Answer 1

对存储库进行了一些研究之后，看来这是known issue。一种建议是使用日期选择器的portal version，这会将日期选择器置于模式中。您可以保留较大屏幕的当前行为，并仅将门户网站解决方案用于移动设备。

Answer 2

我刚遇到这个问题

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

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

更具体地说，popperModifiers.preventOverflow

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

检出popperModifiers Docs Here