Search code examples
cssreactjsreact-datepicker

I'm having trouble with react-datepicker position

I'm using react-datepicker but for some reason it is showing the calendar behind a container.

enter image description here

I have tried:

.react-datepicker-popper {
  z-index: 9999 !important;
}

but it doesn't work.

Here is the Date Picker component

<DatePicker
     selected={startDateSingleDay}
     onChange={onChangeDatePickerStartDateSingleDay}
     dateFormat="yyyy-MM-dd"
     className="text-center"
     showMonthDropdown
     showYearDropdown
     dropdownMode="select"
     onChangeRaw={handleDateChangeRaw}
     popperClassName="date-picker-reports"
     placeholderText="Choose a date"
   />

Any suggestions?

Solution

  • I fixed it as react-popper will place the popover in the same constraints as the parent div. For cases where the parent div is somehow constrained -- a scrollable div -- the popper will appear inside the div and will be constrained by it to.

    In my case I wanted the popover to be unconstrained it's parent. To fix this, I placed the popover in a container outside of the constrained container.

    import { Portal } from "react-overlays";

const CalendarContainer = ({ children }) => {
  const el = document.getElementById("calendar-portal");

  return <Portal container={el}>{children}</Portal>;
};

    And added the popperContainer prop to the DatePicker like so:

    <DatePicker
    selected={startDate}
    onChange={onChangeDatePickerStartDate}
    dateFormat="yyyy-MM-dd"
    className="text-center date-picker-reports"
    showMonthDropdown
    showYearDropdown
    dropdownMode="select"
    onChangeRaw={handleDateChangeRaw}
    popperPlacement="top-start"
    placeholderText="Choose a start date"
    popperContainer={CalendarContainer}
/>

    Final Result:

    enter image description here