Hello Friends,

Welcome To Infinitbility!

This article will help you to show datepicker bottom every time when it’s open, below example based on react-datepicker package then please first verify with your project datepicker package.

Sometime, react-datepicker open in window it’s half of picker then we have only one solution we have to show datepicker bottom align when it’s open.

Let’s start today topic How to show bottom in react datepicker

Here, we are going to use popperPlacement and popperModifiers to show datepicker at bottom.

We have to pass bellow value on datepicker.

popperPlacement="bottom"
popperModifiers={{
    flip: {
        behavior: ["bottom"] // don't allow it to flip to be above
    },
    preventOverflow: {
        enabled: false // tell it not to try to stay within the view (this prevents the popper from covering the element you clicked)
    },
    hide: {
        enabled: false // turn off since needs preventOverflow to be enabled
    }
}}

Let’s understand with below example.

<DatePicker
    selected={this.state.startDate}
    onChange={this.dateChange}
    onClickOutside={this.datePickerValue}
    maxDate={new Date()}
    dateFormat="dd-MM-yyyy"
    popperPlacement="bottom"
    popperModifiers={{
        flip: {
            behavior: ["bottom"] // don't allow it to flip to be above
        },
        preventOverflow: {
            enabled: false // tell it not to try to stay within the view (this prevents the popper from covering the element you clicked)
        },
        hide: {
            enabled: false // turn off since needs preventOverflow to be enabled
        }
    }}
    showYearDropdown
    showMonthDropdown
/>

Thanks for reading…

May be you are looking for it

How to show bottom in react datepicker

How to generate dynamic route in React

Deploy React Application on Ubuntu Apache