React-date-picker: Positioning of react-date-picker

[bijay-ps]

Hi,

I am using this library and like it for it's simplicity and easy to use features. And now am stuck at one point. Check the image attached date picker

As you can see the top part is hidden behind my menu bar.

How can I position it to open somewhere else or modify the css myself to adjust it's position.

I have made a reusable component using this date picker, code is below:

import React from 'react';
import DatePicker from 'react-date-picker';

const CustomDatePicker = ({dtVal, handleChange}) => {
  return (
      <>
        <DatePicker
          onChange={handleChange}
          value={dtVal}
          clearIcon={null}
          format="dd/MM/yyyy"
          className="mr-2"
        />
     </>
  );
};

export default CustomDatePicker;

And it is being used like this:

<LabelContainer className="mr-2"> Visited On:</LabelContainer>
<CustomDatePicker 
  calendarClassName="calender-custom-position" 
  className="ml-4" 
  dtVal={visitDate}
  handleChange={onDateChange}
/>

[gabrielgrover]

I have a similar issue. On mobile devices the date picker collides with our navbar. It would be great if we could control the direction the date picker opens

_{Sent with GitHawk}

[sullyslegacy]

I agree had to add

.react-date-picker__calendar--open {
  top: 100% !important;
  bottom: unset !important;
}

so Date Picker always shows under input

[sukesh-s]

Hi
I'm also having a issue i'm using version 7.9
I'm using date picker on modal here

[wojtekmaj]

@sukesh-s Your modal window styling causes calendar to be cut off. Sadly the only thing that could "escape" overflow hidden is position float, which creates so many issues on its own I've decided not to go for it.

[benesva4]

Try to give it position: fixed;