Use react-datepicker in Modal/Dialog without the picker being cut off

by admin

Are you using the react-datepicker package by Hacker0x01 and having trouble with using the datepicker inside modals because it looks like this?

After searching for like 5 hours for a solution, I managed to get it to work properly.

Add the following:

popperProps={{ strategy: 'fixed' }}

The result:

Works like a charm :).

Full code:

<DatePicker
      dateFormat={'dd-MM-yyyy'}
      popperPlacement={popperPlacement}
      popperProps={{ strategy: 'fixed' }}
      onChange={onChange}
      placeholderText='Click to select a date'
    />

Related Posts

Leave a Comment