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

Raj*_*jat 5 reactjs react-datepicker

我正在使用react-datepicker

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

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

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

image_on_mobile

sch*_*erb 14

我刚遇到这个问题

较小的视口上,日历被窗口截断。(溢出屏幕向右或向左)

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

进一步来说, popperModifiers.preventOverflow

<DatePicker
  ...
  popperModifiers={{
    preventOverflow: {
      enabled: true,
    },
  }}
</DatePicker>
Run Code Online (Sandbox Code Playgroud)

此处查看 popperModifiers文档

  • 这会在其他地方引起问题吗?否则,为什么这不是默认值? (3认同)

And*_*man 5

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

在此输入图像描述