Add a disabled property to the datepicker

src/components/input/datepicker.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="datepicker">
+	<div class="datepicker" :class="{'disabled': disabled}">
-		<a @click.stop="show = !show" class="show">
+		<a @click.stop="toggleDatePopup" class="show">
 			<template v-if="date === null">
 				{{ chooseDateLabel }}
 			</template>
@@ -140,6 +140,10 @@ export default {
 			type: String,
 			default: 'Choose a date'
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		}
 	},
 	mounted() {
 		this.date = this.value
@@ -162,6 +166,13 @@ export default {
 			this.$emit('input', this.date)
 			this.$emit('change', this.date)
 		},
+		toggleDatePopup() {
+			if(this.disabled) {
+				return
+			}
+
+			this.show = !this.show
+		},
 		hideDatePopup(e) {
 			if (this.show) {
 

src/styles/components/datepicker.scss

@@ -3,6 +3,10 @@
 		display: none;
 	}
 
+	&.disabled a {
+		cursor: default;
+	}
+
 	.datepicker-popup {
 		position: absolute;
 		z-index: 99;

src/styles/components/task.scss

@@ -73,6 +73,10 @@
         background: $white;
       }
     }
+
+    &.disabled a.show:hover {
+      background: transparent;
+    }
   }
 
   table {