9

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?

6
  • Try to change the CSS styles directly from Dev Tools and then apply what works into your JS/CSS files.
    – emi
    Commented Nov 17, 2020 at 19:57
  • Has the container the position: relative style? Commented Nov 17, 2020 at 20:02
  • @emi yes, I've tried that but the className for the datepicker, which is .react-datepicker-popper does not apply the z-index property.
    – Alex Yepes
    Commented Nov 18, 2020 at 11:34
  • @AlexeyKorkoza I've tried position: relative and also without it, and I got the same results
    – Alex Yepes
    Commented Nov 18, 2020 at 11:35
  • @Alex Yepes It's hard to answer your question. So, I think you should post your code in your question. In this case, we will be able to help you quickly than now. Commented Nov 18, 2020 at 11:57

6 Answers 6

24

This is tested for react-datepicker 4.2.1

Adding a prop portalId should automatically fix the issue.

According to its documentation If the provided portalId cannot be found in the dom, one will be created by default with that id passed in the prop.

<DatePicker
 portalId="root-portal"
 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" 
/>
5
  • 2
    This fixed it for me. Commented Nov 10, 2021 at 15:37
  • @Anil, Yes it fixed the hide/show overlaying issue. But it doesn't trigger clicks on the dates. It only closes the popup everytime when anything clicked inside the popup.
    – S K R
    Commented Jan 10, 2022 at 15:53
  • @SKR Can you provide more information about the issue you are facing ? A codesandbox link to reproduce the issue should be great.
    – Anil
    Commented Jan 11, 2022 at 16:38
  • I was using OutsideClickHandler plugin which was triggering the click inside the portal as outside click, so, I needed to handle the same. no other issues right now. @Anil
    – S K R
    Commented Jan 12, 2022 at 13:35
  • portalId="root-portal" for the win! I spent hours and hours searching this. Note I didn't have any issues with triggering clicks on the dates.
    – doubleya
    Commented Nov 29, 2023 at 2:51
11

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

0
6

in material table i'm facing same issue.

popperProps={{strategy: 'fixed'}} by using this datepicker property this is how we can use in code

1
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review Commented Apr 9, 2022 at 9:43
1
<DatePicker minDate={new Date()} 
  selected={new Date()} 
  onChange={this.setDueDate} 
  dateFormat='dd/MM/yyyy' 
  popperPlacement="bottom" 
  popperModifiers={{ flip: { behavior: ["bottom"] }, preventOverflow: { enabled: false }, hide: { enabled: false } }} 
/>
1

I found a 100% working solution as it is in react-datepicker official documentation in here.

Put these 3 props popperClassName, popperPlacement, popperModifiers as it is in the following and the datepicker will work astonishingly.

<DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      popperClassName="some-custom-class"
      popperPlacement="top-end"
      popperModifiers={[
        {
          name: "offset",
          options: {
            offset: [5, 10],
          },
        },
        {
          name: "preventOverflow",
          options: {
            rootBoundary: "viewport",
            tether: false,
            altAxis: true,
          },
        },
      ]}
/>
0

As react-datepicker uses popperjs internally, we can even use popperPrpps prop with strategy: 'fixed' or positionFixed: true for older version of popperjs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.