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

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

Follow me on Twitter

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.

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]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

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–2022 Infinitbility
About
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]