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/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,8 @@ export const euiDatePickerDefaultTimeFormat = 'hh:mm A';
 
 const DatePicker = _ReactDatePicker as typeof ReactDatePicker;
 
+export type EuiDatePickerPopoverPlacement = ReactDatePickerProps['popperPlacement'];
+
 interface EuiExtendedDatePickerProps extends ReactDatePickerProps {
   /**
    * Applies classes to the numbered days provided. Check docs for example.
@@ -89,6 +91,11 @@ interface EuiExtendedDatePickerProps extends ReactDatePickerProps {
    * Show the icon in input
    */
   showIcon?: boolean;
+
+  /**
+   * Sets the placement of the popover. It accepts: `"bottom"`, `"bottom-end"`, `"bottom-start"`, `"left"`, `"left-end"`, `"right"`, `"right-end"`, `"right-start"`, `"top"`, `"top-end"`, `"top-start"`
+   */
+  popoverPlacement?: EuiDatePickerPopoverPlacement;
 }
 
 type _EuiDatePickerProps = CommonProps & EuiExtendedDatePickerProps;
@@ -109,6 +116,7 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> {
     showIcon: true,
     showTimeSelect: false,
     timeFormat: euiDatePickerDefaultTimeFormat,
+    popoverPlacement: 'bottom-start',
   };
 
   render() {
@@ -138,6 +146,7 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> {
       openToDate,
       placeholder,
       popperClassName,
+      popoverPlacement,
       selected,
       shadow,
       shouldCloseOnSelect,
@@ -262,6 +271,7 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> {
                       utcOffset={utcOffset}
                       yearDropdownItemNumber={7}
                       accessibleMode
+                      popperPlacement={popoverPlacement}
                       {...rest}
                     />
                   );

src/components/date_picker/date_picker_range.tsx

@@ -112,6 +112,7 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
         showIcon: false,
         fullWidth: fullWidth,
         readOnly: readOnly,
+        popoverPlacement: 'bottom-end',
       }
     );
   }

src/components/date_picker/react-datepicker.d.ts

@@ -33,6 +33,19 @@
 import * as React from 'react';
 import * as moment from 'moment';
 
+type popperPlacement =
+  | 'bottom'
+  | 'bottom-end'
+  | 'bottom-start'
+  | 'left'
+  | 'left-end'
+  | 'right'
+  | 'right-end'
+  | 'right-start'
+  | 'top'
+  | 'top-end'
+  | 'top-start';
+
 export interface ReactDatePickerProps {
   /**
    * Whether changes to Year and Month (via dropdowns) should trigger `onChange`
@@ -144,7 +157,7 @@ export interface ReactDatePickerProps {
    */
   popperClassName?: string;
   popperContainer?(props: { children: React.ReactNode[] }): React.ReactNode;
-  popperPlacement?: string;
+  popperPlacement?: popperPlacement;
   preventOpenOnFocus?: boolean;
   readOnly?: boolean;
   required?: boolean;