From aa1ea74daa5ff7644d861d8d41e7a4f84325be89 Mon Sep 17 00:00:00 2001
From: negue <negue@users.noreply.github.com>
Date: Sat, 29 Aug 2020 17:22:31 +0200
Subject: [PATCH] datepicker: add clear button (#12480)

* datepicker: add clear button

* use close icon instead of "x" as text
---
 .../client/src/components/tasks/taskModal.vue |  1 +
 .../client/src/components/ui/datepicker.vue   | 23 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/website/client/src/components/tasks/taskModal.vue b/website/client/src/components/tasks/taskModal.vue
index 6d2a9d6320..0d43b6ed2f 100644
--- a/website/client/src/components/tasks/taskModal.vue
+++ b/website/client/src/components/tasks/taskModal.vue
@@ -276,6 +276,7 @@
               :date.sync="task.date"
               :disabled="challengeAccessRequired"
               :highlighted="calendarHighlights"
+              :clear-button="true"
             />
           </div>
         </div>
diff --git a/website/client/src/components/ui/datepicker.vue b/website/client/src/components/ui/datepicker.vue
index 646801f603..551869abfd 100644
--- a/website/client/src/components/ui/datepicker.vue
+++ b/website/client/src/components/ui/datepicker.vue
@@ -12,6 +12,12 @@
     calendar-class="calendar-padding"
     @input="upDate($event)"
   >
+    <div slot="afterDateInput"
+         class="vdp-datepicker__clear-button"
+         v-if="clearButton && value"
+         v-html="icons.close"
+         @click="upDate(null)">
+    </div>
     <div slot="beforeCalendarHeader">
       <div class="datetime-buttons">
         <button
@@ -37,17 +43,19 @@
 import moment from 'moment';
 import datepicker from 'vuejs-datepicker';
 import calendarIcon from '@/assets/svg/calendar.svg';
+import closeIcon from '@/assets/svg/close.svg';
 
 export default {
   components: {
     datepicker,
   },
-  props: ['date', 'disabled', 'highlighted'],
+  props: ['date', 'disabled', 'highlighted', 'clearButton'],
   data () {
     return {
       value: this.date,
       icons: Object.freeze({
         calendar: calendarIcon,
+        close: closeIcon,
       }),
     };
   },
@@ -195,4 +203,17 @@ export default {
       color: $gray-50;
     }
   }
+
+  .vdp-datepicker__clear-button {
+    background: transparent !important;
+    display: block;
+    height: 30px;
+    cursor: pointer;
+
+    svg {
+      margin: auto 0.75rem;
+      width: 0.75rem;
+      height: 30px;
+    }
+  }
 </style>