datepicker: add clear button (#12480)

* datepicker: add clear button

* use close icon instead of "x" as text

website/client/src/components/tasks/taskModal.vue

@@ -276,6 +276,7 @@
               :date.sync="task.date"
               :disabled="challengeAccessRequired"
               :highlighted="calendarHighlights"
+              :clear-button="true"
             />
           </div>
         </div>

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>