7

How do I make the calendar overlay popup for the react day picker input field show on top of the other form components? The calendar is being hidden by the other form components. Is there some sort of z-index that I can set somewhere?

<DayPicker.Input
    name={this.id}
    placeholder="MM/DD/YYYY"
    format="M/D/YYYY"
    value={this.value}
    onDayChange={this.handleDayChange.bind(this)}
    dayPickerProps={datePickerProps}
/>
Lambert
  • 2,233
  • 5
  • 29
  • 44

2 Answers2

10

The overlay has a DayPickerInput-Overlay class which is absolutely positioned: you can add a z-index to that to make the overlay on the top of other elements.

gpbl
  • 4,721
  • 5
  • 31
  • 45
0

Also, you can use Portals with a custom overlay component (props - overlayComponent) to render it on top of everything. But it can cause a problem with the positioning component, so I recommend use Popper of material-ui as custom overlay component because it showing in the free space area on the screen. See codesandbox example.

Example: https://codesandbox.io/s/optimistic-glitter-c77gb?file=/src/DateRangePicker.js

Adi Dasler
  • 319
  • 4
  • 10