Add popoverPlacement prop in EuiDatePicker

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Added `showCloseButton` and `dockedBreakpoint` flexibility to `EuiCollapsibleNav` ([#3330](https://github.com/elastic/eui/pull/3330))
 - Added `panelStyle` prop to `EuiPopover` to distinguish style object configuration ([#3329](https://github.com/elastic/eui/pull/3329))
+- Expose `popperPlacement` prop in `EuiDatePicker` ([#3359](https://github.com/elastic/eui/pull/3359))
 
 **Bug Fixes**
 

src-docs/src/views/date_picker/range.js

@@ -52,6 +52,7 @@ export default class extends Component {
             isInvalid={this.state.startDate > this.state.endDate}
             aria-label="End date"
             showTimeSelect
+            popperPlacement="bottom-end"
           />
         }
       />

src/components/date_picker/__snapshots__/date_picker.test.tsx.snap

@@ -45,6 +45,7 @@ exports[`EuiDatePicker is rendered 2`] = `
   onMonthChange={[Function]}
   onSelect={[Function]}
   onYearChange={[Function]}
+  popperPlacement="bottom-start"
   preventOpenOnFocus={false}
   previousMonthButtonLabel="Previous Month"
   readOnly={false}

src/components/date_picker/date_picker.tsx

@@ -39,6 +39,19 @@ export const euiDatePickerDefaultTimeFormat = 'hh:mm A';
 
 const DatePicker = _ReactDatePicker as typeof ReactDatePicker;
 
+export type EuiDatePickerPopperPlacement =
+  | 'bottom'
+  | 'bottom-end'
+  | 'bottom-start'
+  | 'left'
+  | 'left-end'
+  | 'right'
+  | 'right-end'
+  | 'right-start'
+  | 'top'
+  | 'top-end'
+  | 'top-start';
+
 interface EuiExtendedDatePickerProps extends ReactDatePickerProps {
   /**
    * Applies classes to the numbered days provided. Check docs for example.
@@ -89,6 +102,11 @@ interface EuiExtendedDatePickerProps extends ReactDatePickerProps {
    * Show the icon in input
    */
   showIcon?: boolean;
+
+  /**
+   * Open the popper in one of the positions
+   */
+  popperPlacement?: EuiDatePickerPopperPlacement;
 }
 
 type _EuiDatePickerProps = CommonProps & EuiExtendedDatePickerProps;
@@ -109,6 +127,7 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> {
     showIcon: true,
     showTimeSelect: false,
     timeFormat: euiDatePickerDefaultTimeFormat,
+    popperPlacement: 'bottom-start',
   };
 
   render() {
@@ -138,6 +157,7 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> {
       openToDate,
       placeholder,
       popperClassName,
+      popperPlacement,
       selected,
       shadow,
       shouldCloseOnSelect,
@@ -262,6 +282,7 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> {
                       utcOffset={utcOffset}
                       yearDropdownItemNumber={7}
                       accessibleMode
+                      popperPlacement={popperPlacement}
                       {...rest}
                     />
                   );