React-dates: Auto position when reached when reached end of parent

[Rafi993]

It would be nice to have option to auto position the date selector when you react the end of the parent or the browser window.

[majapw]

Hi @Rafi993 The date selector should auto-position according to the browser window (there's a responsive function that checks for the edge of the screen and shifts over the datepicker accordingly). Can you share a screenshot of the behavior you are seeing and the version of react-dates you are using?

[Rafi993]

Version:
18.1.1

[majapw]

Ah, specifically from the bottom. It is responsive to the left and right edges of the screen, but does not scroll the page up when the picker is out of view.

@Rafi993 Are you suggesting that the picker automatically open up when the calendar is below the fold or that the viewport scroll up to show the calendar? I think for the latter, you could probably do right now by setting a ref on the SingleDatePicker component, checking where it is in relation to the viewport and updating the openDirection prop accordingly.

Internally there is not any code for that although I guess it is a possible addition. I am not certain that it is a high priority ask, but it is a potential addition.

[dmcd]

Hi @majapw, I'm also interested in the picker automatically opening upward when there isn't enough space in the viewport for the calendar.

I think for the latter, you could probably do right now by setting a ref on the SingleDatePicker component, checking where it is in relation to the viewport and updating the openDirection prop accordingly.

Would I need to subscribe to scroll and resize events to achieve this or is there an easier way that you had in mind?

[mattaningram]

It would be nice if this feature was built in just like the left/right repositioning is. To do it properly requires some boilerplate for re-checking on scroll and resize and it would be great if that was just included in the existing check for left/right.

[phillipwhelan]

This feels like a feature that should definitely be baked into the component.

[NZDanny]

Just adding my +1 here.

Having to do some hacky workarounds due to lack of this feature.