如何更改 rsuite DateRangePicker 中菜单的位置？答案

【问题标题】：How to change the position of the menu in rsuite DateRangePicker?如何更改 rsuite DateRangePicker 中菜单的位置？
【发布时间】：2020-05-20 09:10:05
【问题描述】：

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

我正在寻找一种方法来改变这个菜单的位置，有什么想法吗？

【问题讨论】：

看起来他们没有实现这一目标的道具。你应该可以用 CSS 做到这一点。
@SamuelVaillant 如何在菜单上直接应用 CSS？

标签： reactjs daterangepicker rsuite

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

<DateRangePicker  placement="bottomEnd" />

【讨论】：

【解决方案3】：

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

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

【讨论】：