Use the new datepicker for start date

src/components/input/datepicker.vue

@@ -134,7 +134,7 @@ export default {
 	},
 	props: {
 		value: {
-			validator: prop => prop instanceof Date || prop === null
+			validator: prop => prop instanceof Date || prop === null || typeof prop === 'string'
 		},
 		chooseDateLabel: {
 			type: String,
@@ -150,7 +150,7 @@ export default {
 	},
 	watch: {
 		value(newVal) {
-			this.date = newVal
+			this.date = new Date(newVal)
 		},
 		flatPickrDate(newVal) {
 			this.date = new Date(newVal)
@@ -163,14 +163,14 @@ export default {
 			this.$emit('change', this.date)
 		},
 		hideDatePopup(e) {
-			if(this.show) {
+			if (this.show) {
 
 				// We walk up the tree to see if any parent of the clicked element is the datepicker element.
 				// If it is not, we hide the popup. We're doing all this hassle to prevent the popup from closing when
 				// clicking an element of flatpickr.
 				let parent = e.target.parentElement
 				while (parent !== this.$refs.datepickerPopup) {
-					if(parent.parentElement === null) {
+					if (parent.parentElement === null) {
 						parent = null
 						break
 					}
@@ -178,7 +178,7 @@ export default {
 					parent = parent.parentElement
 				}
 
-				if(parent === this.$refs.datepickerPopup) {
+				if (parent === this.$refs.datepickerPopup) {
 					return
 				}
 

src/views/tasks/TaskDetailView.vue

@@ -80,18 +80,14 @@
 								Start 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 start date"
-									ref="startDate"
+								<datepicker
 									v-model="task.startDate"
-								>
-								</flat-pickr>
-								<a @click="() => {task.startDate = null;saveTask()}" v-if="task.startDate && canWrite">
+									@close="() => saveTask()"
+									choose-date-label="Click here to set a start date"
+									:disabled="taskService.loading || !canWrite"
+									ref="startDate"
+								/>
+								<a @click="() => {task.startDate = null;saveTask()}" v-if="task.startDate && canWrite" class="remove">
 									<span class="icon is-small">
 										<icon icon="times"></icon>
 									</span>