[Request] Add a direction prop to set which way the picker opens

[MrLeebo]

This is a new feature request. If you position the Datetime control towards the bottom of the page, the picker will appear below it and off the page entirely, forcing the user to scroll before they can make a selection. I hope it would not be too much trouble to add a direction prop which could take oneOf(['up', 'down', 'left', 'right']) and position the picker in that direction relative to the input.

<Datetime direction="up" />

[simeg]

Hi @MrLeebo. I've also had the specific problem you are mentioning, you can solve it using JS. Maybe even HTML using an anchor? But about your suggestion, I think the idea is good. If you'd like to create the code I'd be happy to review the PR.

[MrLeebo]

I created the issue because I don't think I have time to learn the repo and implement this right now, but if that changes I will open up a PR.

[danosborne]

+1

Will also try to spin up a PR...

[simeg]

A tip: use react-date-playground for development (check the README).

[danosborne]

Hacked for 5 mins and opened the PR above. Are people happy with the approach?

If so I will tidy it up and actually follow the contributing guidelines etc. ;-)

[Krzyku]

For me direction prop is misleading. I understand direction as left-to-right or right-to-left settings. Maybe position is better idea for name of this feature?

[bjbrewster]

I agree. Bootstrap Popover/Tooltip/Overlay uses prop placement with values top, bottom, left and right. Can we use the same prop name with top and bottom?

[simeg]

placement sounds good to me. Will try to find time for looking into this soon.

[kostiantyn-solianyk]

any updates?

[Bramgus12]

Is there a workaround to get the date picker above the input field?

[jvnlwn]

To move the date picker above the input, just add bottom: 100%; style to the . rdtPicker class. (Caveat in case it matters: this is version 2.14.0 pictured.)