Enable to Clear Date

Author: fikzzzy

src/shared/components/Settings/Profile/Work/index.jsx

@@ -148,12 +148,10 @@ export default class Work extends ConsentComponent {
   }
 
   onUpdateDate(date, timePeriod) {
-    if (date) {
-      const { newWork: oldWork } = this.state;
-      const newWork = { ...oldWork };
-      newWork[timePeriod] = date;
-      this.setState({ newWork, isSubmit: false });
-    }
+    const { newWork: oldWork } = this.state;
+    const newWork = { ...oldWork };
+    newWork[timePeriod] = date;
+    this.setState({ newWork, isSubmit: false });
   }
 
   /**
@@ -491,11 +489,13 @@ export default class Work extends ConsentComponent {
                 <div styleName="field col-2">
                   <DatePicker
                     readOnly
+                    showClearDate
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
                     date={newWork.timePeriodFrom}
                     id="date-from1"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
+                    onClearDate={date => this.onUpdateDate('', 'timePeriodFrom')}
                     placeholder="dd/mm/yyyy"
                   />
                   {
@@ -518,12 +518,14 @@ export default class Work extends ConsentComponent {
                 <div styleName="field col-2">
                   <DatePicker
                     readOnly
+                    showClearDate
                     disabled={endDateDisabled}
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
                     date={newWork.timePeriodTo}
                     id="date-to1"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
+                    onClearDate={date => this.onUpdateDate('', 'timePeriodTo')}
                     placeholder="dd/mm/yyyy"
                   />
                   {
@@ -642,11 +644,13 @@ export default class Work extends ConsentComponent {
                   </label>
                   <DatePicker
                     readOnly
+                    showClearDate
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
                     date={newWork.timePeriodFrom}
                     id="date-from2"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
+                    onClearDate={date => this.onUpdateDate('', 'timePeriodFrom')}
                     placeholder="dd/mm/yyyy"
                   />
                   {
@@ -665,12 +669,14 @@ export default class Work extends ConsentComponent {
                   </label>
                   <DatePicker
                     readOnly
+                    showClearDate
                     disabled={endDateDisabled}
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
                     date={newWork.timePeriodTo}
                     id="date-to2"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
+                    onClearDate={date => this.onUpdateDate('', 'timePeriodTo')}
                     placeholder="dd/mm/yyyy"
                   />
                   {

src/shared/components/Settings/Profile/Work/styles.scss

@@ -349,6 +349,20 @@ label {
       display: none;
     }
   }
+
+  :global {
+    .SingleDatePickerInput_clearDate {
+      height: 35px;
+      width: 35px;
+      display: flex;
+      align-items: center;
+      top: calc(50% - 5px);
+    }
+
+    .SingleDatePickerInput__showClearDate {
+      padding-right: 0;
+    }
+  }
 }
 
 .button-container {

src/shared/components/challenge-listing/Filters/DatePicker.jsx

@@ -12,6 +12,7 @@ import './_fix_SingleDatePicker.css';
 
 const propTypes = {
   autoFocus: PropTypes.bool,
+  showClearDate: PropTypes.bool,
   allowFutureYear: PropTypes.bool,
 
   ...omit({}, [
@@ -25,6 +26,7 @@ const propTypes = {
 const defaultProps = {
   autoFocus: false,
   allowFutureYear: false,
+  showClearDate: false,
 };
 
 class DatePicker extends React.Component {
@@ -53,7 +55,7 @@ class DatePicker extends React.Component {
   render() {
     const { focused, allowFutureYear } = this.state;
     const {
-      id, date, onDateChange, isOutsideRange,
+      id, date, onDateChange, isOutsideRange, showClearDate,
     } = this.props;
 
     const props = omit(this.props, [
@@ -75,6 +77,7 @@ class DatePicker extends React.Component {
         focused={focused}
         onDateChange={onDateChange}
         onFocusChange={this.onFocusChange}
+        showClearDate={showClearDate}
         renderMonthElement={({ month, onMonthSelect, onYearSelect }) => (
           <div style={{ display: 'flex', justifyContent: 'center' }}>
             <div>