From c53c078633f20a312f464757a6a4c092ef3c598f Mon Sep 17 00:00:00 2001
From: Jason Rhodes <jason.matthew.rhodes@gmail.com>
Date: Fri, 15 Feb 2019 18:29:17 -0500
Subject: [PATCH 1/7] Updates docs so datepicker becomes date picker

---
 .../src/views/date_picker/custom_input.js     |   2 +-
 .../views/date_picker/date_picker_example.js  | 544 ++++++++++--------
 2 files changed, 308 insertions(+), 238 deletions(-)

diff --git a/src-docs/src/views/date_picker/custom_input.js b/src-docs/src/views/date_picker/custom_input.js
index 702fa600f5a..deab042bee2 100644
--- a/src-docs/src/views/date_picker/custom_input.js
+++ b/src-docs/src/views/date_picker/custom_input.js
@@ -11,7 +11,7 @@ import {
   EuiButton,
 } from '../../../../src/components';
 
-// Should be a component because the datepicker does some ref stuff behind the scenes
+// Should be a component because the date picker does some ref stuff behind the scenes
 // eslint-disable-next-line react/prefer-stateless-function
 class ExampleCustomInput extends React.Component {
 
diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/src-docs/src/views/date_picker/date_picker_example.js
index 1f2c69f95c2..74f8af06c10 100644
--- a/src-docs/src/views/date_picker/date_picker_example.js
+++ b/src-docs/src/views/date_picker/date_picker_example.js
@@ -2,9 +2,7 @@ import React from 'react';
 
 import { renderToHtml } from '../../services';
 
-import {
-  GuideSectionTypes,
-} from '../../components';
+import { GuideSectionTypes } from '../../components';
 
 import {
   EuiCode,
@@ -64,248 +62,320 @@ const superDatePickerSource = require('!!raw-loader!./super_date_picker');
 const superDatePickerHtml = renderToHtml(SuperDatePicker);
 
 export const DatePickerExample = {
-  title: 'DatePicker',
-  sections: [{
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: datePickerSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: datePickerHtml,
-    }],
-    text: (
-      <p>
-        At its most bare the <EuiCode>EuiDatePicker</EuiCode> only requires
-        props for <EuiCode>selected</EuiCode> and <EuiCode>onChange</EuiCode>.
-        It depends on <EuiLink href="https://momentjs.com/docs/">moment</EuiLink> for
-        all of its formatting.
-      </p>
-    ),
-    components: { EuiDatePicker },
-    demo: <DatePicker />,
-    props: { EuiDatePicker },
-  }, {
-    title: 'Datepicker states',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: statesSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: statesHtml,
-    }],
-    text: (
-      <p>
-        Examples of how the input can appear within a form. This should match our
-        other form styles.
-      </p>
-    ),
-    demo: <States />,
-  }, {
-    title: 'Time selection',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: timeSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: timeHtml,
-    }],
-    text: (
-      <p>
-        Two props control time selction. <EuiCode>showTimeSelect</EuiCode> will make
-        time selection appear next to the calendar
-        and <EuiCode>showTimeSelectOnly</EuiCode> will exclude the calendar and
-        make the time selection the only thing you see. Make sure to adjust
-        your <EuiCode>dateFormat</EuiCode> and <EuiCode>timeFormat</EuiCode> values
-        to match.
-      </p>
-    ),
-    demo: <Time />,
-  }, {
-    title: 'Locale',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: localeSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: localeHtml,
-    }],
-    text: (
-      <p>
-        Locale formatting is achieved by using the <EuiCode>locale</EuiCode>,
-        <EuiCode>timeFormat</EuiCode> and <EuiCode>dateFormat</EuiCode> props.
-        The later will take any <EuiCode>moment()</EuiCode> notation. Check{' '}
-        <a href="https://en.wikipedia.org/wiki/Date_format_by_country">Date format by country</a>
-        {' '}for formatting examples.
-      </p>
-    ),
-    demo: <Locale />,
-  }, {
-    title: 'Datepicker range',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: rangeSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: rangeHtml,
-    }],
-    text: (
-      <p>
-        By passing <EuiCode>startDate</EuiCode> and <EuiCode>endDate</EuiCode> props
-        you can provide styling the range in between two dates. To further style the
-        group as a single control, use <EuiCode>EuiDatePickerRange</EuiCode> and pass
-        the date picker controls into
-        the <EuiCode>startDateControl</EuiCode> and <EuiCode>endDateControl</EuiCode> props.
-      </p>
-    ),
-    demo: <Range />,
-    props: { EuiDatePickerRange },
-  }, {
-    title: 'Only allow specific dates and times',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: minMaxSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: minMaxHtml,
-    }],
-    text: (
-      <p>
-        Use  the <EuiCode>minDate</EuiCode>,
-        <EuiCode>maxDate</EuiCode>,
-        <EuiCode>minTime</EuiCode>,
-        and <EuiCode>maxTime</EuiCode>
-        props to specify specific ranges the <EuiCode>selected</EuiCode> code must
-        must fall into. You can also use the <EuiCode>excludeDates</EuiCode> and
-        <EuiCode>excludeTimes</EuiCode> property to disallow a specific array
-        of items from selection.
-      </p>
-    ),
-    demo: <MinMax />,
-  }, {
-    title: 'Open to a specific date',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: openToDateSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: openToDateHtml,
-    }],
-    text: (
-      <p>
-        Use <EuiCode>openToDate</EuiCode> to default selection to a specific date.
-      </p>
-    ),
-    demo: <OpenToDate />,
-  }, {
-    title: 'Custom input',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: customInputSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: customInputHtml,
-    }],
-    text: (
-      <p>
-        Use <EuiCode>customInput</EuiCode> to pass a custom input to trigger your calendar.
-      </p>
-    ),
-    demo: <CustomInput />,
-  }, {
-    title: 'UTC offsets',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: utcSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: utcHtml,
-    }],
-    text: (
-      <p>
-        Use <EuiCode>utcOffset</EuiCode> to apply an offset to the datetime.
-      </p>
-    ),
-    demo: <Utc />,
-  }, {
-    title: 'Datepicker inline',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: inlineSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: inlineHtml,
-    }],
-    text: (
-      <p>
-        Use the <EuiCode>inline</EuiCode> prop to display the date picker directly
-        in the page. If you do not need the shadows / popover effect to the date picker
-        then also apply the <EuiCode>shadow=false</EuiCode> prop as shown in the second
-        example.
-      </p>
-    ),
-    demo: <Inline />,
-  }, {
-    title: 'Custom classes',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: classesSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: classesHtml,
-    }],
-    text: (
-      <div>
+  title: 'Date Picker',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: datePickerSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: datePickerHtml,
+        },
+      ],
+      text: (
+        <p>
+          At its most bare the <EuiCode>EuiDatePicker</EuiCode> only requires
+          props for <EuiCode>selected</EuiCode> and <EuiCode>onChange</EuiCode>.
+          It depends on{' '}
+          <EuiLink href="https://momentjs.com/docs/">moment</EuiLink> for all of
+          its formatting.
+        </p>
+      ),
+      components: { EuiDatePicker },
+      demo: <DatePicker />,
+      props: { EuiDatePicker },
+    },
+    {
+      title: 'Date picker states',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: statesSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: statesHtml,
+        },
+      ],
+      text: (
+        <p>
+          Examples of how the input can appear within a form. This should match
+          our other form styles.
+        </p>
+      ),
+      demo: <States />,
+    },
+    {
+      title: 'Time selection',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: timeSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: timeHtml,
+        },
+      ],
+      text: (
+        <p>
+          Two props control time selction. <EuiCode>showTimeSelect</EuiCode>{' '}
+          will make time selection appear next to the calendar and{' '}
+          <EuiCode>showTimeSelectOnly</EuiCode> will exclude the calendar and
+          make the time selection the only thing you see. Make sure to adjust
+          your <EuiCode>dateFormat</EuiCode> and <EuiCode>timeFormat</EuiCode>{' '}
+          values to match.
+        </p>
+      ),
+      demo: <Time />,
+    },
+    {
+      title: 'Locale',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: localeSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: localeHtml,
+        },
+      ],
+      text: (
+        <p>
+          Locale formatting is achieved by using the <EuiCode>locale</EuiCode>,
+          <EuiCode>timeFormat</EuiCode> and <EuiCode>dateFormat</EuiCode> props.
+          The later will take any <EuiCode>moment()</EuiCode> notation. Check{' '}
+          <a href="https://en.wikipedia.org/wiki/Date_format_by_country">
+            Date format by country
+          </a>{' '}
+          for formatting examples.
+        </p>
+      ),
+      demo: <Locale />,
+    },
+    {
+      title: 'Date picker range',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: rangeSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: rangeHtml,
+        },
+      ],
+      text: (
+        <p>
+          By passing <EuiCode>startDate</EuiCode> and <EuiCode>endDate</EuiCode>{' '}
+          props you can provide styling the range in between two dates. To
+          further style the group as a single control, use{' '}
+          <EuiCode>EuiDatePickerRange</EuiCode> and pass the date picker
+          controls into the <EuiCode>startDateControl</EuiCode> and{' '}
+          <EuiCode>endDateControl</EuiCode> props.
+        </p>
+      ),
+      demo: <Range />,
+      props: { EuiDatePickerRange },
+    },
+    {
+      title: 'Only allow specific dates and times',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: minMaxSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: minMaxHtml,
+        },
+      ],
+      text: (
         <p>
-            Custom classes can be passed to various bits of the calendar and input.
+          Use the <EuiCode>minDate</EuiCode>,
+          <EuiCode>maxDate</EuiCode>,
+          <EuiCode>minTime</EuiCode>, and <EuiCode>maxTime</EuiCode>
+          props to specify specific ranges the <EuiCode>selected</EuiCode> code
+          must must fall into. You can also use the{' '}
+          <EuiCode>excludeDates</EuiCode> and
+          <EuiCode>excludeTimes</EuiCode> property to disallow a specific array
+          of items from selection.
         </p>
-        <ul>
-          <li><EuiCode>className</EuiCode> will pass onto the input.</li>
-          <li><EuiCode>calendarClassName</EuiCode> will pass onto the calendar itself.</li>
-          <li><EuiCode>dayClassName</EuiCode> will pass onto specificed days.</li>
-        </ul>
-      </div>
-    ),
-    demo: <Classes />,
-  }, {
-    title: 'Super date picker',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: superDatePickerSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: superDatePickerHtml,
-    }],
-    text: (
-      <div>
+      ),
+      demo: <MinMax />,
+    },
+    {
+      title: 'Open to a specific date',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: openToDateSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: openToDateHtml,
+        },
+      ],
+      text: (
         <p>
-          <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> date times are passed as strings
-          in either datemath format (e.g.: now, now-15m, now-15m/m)
-          or as absolute date in the format <EuiCode>YYYY-MM-DDTHH:mm:ss.sssZ</EuiCode>
+          Use <EuiCode>openToDate</EuiCode> to default selection to a specific
+          date.
         </p>
+      ),
+      demo: <OpenToDate />,
+    },
+    {
+      title: 'Custom input',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: customInputSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: customInputHtml,
+        },
+      ],
+      text: (
         <p>
-          <EuiCode>onTimeChange</EuiCode> will be immediately invoked when{' '}
-          <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> change from interactions with{' '}
-          <strong> Quick select</strong>, <strong>Commonly used</strong>, or <strong>Recently used date ranges</strong>{' '}
-          since these interactions set both <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> in a single event.
+          Use <EuiCode>customInput</EuiCode> to pass a custom input to trigger
+          your calendar.
         </p>
+      ),
+      demo: <CustomInput />,
+    },
+    {
+      title: 'UTC offsets',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: utcSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: utcHtml,
+        },
+      ],
+      text: (
         <p>
-          <EuiCode>onTimeChange</EuiCode> will <strong>not</strong> be invoked when
-          <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> change from interactions with{' '}
-          <strong>Absolute</strong>, <strong>Relative</strong>, and <strong>Now</strong> tabs.{' '}
-          <EuiCode>onTimeChange</EuiCode> will be invoked when the user clicks the <strong>Update</strong> button.
-          This gives users the ability to set both <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode>{' '}
-          before triggering <EuiCode>onTimeChange</EuiCode>.
-          Set <EuiCode>showUpdateButton</EuiCode> to <EuiCode>false</EuiCode>{' '}
-          to immediately invoke <EuiCode>onTimeChange</EuiCode>{' '}
-          for all <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> changes.
+          Use <EuiCode>utcOffset</EuiCode> to apply an offset to the datetime.
         </p>
+      ),
+      demo: <Utc />,
+    },
+    {
+      title: 'Date picker inline',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: inlineSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: inlineHtml,
+        },
+      ],
+      text: (
         <p>
-          Set <EuiCode>isAutoRefreshOnly</EuiCode> to <EuiCode>true </EuiCode> to limit the component to only display auto refresh content.
-          This is useful in cases where there is no time data but auto-refresh configuration is still desired.
+          Use the <EuiCode>inline</EuiCode> prop to display the date picker
+          directly in the page. If you do not need the shadows / popover effect
+          to the date picker then also apply the <EuiCode>shadow=false</EuiCode>{' '}
+          prop as shown in the second example.
         </p>
-      </div>
-    ),
-    demo: <SuperDatePicker />,
-    props: { EuiSuperDatePicker, EuiSuperUpdateButton },
-  }],
+      ),
+      demo: <Inline />,
+    },
+    {
+      title: 'Custom classes',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: classesSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: classesHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            Custom classes can be passed to various bits of the calendar and
+            input.
+          </p>
+          <ul>
+            <li>
+              <EuiCode>className</EuiCode> will pass onto the input.
+            </li>
+            <li>
+              <EuiCode>calendarClassName</EuiCode> will pass onto the calendar
+              itself.
+            </li>
+            <li>
+              <EuiCode>dayClassName</EuiCode> will pass onto specificed days.
+            </li>
+          </ul>
+        </div>
+      ),
+      demo: <Classes />,
+    },
+    {
+      title: 'Super date picker',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: superDatePickerSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: superDatePickerHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> date times are
+            passed as strings in either datemath format (e.g.: now, now-15m,
+            now-15m/m) or as absolute date in the format{' '}
+            <EuiCode>YYYY-MM-DDTHH:mm:ss.sssZ</EuiCode>
+          </p>
+          <p>
+            <EuiCode>onTimeChange</EuiCode> will be immediately invoked when{' '}
+            <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> change from
+            interactions with <strong> Quick select</strong>,{' '}
+            <strong>Commonly used</strong>, or{' '}
+            <strong>Recently used date ranges</strong> since these interactions
+            set both <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> in a
+            single event.
+          </p>
+          <p>
+            <EuiCode>onTimeChange</EuiCode> will <strong>not</strong> be invoked
+            when
+            <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> change from
+            interactions with <strong>Absolute</strong>,{' '}
+            <strong>Relative</strong>, and <strong>Now</strong> tabs.{' '}
+            <EuiCode>onTimeChange</EuiCode> will be invoked when the user clicks
+            the <strong>Update</strong> button. This gives users the ability to
+            set both <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> before
+            triggering <EuiCode>onTimeChange</EuiCode>. Set{' '}
+            <EuiCode>showUpdateButton</EuiCode> to <EuiCode>false</EuiCode> to
+            immediately invoke <EuiCode>onTimeChange</EuiCode> for all{' '}
+            <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> changes.
+          </p>
+          <p>
+            Set <EuiCode>isAutoRefreshOnly</EuiCode> to <EuiCode>true </EuiCode>{' '}
+            to limit the component to only display auto refresh content. This is
+            useful in cases where there is no time data but auto-refresh
+            configuration is still desired.
+          </p>
+        </div>
+      ),
+      demo: <SuperDatePicker />,
+      props: { EuiSuperDatePicker, EuiSuperUpdateButton },
+    },
+  ],
 };

