From 6e56e1b1e7c76e2af77297700d20522119a4d9a8 Mon Sep 17 00:00:00 2001
From: Jason Rhodes <jason.rhodes@elastic.co>
Date: Fri, 16 Aug 2019 16:25:30 -0400
Subject: [PATCH] Adds onClear prop to EuiDatePicker to make it "clearable"
 (#2235)

* Adds onClear prop to EuiDatePicker to make it "clearable"

* Adds changelog entry

* Update CHANGELOG.md

Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com>
---
 CHANGELOG.md                                           |  1 +
 src-docs/src/views/date_picker/states.js               | 10 ++++++++++
 .../date_picker/__snapshots__/date_picker.test.js.snap |  1 +
 src/components/date_picker/date_picker.js              |  6 ++++++
 4 files changed, 18 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a4f15f7a3f5..a804c3c1d24 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Converted `EuiFacetButton` to TypeScript ([#2226](https://github.com/elastic/eui/pull/2226))
+- Adds an optional `onClear` prop to the the `EuiDatePicker` component ([#2235](https://github.com/elastic/eui/pull/2235))
 
 **Bug fixes**
 
diff --git a/src-docs/src/views/date_picker/states.js b/src-docs/src/views/date_picker/states.js
index 01f36918d30..b1813e50808 100644
--- a/src-docs/src/views/date_picker/states.js
+++ b/src-docs/src/views/date_picker/states.js
@@ -40,6 +40,16 @@ export default class extends Component {
 
         <EuiSpacer size="m" />
 
+        <EuiDatePicker
+          showTimeSelect
+          selected={this.state.startDate}
+          onChange={this.handleChange}
+          onClear={() => this.handleChange(null)}
+          placeholder="Clearable"
+        />
+
+        <EuiSpacer size="m" />
+
         <EuiDatePicker
           showTimeSelect
           selected={this.state.startDate}
diff --git a/src/components/date_picker/__snapshots__/date_picker.test.js.snap b/src/components/date_picker/__snapshots__/date_picker.test.js.snap
index b696962a536..15ee75251cc 100644
--- a/src/components/date_picker/__snapshots__/date_picker.test.js.snap
+++ b/src/components/date_picker/__snapshots__/date_picker.test.js.snap
@@ -6,6 +6,7 @@ exports[`EuiDatePicker is rendered 1`] = `
     className="euiDatePicker euiDatePicker--shadow"
   >
     <EuiFormControlLayout
+      clear={null}
       fullWidth={false}
       icon="calendar"
       isLoading={false}
diff --git a/src/components/date_picker/date_picker.js b/src/components/date_picker/date_picker.js
index cf53cbf7150..002f30e5cdd 100644
--- a/src/components/date_picker/date_picker.js
+++ b/src/components/date_picker/date_picker.js
@@ -38,6 +38,7 @@ export class EuiDatePicker extends Component {
       minDate,
       minTime,
       onChange,
+      onClear,
       openToDate,
       placeholder,
       popperClassName,
@@ -127,6 +128,7 @@ export class EuiDatePicker extends Component {
           <EuiFormControlLayout
             icon={optionalIcon}
             fullWidth={fullWidth}
+            clear={selected && onClear ? { onClick: onClear } : null}
             isLoading={isLoading}>
             <EuiValidatableControl isInvalid={isInvalid}>
               <DatePicker
@@ -246,6 +248,10 @@ EuiDatePicker.propTypes = {
    * What to do when the input changes
    */
   onChange: PropTypes.func,
+  /**
+   * What to do when the input is cleared by the x icon
+   */
+  onClear: PropTypes.func,
   /**
    * Opens to this date (in moment format) on first press, regardless of selection
    */