React datepicker cutting calendar on mobile screen

Question

I am using react-datepicker.

I have two datepicker in the one line, and it is working perfect on desktop screen but when using it on mobile screen, calendar is cutting from right side as it did not got enough space from right side.

Further, It is also not showing scrollbar to scroll to right side.

Below is the image how it looks on mobile.

Answer 1

I just came across this issue

On smaller viewports, the calendar is cutoff by the window. (overflows off screen to right or the left)

In order to solve this issue, I had to use the popperModifiers prop

More specifically, popperModifiers.preventOverflow

<DatePicker
  ...
  popperModifiers={{
    preventOverflow: {
      enabled: true,
    },
  }}
</DatePicker>

Checkout the popperModifiers Docs Here

Answer 2

After doing a little research into the repository, it appears this is a known issue. One suggestion is to use the portal version of the date picker, which puts the date picker in a modal. You could preserve the current behavior for larger screens and use the portal solution for mobile only.

Answer 3

I fixed this by using the following code:

.react-datepicker{
    position:absolute !important;
    right: -290px !important;
}

This fixes the problem for all screen sizes

You won't see the .react-datepicker class in your css. This is built into the npm package.

You will have to play with the right: -290px figure to get the right figure that works for your code.