Add a support for disabling DatePicker

Author: Aleksander Ciesielski

src/components/Calendar/DatePicker.vue

@@ -1,9 +1,9 @@
 <template>
-    <div ref="date-picker" class="date-picker" @click.stop>
-        <TextField :is-focused="focused" :is-loading="isLoading" :disabled="isLoading"
+    <div ref="date-picker" class="date-picker" :class="{ 'date-picker-disabled': disabled }" @click.stop>
+        <TextField :is-focused="focused" :is-loading="isLoading" :disabled="disabled || isLoading"
                    :is-invalid="isInvalid" select @mousedown="toggle">
             <input ref="input" :value="formattedDate" type="text"
-                   width="50%" placeholder="e.g. 31/12/2018" :disabled="isLoading"
+                   width="50%" placeholder="e.g. 31/12/2018" :disabled="disabled || isLoading"
                    v-on="listeners" @keydown.enter="onEnter"
                    @input="onInput" @keyup.esc="onEsc"
                    @focus="onFocus" @blur="onBlur">
@@ -51,6 +51,10 @@
                 type: String,
                 default: 'dd/MM/y'
             },
+            disabled: {
+                type: Boolean,
+                default: false,
+            },
             disabledRange: {
                 type: Object,
                 default: () => ({
@@ -151,4 +155,8 @@
     .icon {
         padding-right: 8px;
     }
+
+    .date-picker-disabled {
+      cursor: not-allowed;
+    }
 </style>

stories/DatePicker/DatePicker.story.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="wrapper">
-        <DatePicker v-model="date"/>
+        <DatePicker v-model="date" />
+        <DatePicker v-model="date" :disabled="true" />
     </div>
 </template>
 
@@ -17,3 +18,11 @@
         }
     };
 </script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+}
+</style>