Search code examples
reactjsreact-day-picker

React Day Picker calendar overlay pops up behind other components

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

  • 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.