Use the new datepicker for due dates

src/styles/components/reminders.scss

@@ -15,22 +15,5 @@
       color: $red;
       padding-left: .5rem;
     }
-
-    .datepicker {
-      width: 100%;
-
-      a.show {
-        color: $text;
-        padding: .25rem .5rem;
-        transition: background-color $transition;
-        border-radius: $radius;
-        display: block;
-        margin: .1rem 0;
-
-        &:hover {
-          background: $white;
-        }
-      }
-    }
   }
 }

src/styles/components/task.scss

@@ -50,7 +50,7 @@
     display: flex;
     align-items: center;
 
-    a {
+    a.remove {
       color: $red;
       vertical-align: middle;
       padding-left: .5em;
@@ -58,6 +58,23 @@
     }
   }
 
+  .datepicker {
+    width: 100%;
+
+    a.show {
+      color: $text;
+      padding: .25rem .5rem;
+      transition: background-color $transition;
+      border-radius: $radius;
+      display: block;
+      margin: .1rem 0;
+
+      &:hover {
+        background: $white;
+      }
+    }
+  }
+
   table {
     table-layout: fixed;
 

src/views/tasks/TaskDetailView.vue

@@ -47,18 +47,14 @@
 								Due Date
 							</div>
 							<div class="date-input">
-								<flat-pickr
-									:class="{ 'disabled': taskService.loading}"
-									:config="flatPickerConfig"
-									:disabled="taskService.loading || !canWrite"
-									@on-close="() => saveTask()"
-									class="input"
-									placeholder="Click here to set a due date"
-									ref="dueDate"
+								<datepicker
 									v-model="dueDate"
-								>
-								</flat-pickr>
-								<a @click="() => {dueDate = task.dueDate = null;saveTask()}" v-if="dueDate && canWrite">
+									@close="() => saveTask()"
+									choose-date-label="Click here to set a due date"
+									:disabled="taskService.loading || !canWrite"
+									ref="dueDate"
+									/>
+								<a @click="() => {dueDate = task.dueDate = null;saveTask()}" v-if="dueDate && canWrite" class="remove">
 									<span class="icon is-small">
 										<icon icon="times"></icon>
 									</span>
@@ -374,10 +370,12 @@ import description from '@/components/tasks/partials/description'
 import ColorPicker from '../../components/input/colorPicker'
 import attachmentUpload from '../../components/tasks/mixins/attachmentUpload'
 import heading from '@/components/tasks/partials/heading'
+import Datepicker from '@/components/input/datepicker'
 
 export default {
 	name: 'TaskDetailView',
 	components: {
+		Datepicker,
 		ColorPicker,
 		ListSearch,
 		Reminders,