From 54759c10d6f430d66faf4271442cbfd29404c0a5 Mon Sep 17 00:00:00 2001
From: Jason Rhodes <jason.matthew.rhodes@gmail.com>
Date: Fri, 15 Feb 2019 19:13:03 -0500
Subject: [PATCH 2/7] Adds type file for date picker components

---
 src/components/date_picker/index.d.ts | 101 ++++++++++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 src/components/date_picker/index.d.ts

diff --git a/src/components/date_picker/index.d.ts b/src/components/date_picker/index.d.ts
new file mode 100644
index 00000000000..cbe71a96331
--- /dev/null
+++ b/src/components/date_picker/index.d.ts
@@ -0,0 +1,101 @@
+import React from 'react';
+import { CommonProps } from '../common';
+import { Moment } from 'moment';
+import { IconType } from '../icon';
+
+declare module '@elastic/eui' {
+  interface OnTimeChangeProps {
+    start: string;
+    end: string;
+    isInvalid: boolean;
+    isQuickSelection: boolean;
+  }
+
+  interface OnRefreshChangeProps {
+    isPaused: boolean;
+    refreshInterval: number;
+  }
+
+  export type EuiDatePickerProps = CommonProps & {
+    calendarClassName?: string;
+    customInput?: React.ReactNode;
+    dateFormat?: string;
+    // not sure if this is correct
+    dayClassName?: (date: Moment) => string | undefined;
+    // not sure if this is correct
+    filterDates?: Moment[];
+    fullWidth?: boolean;
+    // not sure if this is correct
+    injectTimes?: Moment[];
+    // not sure what this generic value should be?
+    inputRef: React.Ref<HTMLInputElement>;
+    isInvalid: boolean;
+    isLoading: boolean;
+    locale: string;
+    maxDate: Moment;
+    maxTime: Moment;
+    minDate: Moment;
+    minTime: Moment;
+    // pulled from react-datepickeer definitely typed
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-datepicker/index.d.ts#L68
+    onChange(
+      date: Date | null,
+      event: React.SyntheticEvent<any> | undefined
+    ): void;
+    openToDate: Moment;
+    placeholder: string;
+    popperClassName: string;
+    selected: Moment;
+    shadow: boolean;
+    shouldCloseOnSelect: boolean;
+    showIcon: boolean;
+    showTimeSelect: boolean;
+    showTimeSelectOnly: boolean;
+    timeFormat: string;
+  };
+
+  export const EuiDatePicker: React.SFC<EuiDatePickerProps>;
+
+  export type EuiDatePickerRangeProps = CommonProps & {
+    startDateControl: typeof EuiDatePicker;
+    endDateControl: typeof EuiDatePicker;
+    iconType: boolean | IconType;
+    fullWidth: boolean;
+    isCustom: boolean;
+  };
+
+  export const EuiDatePickerRange: React.SFC<EuiDatePickerRangeProps>;
+
+  export interface EuiSuperDatePickerCommonRange {
+    start: string;
+    end: string;
+    label: string;
+  }
+
+  export interface EuiSuperDatePickerRecentRange {
+    start: string;
+    end: string;
+  }
+
+  export interface EuiSuperDatePickerQuickSelectPanel {
+    title: string;
+    content: React.ReactNode;
+  }
+
+  export type EuiSuperDatePickerProps = CommonProps & {
+    start?: string;
+    end?: string;
+    isPaused?: boolean;
+    refreshInterval?: number;
+    onTimeChange: (props: OnTimeChangeProps) => void;
+    onRefreshChange?: (props: OnRefreshChangeProps) => void;
+    commonlyUsedRanges?: EuiSuperDatePickerCommonRange[];
+    dateFormat?: string;
+    recentlyUsedRanges?: EuiSuperDatePickerRecentRange[];
+    showUpdateButton: boolean;
+    isAutoRefreshOnly: boolean;
+    customQuickSelectPanels: EuiSuperDatePickerQuickSelectPanel[];
+  };
+
+  export const EuiSuperDatePicker: React.SFC<EuiSuperDatePickerProps>;
+}

