reactjs - 如何更改 rsuite DateRangePicker 中菜单的位置？

Question

我正在使用 rsuite DateRangePicker，该组件显示在右侧。当我打开菜单来选择日期时，菜单会脱离页面容器，我必须向右滚动页面才能看到整个菜单。

我正在寻找一种方法来改变这个菜单的位置，知道吗？

Answer 1

您可以设置placement="auto"为自动调整菜单位置。更多关于展示位置的使用，可以访问：https ://rsuitejs.com/components/date-picker

Answer 2

DateRangePicker 提供了一个placement属性。您可以将其值设置为bottomEnd或auto。

<DateRangePicker  placement="bottomEnd" />

Answer 3

就我而言，我添加placement='bottomEnd'了preventOverflow

<DateRangePicker
  size='md'
  placeholder='Select Date Range'
  block
  format='dd MMM yy'
  showOneCalendar
  placement='bottomEnd'
  preventOverflow
  ranges={Ranges}
  onChange={changeHandler}
/>