Adds onClear prop to EuiDatePicker to make it "clearable" (elastic#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,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**
 

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}

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}

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
    */