React-datepicker: I want to change the position of the calendar

[m-morisaki]

The calendar is hidden on the smartphone.
Can you adjust the position?

[postal286]

Have the same issue. Want to move it left depends on input position. Someone know how to do that ?).

This params will help you: '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'

Found params in src. You need to pass one of this values to popperPlacement props to the DatePicker component like that - <DatePicker popperPlacement="bottom-end" />.

Someone who knows how to contact with develop team tell them to update popperPlacement docs. It's not so clear to find this values. Thx.

[m-morisaki]

I'm so grateful for that!

[benjaminkniaz]

Unfortunately, placement does not work for me, nor does it work in the official examples. I would expect placement to force the popper to appear on the bottom, etc.

[robhadfield]

Yep - as @benjaminkniaz says it doesn't force the position. if I say top-start I would expect to force that position even if it's near the screen edge.

[benjaminkniaz]

@robhadfield turns out you have to add a modifier to force the position. flip forces it not to flip even if the popper is going to be partially off-screen, and preventOverflow prevents it from covering the element you clicked, if again the popper detects the item will partially go off screen.

This is where I found the modifiers:
https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/popper-documentation.md#modifiers..flip

<DatePicker
    selected={props.followup_complete_by_dt}
    onChange={props.handleDueDateChange}
    className="form-control"
    monthsShown={1}
    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
        }
    }}
/>

[robhadfield]

Thanks a lot @benjaminkniaz , I'll give that a go. I ended up reverting to a dialog which really ruins the flow.

EDIT: @benjaminkniaz - worked perfectly, thanks!

[ryanlozon]

I'm still running into an issue where the popup appears off to the left. Any idea why it might be doing?

[robhadfield]

Here's the settings that work for me:

            <Picker
                showMonthDropdown
                showYearDropdown
                dropdownMode="select"
                dateFormat={ dateFormat }
                minDate={ isDate(minDate) ? moment(minDate) : null }
                maxDate={ isDate(maxDate) ? moment(maxDate) : null }
                placeholderText={ placeholder }
                selected={ date && isDate(date) ? moment(date) : initialDate }
                onChange={ onChange }
                disabled={ disabled }
                withPortal={ withPortal ? true : false }
                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
                    }
                }}
            />

[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.

[jacky-ew]

Hi any possible solution to this issue?
the datepicker is overlapped with the dates on calendar

[robhadfield]

@jacky-ew Looks like a z-index issue between the picker and Calendar, try dropping your calendar down to z-index:1 ?

[jacky-ew]

Hi i think its better to set datepicker popper to have z-index: 1, but cannot find props in the lib

[jacky-ew]

managed to solved it by adding z-index in div container instead, thank you @robhadfield

[robhadfield]

Difficult to advise without seeing the live code but glad you got it working 👍

[rrankawat]

Have the same issue. Want to move it left depends on input position. Someone know how to do that ?).

This params will help you: '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'

Found params in src. You need to pass one of this values to popperPlacement props to the DatePicker component like that - <DatePicker popperPlacement="bottom-end" />.

Someone who knows how to contact with develop team tell them to update popperPlacement docs. It's not so clear to find this values. Thx.
Awesome Man!!!