From f98466f330f365372b4e0f99d10ddc8d211d2f85 Mon Sep 17 00:00:00 2001
From: Jason Rhodes <jason.matthew.rhodes@gmail.com>
Date: Fri, 15 Feb 2019 19:41:11 -0500
Subject: [PATCH 3/7] Revert aggressive auto-formatting changes from previous
 commit

---
 .../views/date_picker/date_picker_example.js  | 542 ++++++++----------
 1 file changed, 236 insertions(+), 306 deletions(-)

diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/src-docs/src/views/date_picker/date_picker_example.js
index 74f8af06c10..6a977a3969b 100644
--- a/src-docs/src/views/date_picker/date_picker_example.js
+++ b/src-docs/src/views/date_picker/date_picker_example.js
@@ -2,7 +2,9 @@ import React from 'react';
 
 import { renderToHtml } from '../../services';
 
-import { GuideSectionTypes } from '../../components';
+import {
+  GuideSectionTypes,
+} from '../../components';
 
 import {
   EuiCode,
@@ -63,319 +65,247 @@ const superDatePickerHtml = renderToHtml(SuperDatePicker);
 
 export const DatePickerExample = {
   title: 'Date Picker',
-  sections: [
-    {
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: datePickerSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: datePickerHtml,
-        },
-      ],
-      text: (
-        <p>
-          At its most bare the <EuiCode>EuiDatePicker</EuiCode> only requires
-          props for <EuiCode>selected</EuiCode> and <EuiCode>onChange</EuiCode>.
-          It depends on{' '}
-          <EuiLink href="https://momentjs.com/docs/">moment</EuiLink> for all of
-          its formatting.
-        </p>
-      ),
-      components: { EuiDatePicker },
-      demo: <DatePicker />,
-      props: { EuiDatePicker },
-    },
-    {
-      title: 'Date picker states',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: statesSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: statesHtml,
-        },
-      ],
-      text: (
-        <p>
-          Examples of how the input can appear within a form. This should match
-          our other form styles.
-        </p>
-      ),
-      demo: <States />,
-    },
-    {
-      title: 'Time selection',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: timeSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: timeHtml,
-        },
-      ],
-      text: (
-        <p>
-          Two props control time selction. <EuiCode>showTimeSelect</EuiCode>{' '}
-          will make time selection appear next to the calendar and{' '}
-          <EuiCode>showTimeSelectOnly</EuiCode> will exclude the calendar and
-          make the time selection the only thing you see. Make sure to adjust
-          your <EuiCode>dateFormat</EuiCode> and <EuiCode>timeFormat</EuiCode>{' '}
-          values to match.
-        </p>
-      ),
-      demo: <Time />,
-    },
-    {
-      title: 'Locale',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: localeSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: localeHtml,
-        },
-      ],
-      text: (
-        <p>
-          Locale formatting is achieved by using the <EuiCode>locale</EuiCode>,
-          <EuiCode>timeFormat</EuiCode> and <EuiCode>dateFormat</EuiCode> props.
-          The later will take any <EuiCode>moment()</EuiCode> notation. Check{' '}
-          <a href="https://en.wikipedia.org/wiki/Date_format_by_country">
-            Date format by country
-          </a>{' '}
-          for formatting examples.
-        </p>
-      ),
-      demo: <Locale />,
-    },
-    {
-      title: 'Date picker range',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: rangeSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: rangeHtml,
-        },
-      ],
-      text: (
-        <p>
-          By passing <EuiCode>startDate</EuiCode> and <EuiCode>endDate</EuiCode>{' '}
-          props you can provide styling the range in between two dates. To
-          further style the group as a single control, use{' '}
-          <EuiCode>EuiDatePickerRange</EuiCode> and pass the date picker
-          controls into the <EuiCode>startDateControl</EuiCode> and{' '}
-          <EuiCode>endDateControl</EuiCode> props.
-        </p>
-      ),
-      demo: <Range />,
-      props: { EuiDatePickerRange },
-    },
-    {
-      title: 'Only allow specific dates and times',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: minMaxSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: minMaxHtml,
-        },
-      ],
-      text: (
+  sections: [{
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: datePickerSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: datePickerHtml,
+    }],
+    text: (
+      <p>
+        At its most bare the <EuiCode>EuiDatePicker</EuiCode> only requires
+        props for <EuiCode>selected</EuiCode> and <EuiCode>onChange</EuiCode>.
+        It depends on <EuiLink href="https://momentjs.com/docs/">moment</EuiLink> for
+        all of its formatting.
+      </p>
+    ),
+    components: { EuiDatePicker },
+    demo: <DatePicker />,
+    props: { EuiDatePicker },
+  }, {
+    title: 'Date picker states',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: statesSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: statesHtml,
+    }],
+    text: (
+      <p>
+        Examples of how the input can appear within a form. This should match our
+        other form styles.
+      </p>
+    ),
+    demo: <States />,
+  }, {
+    title: 'Time selection',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: timeSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: timeHtml,
+    }],
+    text: (
+      <p>
+        Two props control time selction. <EuiCode>showTimeSelect</EuiCode> will make
+        time selection appear next to the calendar
+        and <EuiCode>showTimeSelectOnly</EuiCode> will exclude the calendar and
+        make the time selection the only thing you see. Make sure to adjust
+        your <EuiCode>dateFormat</EuiCode> and <EuiCode>timeFormat</EuiCode> values
+        to match.
+      </p>
+    ),
+    demo: <Time />,
+  }, {
+    title: 'Locale',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: localeSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: localeHtml,
+    }],
+    text: (
+      <p>
+        Locale formatting is achieved by using the <EuiCode>locale</EuiCode>,
+        <EuiCode>timeFormat</EuiCode> and <EuiCode>dateFormat</EuiCode> props.
+        The later will take any <EuiCode>moment()</EuiCode> notation. Check{' '}
+        <a href="https://en.wikipedia.org/wiki/Date_format_by_country">Date format by country</a>
+        {' '}for formatting examples.
+      </p>
+    ),
+    demo: <Locale />,
+  }, {
+    title: 'Date picker range',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: rangeSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: rangeHtml,
+    }],
+    text: (
+      <p>
+        By passing <EuiCode>startDate</EuiCode> and <EuiCode>endDate</EuiCode> props
+        you can provide styling the range in between two dates. To further style the
+        group as a single control, use <EuiCode>EuiDatePickerRange</EuiCode> and pass
+        the date picker controls into
+        the <EuiCode>startDateControl</EuiCode> and <EuiCode>endDateControl</EuiCode> props.
+      </p>
+    ),
+    demo: <Range />,
+    props: { EuiDatePickerRange },
+  }, {
+    title: 'Only allow specific dates and times',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: minMaxSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: minMaxHtml,
+    }],
+    text: (
+      <p>
+        Use  the <EuiCode>minDate</EuiCode>,
+        <EuiCode>maxDate</EuiCode>,
+        <EuiCode>minTime</EuiCode>,
+        and <EuiCode>maxTime</EuiCode>
+        props to specify specific ranges the <EuiCode>selected</EuiCode> code must
+        must fall into. You can also use the <EuiCode>excludeDates</EuiCode> and
+        <EuiCode>excludeTimes</EuiCode> property to disallow a specific array
+        of items from selection.
+      </p>
+    ),
+    demo: <MinMax />,
+  }, {
+    title: 'Open to a specific date',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: openToDateSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: openToDateHtml,
+    }],
+    text: (
+      <p>
+        Use <EuiCode>openToDate</EuiCode> to default selection to a specific date.
+      </p>
+    ),
+    demo: <OpenToDate />,
+  }, {
+    title: 'Custom input',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: customInputSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: customInputHtml,
+    }],
+    text: (
+      <p>
+        Use <EuiCode>customInput</EuiCode> to pass a custom input to trigger your calendar.
+      </p>
+    ),
+    demo: <CustomInput />,
+  }, {
+    title: 'UTC offsets',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: utcSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: utcHtml,
+    }],
+    text: (
+      <p>
+        Use <EuiCode>utcOffset</EuiCode> to apply an offset to the datetime.
+      </p>
+    ),
+    demo: <Utc />,
+  }, {
+    title: 'Date picker inline',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: inlineSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: inlineHtml,
+    }],
+    text: (
+      <p>
+        Use the <EuiCode>inline</EuiCode> prop to display the date picker directly
+        in the page. If you do not need the shadows / popover effect to the date picker
+        then also apply the <EuiCode>shadow=false</EuiCode> prop as shown in the second
+        example.
+      </p>
+    ),
+    demo: <Inline />,
+  }, {
+    title: 'Custom classes',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: classesSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: classesHtml,
+    }],
+    text: (
+      <div>
         <p>
-          Use the <EuiCode>minDate</EuiCode>,
-          <EuiCode>maxDate</EuiCode>,
-          <EuiCode>minTime</EuiCode>, and <EuiCode>maxTime</EuiCode>
-          props to specify specific ranges the <EuiCode>selected</EuiCode> code
-          must must fall into. You can also use the{' '}
-          <EuiCode>excludeDates</EuiCode> and
-          <EuiCode>excludeTimes</EuiCode> property to disallow a specific array
-          of items from selection.
+            Custom classes can be passed to various bits of the calendar and input.
         </p>
-      ),
-      demo: <MinMax />,
-    },
-    {
-      title: 'Open to a specific date',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: openToDateSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: openToDateHtml,
-        },
-      ],
-      text: (
+        <ul>
+          <li><EuiCode>className</EuiCode> will pass onto the input.</li>
+          <li><EuiCode>calendarClassName</EuiCode> will pass onto the calendar itself.</li>
+          <li><EuiCode>dayClassName</EuiCode> will pass onto specificed days.</li>
+        </ul>
+      </div>
+    ),
+    demo: <Classes />,
+  }, {
+    title: 'Super date picker',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: superDatePickerSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: superDatePickerHtml,
+    }],
+    text: (
+      <div>
         <p>
-          Use <EuiCode>openToDate</EuiCode> to default selection to a specific
-          date.
+          <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> date times are passed as strings
+          in either datemath format (e.g.: now, now-15m, now-15m/m)
+          or as absolute date in the format <EuiCode>YYYY-MM-DDTHH:mm:ss.sssZ</EuiCode>
         </p>
-      ),
-      demo: <OpenToDate />,
-    },
-    {
-      title: 'Custom input',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: customInputSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: customInputHtml,
-        },
-      ],
-      text: (
         <p>
-          Use <EuiCode>customInput</EuiCode> to pass a custom input to trigger
-          your calendar.
+          <EuiCode>onTimeChange</EuiCode> will be immediately invoked when{' '}
+          <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> change from interactions with{' '}
+          <strong> Quick select</strong>, <strong>Commonly used</strong>, or <strong>Recently used date ranges</strong>{' '}
+          since these interactions set both <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> in a single event.
         </p>
-      ),
-      demo: <CustomInput />,
-    },
-    {
-      title: 'UTC offsets',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: utcSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: utcHtml,
-        },
-      ],
-      text: (
         <p>
-          Use <EuiCode>utcOffset</EuiCode> to apply an offset to the datetime.
+          <EuiCode>onTimeChange</EuiCode> will <strong>not</strong> be invoked when
+          <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> change from interactions with{' '}
+          <strong>Absolute</strong>, <strong>Relative</strong>, and <strong>Now</strong> tabs.{' '}
+          <EuiCode>onTimeChange</EuiCode> will be invoked when the user clicks the <strong>Update</strong> button.
+          This gives users the ability to set both <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode>{' '}
+          before triggering <EuiCode>onTimeChange</EuiCode>.
+          Set <EuiCode>showUpdateButton</EuiCode> to <EuiCode>false</EuiCode>{' '}
+          to immediately invoke <EuiCode>onTimeChange</EuiCode>{' '}
+          for all <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> changes.
         </p>
-      ),
-      demo: <Utc />,
-    },
-    {
-      title: 'Date picker inline',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: inlineSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: inlineHtml,
-        },
-      ],
-      text: (
         <p>
-          Use the <EuiCode>inline</EuiCode> prop to display the date picker
-          directly in the page. If you do not need the shadows / popover effect
-          to the date picker then also apply the <EuiCode>shadow=false</EuiCode>{' '}
-          prop as shown in the second example.
+          Set <EuiCode>isAutoRefreshOnly</EuiCode> to <EuiCode>true </EuiCode> to limit the component to only display auto refresh content.
+          This is useful in cases where there is no time data but auto-refresh configuration is still desired.
         </p>
-      ),
-      demo: <Inline />,
-    },
-    {
-      title: 'Custom classes',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: classesSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: classesHtml,
-        },
-      ],
-      text: (
-        <div>
-          <p>
-            Custom classes can be passed to various bits of the calendar and
-            input.
-          </p>
-          <ul>
-            <li>
-              <EuiCode>className</EuiCode> will pass onto the input.
-            </li>
-            <li>
-              <EuiCode>calendarClassName</EuiCode> will pass onto the calendar
-              itself.
-            </li>
-            <li>
-              <EuiCode>dayClassName</EuiCode> will pass onto specificed days.
-            </li>
-          </ul>
-        </div>
-      ),
-      demo: <Classes />,
-    },
-    {
-      title: 'Super date picker',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: superDatePickerSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: superDatePickerHtml,
-        },
-      ],
-      text: (
-        <div>
-          <p>
-            <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> date times are
-            passed as strings in either datemath format (e.g.: now, now-15m,
-            now-15m/m) or as absolute date in the format{' '}
-            <EuiCode>YYYY-MM-DDTHH:mm:ss.sssZ</EuiCode>
-          </p>
-          <p>
-            <EuiCode>onTimeChange</EuiCode> will be immediately invoked when{' '}
-            <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> change from
-            interactions with <strong> Quick select</strong>,{' '}
-            <strong>Commonly used</strong>, or{' '}
-            <strong>Recently used date ranges</strong> since these interactions
-            set both <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> in a
-            single event.
-          </p>
-          <p>
-            <EuiCode>onTimeChange</EuiCode> will <strong>not</strong> be invoked
-            when
-            <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> change from
-            interactions with <strong>Absolute</strong>,{' '}
-            <strong>Relative</strong>, and <strong>Now</strong> tabs.{' '}
-            <EuiCode>onTimeChange</EuiCode> will be invoked when the user clicks
-            the <strong>Update</strong> button. This gives users the ability to
-            set both <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> before
-            triggering <EuiCode>onTimeChange</EuiCode>. Set{' '}
-            <EuiCode>showUpdateButton</EuiCode> to <EuiCode>false</EuiCode> to
-            immediately invoke <EuiCode>onTimeChange</EuiCode> for all{' '}
-            <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> changes.
-          </p>
-          <p>
-            Set <EuiCode>isAutoRefreshOnly</EuiCode> to <EuiCode>true </EuiCode>{' '}
-            to limit the component to only display auto refresh content. This is
-            useful in cases where there is no time data but auto-refresh
-            configuration is still desired.
-          </p>
-        </div>
-      ),
-      demo: <SuperDatePicker />,
-      props: { EuiSuperDatePicker, EuiSuperUpdateButton },
-    },
-  ],
+      </div>
+    ),
+    demo: <SuperDatePicker />,
+    props: { EuiSuperDatePicker, EuiSuperUpdateButton },
+  }],
 };

