Enable Clear Date Input (#5809)

Author: fikzzzy

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

@@ -181,12 +181,10 @@ export default class Education extends ConsentComponent {
   }
 
   onUpdateDate(date, timePeriod) {
-    if (date) {
-      const { newEducation: oldEducation } = this.state;
-      const newEducation = { ...oldEducation };
-      newEducation[timePeriod] = date;
-      this.setState({ newEducation, isSubmit: false });
-    }
+    const { newEducation: oldEducation } = this.state;
+    const newEducation = { ...oldEducation };
+    newEducation[timePeriod] = date || '';
+    this.setState({ newEducation, isSubmit: false });
   }
 
   /**
@@ -530,6 +528,7 @@ export default class Education extends ConsentComponent {
                 <div styleName="field col-2">
                   <DatePicker
                     readOnly
+                    showClearDate
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
                     date={newEducation.timePeriodFrom}
@@ -559,6 +558,7 @@ export default class Education extends ConsentComponent {
                     newEducation.graduated ? (
                       <DatePicker
                         readOnly
+                        showClearDate
                         numberOfMonths={1}
                         isOutsideRange={moment().subtract(1, 'd')}
                         date={newEducation.timePeriodTo}
@@ -569,6 +569,7 @@ export default class Education extends ConsentComponent {
                     ) : (
                       <DatePicker
                         readOnly
+                        showClearDate
                         numberOfMonths={1}
                         date={newEducation.timePeriodTo}
                         id="date-to1"

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

@@ -13,6 +13,20 @@ $checkbox-bg-selected: $tc-dark-blue;
   flex-direction: column;
   align-items: left;
 
+  :global {
+    .SingleDatePickerInput {
+      &__showClearDate {
+        padding-right: 0;
+      }
+
+      &_clearDate {
+        padding: 8px 10px;
+        top: 20px;
+        background: transparent;
+      }
+    }
+  }
+
   @include upto-sm {
     padding-bottom: 0;
   }