Show Clear Date for SingleDatePicker

css/SingleDatePickerInput.scss

@@ -1,5 +1,38 @@
 @import 'variables';
 
 .SingleDatePickerInput {
+  background-color: $react-dates-color-white;
   border: 1px solid $react-dates-color-border;
 }
+
+.SingleDatePickerInput__clear-date {
+  background: none;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  overflow: visible;
+
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 10px;
+  margin: 0 10px 0 5px;
+}
+
+.SingleDatePickerInput__clear-date svg {
+  fill: $react-dates-color-gray-light;
+  height: 12px;
+  width: 15px;
+  vertical-align: middle;
+}
+
+.SingleDatePickerInput__clear-date--hide {
+  visibility: hidden;
+}
+
+.SingleDatePickerInput__clear-date:focus,
+.SingleDatePickerInput__clear-date--hover {
+  background: $react-dates-color-border;
+  border-radius: 50%;
+}

src/components/SingleDatePicker.jsx

@@ -32,6 +32,8 @@ const defaultProps = {
   focused: false,
   disabled: false,
   required: false,
+  showClearDate: false,
+  reopenPickerOnClearDate: false,
 
   onDateChange() {},
   onFocusChange() {},
@@ -56,6 +58,7 @@ const defaultProps = {
   monthFormat: 'MMMM YYYY',
   phrases: {
     closeDatePicker: 'Close',
+    clearDate: 'Clear Date',
   },
 };
 
@@ -73,6 +76,7 @@ export default class SingleDatePicker extends React.Component {
     this.onChange = this.onChange.bind(this);
     this.onFocus = this.onFocus.bind(this);
     this.onClearFocus = this.onClearFocus.bind(this);
+    this.clearDate = this.clearDate.bind(this);
   }
 
   onChange(dateString) {
@@ -151,6 +155,14 @@ export default class SingleDatePicker extends React.Component {
     return typeof displayFormat === 'string' ? displayFormat : displayFormat();
   }
 
+  clearDate() {
+    const { onDateChange, reopenPickerOnClearDate, onFocusChange } = this.props;
+    onDateChange(null);
+    if (reopenPickerOnClearDate) {
+      onFocusChange({ focused: true });
+    }
+  }
+
   isBlocked(day) {
     const { isDayBlocked, isOutsideRange } = this.props;
     return isDayBlocked(day) || isOutsideRange(day);
@@ -248,7 +260,9 @@ export default class SingleDatePicker extends React.Component {
       focused,
       disabled,
       required,
+      showClearDate,
       date,
+      phrases,
       anchorDirection,
       withPortal,
       withFullScreenPortal,
@@ -281,6 +295,9 @@ export default class SingleDatePicker extends React.Component {
             disabled={disabled}
             required={required}
             showCaret={!withPortal && !withFullScreenPortal}
+            phrases={phrases}
+            onClearDate={this.clearDate}
+            showClearDate={showClearDate}
             dateValue={dateString}
             onChange={this.onChange}
             onFocus={this.onFocus}

src/components/SingleDatePickerInput.jsx

@@ -1,6 +1,8 @@
 import React, { PropTypes } from 'react';
+import cx from 'classnames';
 
 import DateInput from './DateInput';
+import CloseButton from '../svg/close.svg';
 
 const propTypes = {
   id: PropTypes.string.isRequired,
@@ -11,11 +13,18 @@ const propTypes = {
   disabled: PropTypes.bool,
   required: PropTypes.bool,
   showCaret: PropTypes.bool,
+  showClearDate: PropTypes.bool,
 
   onChange: PropTypes.func,
+  onClearDate: PropTypes.func,
   onFocus: PropTypes.func,
   onKeyDownShiftTab: PropTypes.func,
   onKeyDownTab: PropTypes.func,
+
+  // i18n
+  phrases: PropTypes.shape({
+    clearDate: PropTypes.node,
+  }),
 };
 
 const defaultProps = {
@@ -31,41 +40,92 @@ const defaultProps = {
   onFocus() {},
   onKeyDownShiftTab() {},
   onKeyDownTab() {},
+
+  // i18n
+  phrases: {
+    clearDate: 'Clear Date',
+  },
 };
 
-export default function SingleDatePickerInput(props) {
-  const {
-    id,
-    placeholder,
-    dateValue,
-    focused,
-    disabled,
-    required,
-    showCaret,
-    onChange,
-    onFocus,
-    onKeyDownShiftTab,
-    onKeyDownTab,
-  } = props;
-
-  return (
-    <div className="SingleDatePickerInput">
-      <DateInput
-        id={id}
-        placeholder={placeholder} // also used as label
-        dateValue={dateValue}
-        focused={focused}
-        disabled={disabled}
-        required={required}
-        showCaret={showCaret}
-
-        onChange={onChange}
-        onFocus={onFocus}
-        onKeyDownShiftTab={onKeyDownShiftTab}
-        onKeyDownTab={onKeyDownTab}
-      />
-    </div>
-  );
+export default class SingleDatePickerInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isClearDateHovered: false,
+    };
+
+    this.onClearDateMouseEnter = this.onClearDateMouseEnter.bind(this);
+    this.onClearDateMouseLeave = this.onClearDateMouseLeave.bind(this);
+  }
+
+  onClearDateMouseEnter() {
+    this.setState({
+      isClearDateHovered: true,
+    });
+  }
+
+  onClearDateMouseLeave() {
+    this.setState({
+      isClearDateHovered: false,
+    });
+  }
+
+  render() {
+    const { isClearDateHovered } = this.state;
+    const {
+      id,
+      placeholder,
+      dateValue,
+      focused,
+      disabled,
+      required,
+      showCaret,
+      showClearDate,
+      phrases,
+      onClearDate,
+      onChange,
+      onFocus,
+      onKeyDownShiftTab,
+      onKeyDownTab,
+    } = this.props;
+
+    return (
+      <div className="SingleDatePickerInput">
+        <DateInput
+          id={id}
+          placeholder={placeholder} // also used as label
+          dateValue={dateValue}
+          focused={focused}
+          disabled={disabled}
+          required={required}
+          showCaret={showCaret}
+
+          onChange={onChange}
+          onFocus={onFocus}
+          onKeyDownShiftTab={onKeyDownShiftTab}
+          onKeyDownTab={onKeyDownTab}
+        />
+
+        {showClearDate &&
+          <button
+            type="button"
+            className={cx('SingleDatePickerInput__clear-date', {
+              'SingleDatePickerInput__clear-date--hide': !dateValue,
+              'SingleDatePickerInput__clear-date--hover': isClearDateHovered,
+            })}
+            onMouseEnter={this.onClearDateMouseEnter}
+            onMouseLeave={this.onClearDateMouseLeave}
+            onClick={onClearDate}
+          >
+            <span className="screen-reader-only">
+              {phrases.clearDate}
+            </span>
+            <CloseButton />
+          </button>
+        }
+      </div>
+    );
+  }
 }
 
 SingleDatePickerInput.propTypes = propTypes;

src/shapes/SingleDatePickerShape.js

@@ -9,6 +9,8 @@ export default {
   placeholder: PropTypes.string,
   date: momentPropTypes.momentObj,
   focused: PropTypes.bool,
+  showClearDate: PropTypes.bool,
+  reopenPickerOnClearDates: PropTypes.bool,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
 

stories/SingleDatePicker.js

@@ -65,6 +65,17 @@ storiesOf('SingleDatePicker', module)
       withFullScreenPortal
     />
   ))
+  .add('with clear dates button', () => (
+    <SingleDatePickerWrapper
+      showClearDate
+    />
+  ))
+  .add('with clear dates button (Picker Displayed)', () => (
+    <SingleDatePickerWrapper
+      showClearDate
+      reopenPickerOnClearDate
+    />
+  ))
   .add('with month specified on open', () => (
     <SingleDatePickerWrapper
       initialVisibleMonth={() => moment('01 2017', 'MM YYYY')}