From 9a2d9bbf8daf12c5b74d5c14c4c5a39f43e3f6ec Mon Sep 17 00:00:00 2001
From: Jason Rhodes <jason.matthew.rhodes@gmail.com>
Date: Tue, 19 Feb 2019 15:56:36 -0500
Subject: [PATCH 4/7] Makes props optional in new types

---
 src/components/date_picker/index.d.ts | 48 +++++++++++++--------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/date_picker/index.d.ts b/src/components/date_picker/index.d.ts
index cbe71a96331..f40c14ab922 100644
--- a/src/components/date_picker/index.d.ts
+++ b/src/components/date_picker/index.d.ts
@@ -28,30 +28,30 @@ declare module '@elastic/eui' {
     // not sure if this is correct
     injectTimes?: Moment[];
     // not sure what this generic value should be?
-    inputRef: React.Ref<HTMLInputElement>;
-    isInvalid: boolean;
-    isLoading: boolean;
-    locale: string;
-    maxDate: Moment;
-    maxTime: Moment;
-    minDate: Moment;
-    minTime: Moment;
+    inputRef?: React.Ref<HTMLInputElement>;
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    locale?: string;
+    maxDate?: Moment;
+    maxTime?: Moment;
+    minDate?: Moment;
+    minTime?: Moment;
     // pulled from react-datepickeer definitely typed
     // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-datepicker/index.d.ts#L68
     onChange(
       date: Date | null,
       event: React.SyntheticEvent<any> | undefined
     ): void;
-    openToDate: Moment;
-    placeholder: string;
-    popperClassName: string;
-    selected: Moment;
-    shadow: boolean;
-    shouldCloseOnSelect: boolean;
-    showIcon: boolean;
-    showTimeSelect: boolean;
-    showTimeSelectOnly: boolean;
-    timeFormat: string;
+    openToDate?: Moment;
+    placeholder?: string;
+    popperClassName?: string;
+    selected?: Moment;
+    shadow?: boolean;
+    shouldCloseOnSelect?: boolean;
+    showIcon?: boolean;
+    showTimeSelect?: boolean;
+    showTimeSelectOnly?: boolean;
+    timeFormat?: string;
   };
 
   export const EuiDatePicker: React.SFC<EuiDatePickerProps>;
