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

Question

我正在使用react-datepicker。

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

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

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

Answer 1

我刚遇到这个问题

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

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

进一步来说， popperModifiers.preventOverflow

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

在此处查看 popperModifiers文档

Answer 2

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