From 07d898e3c881b7631e7dd31998b0769e4544d3af Mon Sep 17 00:00:00 2001
From: M Fikri A <fikzzzy@gmail.com>
Date: Tue, 16 Nov 2021 06:05:02 +0700
Subject: [PATCH] Enable Clear Date Input

---
 .../Settings/Profile/Education/index.jsx           | 13 +++++++------
 .../Settings/Profile/Education/styles.scss         | 14 ++++++++++++++
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/Settings/Profile/Education/index.jsx b/src/shared/components/Settings/Profile/Education/index.jsx
index ffc9d7cecb..7df00f3408 100644
--- a/src/shared/components/Settings/Profile/Education/index.jsx
+++ b/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"
diff --git a/src/shared/components/Settings/Profile/Education/styles.scss b/src/shared/components/Settings/Profile/Education/styles.scss
index 2864adaf8e..ca6fcec2ea 100644
--- a/src/shared/components/Settings/Profile/Education/styles.scss
+++ b/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;
   }