bug: Datepicker always displays below input field

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Steps to reproduce

1. Go to any datepicker example in the docs (i.e. title)
2. Scroll so that the input field is at the bottom of the viewable content
3. Open datepicker
4. Datepicker displays below the field and requires scrolling to view

Current behavior

Unlike the tooltip or popover components, Datepicker does not have a sense of it's location on the page and will always show the datepicker below the input field

Expected behavior

Datepicker should behave like the tooltip and popover components where it will display above the field if there isn't enough space under it to fully display.

Context

Looking to improve a confusing user experience when opening the datepicker at the bottom of a page or container. It may not be obvious to the user that they are required to scroll to select a date. See screenshot below, where the datepicker is past the browser's viewport:

Start with the Datepicker example linked in the issue and compare its behavior with the tooltip and popover components. Trace how those components choose their placement, then verify that the datepicker opens above the input when there is insufficient space below and remains usable in the documented example.