@@ -59,9 +59,9 @@ declare module '@elastic/eui' {
   export type EuiDatePickerRangeProps = CommonProps & {
     startDateControl: typeof EuiDatePicker;
     endDateControl: typeof EuiDatePicker;
-    iconType: boolean | IconType;
-    fullWidth: boolean;
-    isCustom: boolean;
+    iconType?: boolean | IconType;
+    fullWidth?: boolean;
+    isCustom?: boolean;
   };
 
   export const EuiDatePickerRange: React.SFC<EuiDatePickerRangeProps>;
@@ -92,9 +92,9 @@ declare module '@elastic/eui' {
     commonlyUsedRanges?: EuiSuperDatePickerCommonRange[];
     dateFormat?: string;
     recentlyUsedRanges?: EuiSuperDatePickerRecentRange[];
-    showUpdateButton: boolean;
-    isAutoRefreshOnly: boolean;
-    customQuickSelectPanels: EuiSuperDatePickerQuickSelectPanel[];
+    showUpdateButton?: boolean;
+    isAutoRefreshOnly?: boolean;
+    customQuickSelectPanels?: EuiSuperDatePickerQuickSelectPanel[];
   };
 
   export const EuiSuperDatePicker: React.SFC<EuiSuperDatePickerProps>;

From ebe7fde2e8bd4dbb5564c0d92aedf8e238a567f5 Mon Sep 17 00:00:00 2001
From: Jason Rhodes <jason.matthew.rhodes@gmail.com>
Date: Thu, 21 Feb 2019 13:16:42 -0500
Subject: [PATCH 5/7] Improves types for eui date picker

---
 package.json                          |  1 +
 src/components/date_picker/index.d.ts | 37 ++++-----------------------
 yarn.lock                             | 13 ++++++++++
 3 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index d11efe3de56..631b662fdcb 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "@types/enzyme": "^3.1.13",
     "@types/jest": "^23.3.9",
     "@types/react": "^16.3.0",
+    "@types/react-datepicker": "^2.0.3",
     "@types/react-is": "~16.3.0",
     "@types/react-virtualized": "^9.18.6",
     "@types/uuid": "^3.4.4",
diff --git a/src/components/date_picker/index.d.ts b/src/components/date_picker/index.d.ts
index f40c14ab922..323371cfd5e 100644
--- a/src/components/date_picker/index.d.ts
+++ b/src/components/date_picker/index.d.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CommonProps } from '../common';
-import { Moment } from 'moment';
 import { IconType } from '../icon';
