I'm having trouble with react-datepicker position

Question

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

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?

Try to change the CSS styles directly from Dev Tools and then apply what works into your JS/CSS files. — emi, Nov 17 '20 at 19:57
@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, Nov 18 '20 at 11:34
@AlexeyKorkoza I've tried `position: relative` and also without it, and I got the same results — Alex Yepes, Nov 18 '20 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. — Aleksei Korkoza, Nov 18 '20 at 11:57
@AlexeyKorkoza Thanks, after doing some research I finally found the problem, and I posted an answer describing it — Alex Yepes, Nov 18 '20 at 11:59

score 17 · Answer 1 · answered Aug 27 '21 at 13:11

17

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" 
/>

answered Aug 27 '21 at 13:11

Anil

196
1
3

2

This fixed it for me. – Nicola Peluchetti Nov 10 '21 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 Jan 10 '22 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 Jan 11 '22 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 Jan 12 '22 at 13:35

score 10 · Accepted Answer · answered Nov 18 '20 at 11:57

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:

score 4 · Answer 3 · answered Apr 07 '22 at 05:36

4

in material table i'm facing same issue.

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

answered Apr 07 '22 at 05:36

Sanjay Acharekar

41
2

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](/review/late-answers/31477146) – Mahdi Zarei Apr 09 '22 at 09:43

score 1 · Answer 4 · edited Jul 17 '22 at 17:51

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 } }} 
/>

edited Jul 17 '22 at 17:51

cigien

57,834
11
73
112

answered Jul 17 '22 at 10:20

Keval

21
2

S K R · Answer 5 · 2022-07-29T15:51:47.800

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,
          },
        },
      ]}
/>

score 0 · Answer 6 · answered Mar 25 '22 at 12:30

0

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

answered Mar 25 '22 at 12:30

Vrajpal Jhala

231
3
8

I'm having trouble with react-datepicker position

6 Answers6