Z-index problem

[dananw]

how to set z-index?

[hannasdev]

Add your own styling:

.react-datepicker-popper {
  z-index: 3;
}

[MonkeyJumps]

This is not working for me. I have the following component configuration:

<DatePicker value={this.props.value} onChange={this.handleChange} //onChangeRaw={this.handleChangeRaw} popperClassName="calendar-popout" popperPlacement="top-end" popperModifiers={{ offset: { enabled: true, offset: '5px, 10px' }, preventOverflow: { enabled: true, escapeWithReference: false, // force popper to stay in viewport (even when input is scrolled out of view) boundariesElement: 'viewport' } }} isClearable={true} customInput={<button type="button" className="btn btn-default" onClick={this.props.onClick}> <img src='/Content/images/calendar.png' title='Run Lookup' /> </button>} />

I set the z-index as suggest above and every other i can think of but the popout still renders under other components.

[combizs]

@MonkeyJumps, your style needs to be added in a stylesheet.

Also, it would help if you paste the code in a readable format, at least without comments if it's one-line.

style.css

.react-datepicker-popper {
  z-index: 3;
}

file.js

import React from 'react';
import DatePicker from 'react-datepicker';
import style.css

...

<DatePicker
  value={this.props.value}
  onChange={this.handleChange}
  popperClassName="calendar-popout"
  popperPlacement="top-end"
  popperModifiers={{
    offset: { enabled: true, offset: '5px, 10px' },
    preventOverflow: {
      enabled: true,
      escapeWithReference: false,
      boundariesElement: 'viewport'
    }
  }}
  isClearable={true}
  customInput={
    <button
      type="button"
      className="btn btn-default"
      onClick={this.props.onClick}>
      {' '}
      <img src="/Content/images/calendar.png" title="Run Lookup" />{' '}
    </button>
  }
/>

...

[andycamp]

I had this issue, and had to add !important to my style to get it to override the default z-index of 1
.react-datepicker-popper { z-index: 100 !important }

[prokhorenkovatv]

maybe it will help someone like me in future, but you can simply pass your own styles with exact z-index into popperClassName prop on DayPicker

[rokyuddin]

it's not working in my case

[SirawichDev]

if z-index solution not working i suggest you to use portalId props instead
date-picker component just put portalId="what-ever-id"
and your problem will be fixed

[davidseek]

if z-index solution not working i suggest you to use portalId props instead date-picker component just put portalId="what-ever-id" and your problem will be fixed

Only this worked for me:

<DatePicker
      portalId="my-popper"
      ...
    />

# In index.html

<style>
#my-popper {
     z-index: 100 !important;
}
</style>

[SirawichDev]

nice <3 <3

[sanghmitras]

If nothing works, try this

<DatePicker 
...
popperModifiers={[
                  {
                    name: "zIndex",
                    enabled: true,
                    phase: "write",
                    fn: ({ state }) => {
                      if (state.styles.popper) {
                        state.styles.popper.zIndex = "2";
                      }
                    },
                  },
                ]}

/>

[anuraginvz]

in next js global.css it worked,

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