How to change the position of the menu in rsuite DateRangePicker?

Question

I'm using rsuite DateRangePicker and the component is displayed on the right. When I open the menu to select a date, the menu get out of the page container and I have to scroll the page to the right in order to see the entire menu.

I'm looking for a way to change the position of this menu, any idea?

It looks like they don't have a prop to achieve that. You should be able to do it with CSS. — Samuel Vaillant, May 20 '20 at 09:16

score 1 · Answer 1 · answered Sep 02 '20 at 07:28

1

You can set placement="auto" to auto adjust the menu position. More about placement usage, you can visit:https://rsuitejs.com/components/date-picker

answered Sep 02 '20 at 07:28

superman66

46
4

score 1 · Answer 2 · answered Sep 02 '20 at 07:34

1

DateRangePicker provides a placement property. You can set its value to bottomEnd or auto.

<DateRangePicker  placement="bottomEnd" />

answered Sep 02 '20 at 07:34

Simon Guo

83
5

score 0 · Answer 3 · answered Nov 29 '21 at 17:33

In my case I added placement='bottomEnd' and preventOverflow

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

How to change the position of the menu in rsuite DateRangePicker?

3 Answers3