Navigate back to the homepage

How to show bottom in react datepicker

Infinitbility
React
June 6th, 2021 · 1 min read
How to show bottom in react datepicker

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.

1popperPlacement="bottom"
2popperModifiers={{
3 flip: {
4 behavior: ["bottom"] // don't allow it to flip to be above
5 },
6 preventOverflow: {
7 enabled: false // tell it not to try to stay within the view (this prevents the popper from covering the element you clicked)
8 },
9 hide: {
10 enabled: false // turn off since needs preventOverflow to be enabled
11 }
12}}

Let’s understand with below example.

1<DatePicker
2 selected={this.state.startDate}
3 onChange={this.dateChange}
4 onClickOutside={this.datePickerValue}
5 maxDate={new Date()}
6 dateFormat="dd-MM-yyyy"
7 popperPlacement="bottom"
8 popperModifiers={{
9 flip: {
10 behavior: ["bottom"] // don't allow it to flip to be above
11 },
12 preventOverflow: {
13 enabled: false // tell it not to try to stay within the view (this prevents the popper from covering the element you clicked)
14 },
15 hide: {
16 enabled: false // turn off since needs preventOverflow to be enabled
17 }
18 }}
19 showYearDropdown
20 showMonthDropdown
21/>

Subscribe Our Newsletter for the weekly update.

May be you are looking for it

  1. How to show bottom in react datepicker
  2. How to generate dynamic route in React
  3. Deploy React Application on Ubuntu Apache

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Tutorials

React Native

Categories

More articles from Infinitbility

Build failed after update Xcode 12.5

Build failed after update Xcode 12.5

how to solve Build failed after update Xcode 12.5

June 1st, 2021 · 1 min read
React native SVG

React native SVG

how to use svg in react native

May 15th, 2021 · 1 min read
© 2020–2021 Infinitbility
Disclaimer
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]