+import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker';
 
 declare module '@elastic/eui' {
   interface OnTimeChangeProps {
@@ -16,44 +16,17 @@ declare module '@elastic/eui' {
     refreshInterval: number;
   }
 
-  export type EuiDatePickerProps = CommonProps & {
-    calendarClassName?: string;
-    customInput?: React.ReactNode;
-    dateFormat?: string;
-    // not sure if this is correct
-    dayClassName?: (date: Moment) => string | undefined;
-    // not sure if this is correct
-    filterDates?: Moment[];
+  interface EuiExtendedDatePickerProps extends ReactDatePickerProps {
     fullWidth?: boolean;
-    // not sure if this is correct
-    injectTimes?: Moment[];
-    // not sure what this generic value should be?
-    inputRef?: React.Ref<HTMLInputElement>;
     isInvalid?: boolean;
     isLoading?: boolean;
-    locale?: string;
-    maxDate?: Moment;
-    maxTime?: Moment;
-    minDate?: Moment;
-    minTime?: Moment;
-    // pulled from react-datepickeer definitely typed
-    // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-datepicker/index.d.ts#L68
-    onChange(
-      date: Date | null,
-      event: React.SyntheticEvent<any> | undefined
-    ): void;
-    openToDate?: Moment;
+    inputRef?: React.Ref<ReactDatePicker>;
     placeholder?: string;
-    popperClassName?: string;
-    selected?: Moment;
     shadow?: boolean;
-    shouldCloseOnSelect?: boolean;
     showIcon?: boolean;
-    showTimeSelect?: boolean;
-    showTimeSelectOnly?: boolean;
-    timeFormat?: string;
-  };
+  }
 
+  export type EuiDatePickerProps = CommonProps & EuiExtendedDatePickerProps;
   export const EuiDatePicker: React.SFC<EuiDatePickerProps>;
 
   export type EuiDatePickerRangeProps = CommonProps & {
diff --git a/yarn.lock b/yarn.lock
index 0fa64f3090b..bd99b2065b8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -894,6 +894,14 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.3.tgz#bef071852dca2a2dbb65fecdb7bfb30cedae2de2"
   integrity sha512-sfjHrNF4zWRv3fJUGyZW46wVxhYJ/GeWIPdKxbnLIhY3bWR0Ncl2kIhZI7rpjY9KtUQAkDP8jWEmaGQGFFvruA==
 
+"@types/react-datepicker@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-2.0.3.tgz#f45747168d04e3a1c82aeec539d11510783923af"
+  integrity sha512-qBU5C4GZxCGl640rj/j/P0S8hTV0Xi0GD4mJKHDTmN03XXp4VA2uJJNuMBQyWlOgWhYB81ejnVRQgXJC5jyhaQ==
+  dependencies:
+    "@types/react" "*"
+    popper.js "^1.14.1"
+
 "@types/react-is@~16.3.0":
   version "16.3.1"
   resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-16.3.1.tgz#f3e1dee9d0eb58c049825540cb061b5588022a9e"
@@ -10161,6 +10169,11 @@ pngjs@~2.2.0:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-2.2.0.tgz#649663609a0ebab87c8f08b3fe724048b51d9d7f"
   integrity sha1-ZJZjYJoOurh8jwiz/nJASLUdnX8=
 
+popper.js@^1.14.1:
+  version "1.14.7"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.7.tgz#e31ec06cfac6a97a53280c3e55e4e0c860e7738e"
+  integrity sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==
+
 portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"

From 743138c445b0a79e9e4ba20916b2d12ffeb5de60 Mon Sep 17 00:00:00 2001
From: Jason Rhodes <jason.matthew.rhodes@gmail.com>
Date: Fri, 22 Feb 2019 13:49:30 -0500
Subject: [PATCH 6/7] Locks react date picker types to the correct version

---
 package.json                          |  2 +-
 src/components/date_picker/index.d.ts |  8 +++++---
 yarn.lock                             | 14 ++++++++++----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 631b662fdcb..b025a818add 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "@types/enzyme": "^3.1.13",
     "@types/jest": "^23.3.9",
     "@types/react": "^16.3.0",
-    "@types/react-datepicker": "^2.0.3",
+    "@types/react-datepicker": "1.8.0",
     "@types/react-is": "~16.3.0",
     "@types/react-virtualized": "^9.18.6",
     "@types/uuid": "^3.4.4",
diff --git a/src/components/date_picker/index.d.ts b/src/components/date_picker/index.d.ts
index 323371cfd5e..f8032489cd7 100644
--- a/src/components/date_picker/index.d.ts
+++ b/src/components/date_picker/index.d.ts
@@ -2,6 +2,7 @@ import React from 'react';
 import { CommonProps } from '../common';
 import { IconType } from '../icon';
 import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker';
+import { Moment } from 'moment';
 
 declare module '@elastic/eui' {
   interface OnTimeChangeProps {
@@ -20,7 +21,8 @@ declare module '@elastic/eui' {
     fullWidth?: boolean;
     isInvalid?: boolean;
     isLoading?: boolean;
-    inputRef?: React.Ref<ReactDatePicker>;
+    injectTimes?: Moment[]; // added here because the type is missing in @types/react-datepicker@1.8.0
+    inputRef?: React.Ref<typeof ReactDatePicker>;
     placeholder?: string;
     shadow?: boolean;
     showIcon?: boolean;
@@ -30,8 +32,8 @@ declare module '@elastic/eui' {
   export const EuiDatePicker: React.SFC<EuiDatePickerProps>;
 
   export type EuiDatePickerRangeProps = CommonProps & {
-    startDateControl: typeof EuiDatePicker;
-    endDateControl: typeof EuiDatePicker;
+    startDateControl: React.ReactElement<EuiDatePickerProps>;
+    endDateControl: React.ReactElement<EuiDatePickerProps>;
     iconType?: boolean | IconType;
     fullWidth?: boolean;
     isCustom?: boolean;
diff --git a/yarn.lock b/yarn.lock
index bd99b2065b8..f146ac8836a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -894,12 +894,13 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.3.tgz#bef071852dca2a2dbb65fecdb7bfb30cedae2de2"
   integrity sha512-sfjHrNF4zWRv3fJUGyZW46wVxhYJ/GeWIPdKxbnLIhY3bWR0Ncl2kIhZI7rpjY9KtUQAkDP8jWEmaGQGFFvruA==
 
-"@types/react-datepicker@^2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-2.0.3.tgz#f45747168d04e3a1c82aeec539d11510783923af"
-  integrity sha512-qBU5C4GZxCGl640rj/j/P0S8hTV0Xi0GD4mJKHDTmN03XXp4VA2uJJNuMBQyWlOgWhYB81ejnVRQgXJC5jyhaQ==
+"@types/react-datepicker@1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-1.8.0.tgz#b8b4f69d3e5398500c136f5338e0746ed98d46e8"
+  integrity sha512-QyHMOFCOFIkcyDCXUGnL7OyM+Gj2aG95d3t18wgrLTxQJseVQXeQFTVnUeXmmF2cZxeWtGTfRl1uYPTr3/rAFg==
   dependencies:
     "@types/react" "*"
+    moment ">=2.14.0"
     popper.js "^1.14.1"
 
 "@types/react-is@~16.3.0":
@@ -8869,6 +8870,11 @@ moment@2.x.x:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.21.0.tgz#2a114b51d2a6ec9e6d83cf803f838a878d8a023a"
   integrity sha512-TCZ36BjURTeFTM/CwRcViQlfkMvL1/vFISuNLO5GkcVm1+QHfbSiNqZuWeMFjj1/3+uAjXswgRk30j1kkLYJBQ==
 
+moment@>=2.14.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 moment@^2.20.1:
   version "2.20.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"

From 29f6410b08eacfd09ebca77b0c2240e43280345d Mon Sep 17 00:00:00 2001
From: Jason Rhodes <jason.matthew.rhodes@gmail.com>
Date: Sat, 23 Feb 2019 10:03:12 -0500
Subject: [PATCH 7/7] Adds entry to changelog and reference path to components
 index

---
 CHANGELOG.md              | 1 +
 src/components/index.d.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6653ed51ab7..5890a89349d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `EuiResizeObserver` to expose ResizeObserver API to React components; falls back to MutationObserver API in unsupported browsers ([#1559](https://github.com/elastic/eui/pull/1559))
+- Added an index.d.ts file for the date picker components, including `EuiDatePicker`, `EuiDatePickerRange`, and `EuiSuperDatePicker` ([#1574](https://github.com/elastic/eui/pull/1574))
 
 **Bug fixes**
 
diff --git a/src/components/index.d.ts b/src/components/index.d.ts
index 3a65c074660..48a56617b0e 100644
--- a/src/components/index.d.ts
+++ b/src/components/index.d.ts
@@ -7,6 +7,7 @@
 /// <reference path="./combo_box/index.d.ts" />
 /// <reference path="./combo_box/index.d.ts" />
 /// <reference path="./context_menu/index.d.ts" />
+/// <reference path="./date_picker/index.d.ts" />
 /// <reference path="./description_list/index.d.ts" />
 /// <reference path="./empty_prompt/index.d.ts" />
 /// <reference path="./error_boundary/index.d.ts" />