React-datepicker: Position of the month container

[epsyan]

What should I do if I place date picker at the top-right corner of the page ? Month container becomes half-hidden to the right border of the browser window. Is there any solution?
bug_demo

P.S. I've tried to use popoverAttachment="top right". But it looks like it works incorrect
bug_demo_2

[ian-moore]

Also seeing this behavior, the docs are not clear on what the options for the position props actually impact

[subuta]

Latest example contains popperPlacement example. It might work for you guys!

https://hacker0x01.github.io/react-datepicker/

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    popperPlacement="top-end"
    popperModifiers={{
      offset: {
        enabled: true,
        offset: '5px, 10px'
      },
      preventOverflow: {
        enabled: true,
        escapeWithReference: false, // force popper to stay in viewport (even when input is scrolled out of view)
        boundariesElement: 'viewport'
      }
    }}
/>

These values are valid for popperPlacement :)

export const popperPlacementPositions = [
  'auto',
  'auto-left',
  'auto-right',
  'bottom',
  'bottom-end',
  'bottom-start',
  'left',
  'left-end',
  'left-start',
  'right',
  'right-end',
  'right-start',
  'top',
  'top-end',
  'top-start'
]

https://github.com/Hacker0x01/react-datepicker/blob/c179eecbe80885e410e4d8e2a7d776c0e7f644ef/src/popper_component.jsx#L5

[iisa]

hi, wanted to check in. Really love this datepicker, though it seems that the popperPlacement is not working. Not even in the demo. if you scroll the popperPlacement example a lil higher than the midline of the window, it will drop below the input

[caitlin]

The popper position seems to work fine for me, but the triangle isn't scooting over to the other side (for bottom-end). It looks like the CSS in react-datepicker.css is missing special styles for "end".

[carmouche]

I was experiencing the same thing as @iisa.
After a ton of searching, it seems that you need to set the flip modifier to enabled: false to prevent it from flipping when it reaches the boundaries of the page.
https://popper.js.org/popper-documentation.html#modifiers..flip

I updated my props to:

<DatePicker
  popperPlacement="botom-start"
  popperModifiers={{
    flip: {
      enabled: false
    },
    preventOverflow: {
      enabled: true,
      escapeWithReference: false
    }
  }}
/>

[evepen1]

Facing the same issue with react-datepicker placed on top-right corner of the screen.

The below CSS code worked for me check it out:

.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle { margin-left: 8em; }

[canhoviet-zz]

Basically, @carmouche 's solution works. However, when it comes into time picker, it doesn't work correctly: the time picker is still hidden (see red rectangle at the top right)

This is b/c the time container element is positioned as absolute and thus taken out of the normal flow. Therefore, the popper only takes date (in red)

container's width into account.

Modifying the CSS may solve the issue but it has the risks of introducing other regression issues if not careful.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[JulsRicketti]

Coming in late for the party, so perhaps things have changed since this thread was last updated.

I am having the issues of the DatePicker's popper being rendered off screen when I open it. The popperPlacement and popperModifiers props do nothing for me.

This is roughly what my code looks like:

 <DatePicker
            popperPlacement='top'
            showTime={true}
            value={date}
            onChange={date => setDate(date)}
          />

This is how it looks when being rendered:

Not sure where to take it from here.

[maedi]

@JulsRicketti What's that dark box represent, the edge of the screen?

From what I can tell the library still uses the popperPlacement variable and defaults to 'bottom-start' placement:
https://github.com/Hacker0x01/react-datepicker/blob/master/src/popper_component.jsx#L22

[yosagar]

use popperPlacement='top-start' to open it on the top side.