htmlcssreactjsbootstrap-4react-day-picker

Using 'react-day-picker' DatePickerInput within a Bootstrap Modal

I am trying to use a DatePickerInput component within a bootstrap modal.

I am expecting a similar effect to this, as demonstrated on the official website.

However, inside the bootstrap modal, I get this.

I suppose that this is because the library tries to display the overlay at a certain z-index not knowing that the input itself is already in an elevated component.

How should I solve this problem? Thank you so much!

Solution

  • @mrTurkay's comment solved my problem, I did not import the CSS file provided by the library. Adding

    `import 'react-day-picker/lib/style.css';`

    solved this.