Merge pull request 'set disable in persian date' (#48) from UI.calendar into dev

Reviewed-on: WillaEngine-Project/WillaEngine#48

resources/js/Global/components/Inputs/PersianDate.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div :class="[ disabled ? 'has-blur' : '' ]">
         <v-text-field
             v-model="dateShow"
             :label="label"
@@ -16,7 +16,7 @@
             :locale-config="localeConfig"
             :format="defaultDisplayFormat"
             :inputFormat="defaultInputFormat"
-            @change="$emit('input', $event.format(defaultFormat))"
+            @change="changeDatePicker"
             :type="type"
             :auto-submit="true"
             :element="'my-custom-date-' + uniqueId"
@@ -30,15 +30,16 @@
     </div>
 </template>
 <script>
-    import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
+import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
-    import moment from 'jalali-moment';
+import moment from 'jalali-moment';
 
-    export default {
+export default {
     components: {
         datePicker: VuePersianDatetimePicker
     },
     props: {
         color: {default: 'black'},
+        disabled: {default: false},
         defaultDate: {
             default: 'now',
             type: String,
@@ -75,8 +76,8 @@
             get() {
                 if (this.value) {
                     return moment(new Date(this.value)).format(this.defaultDisplayFormat);
-                    } else {
+                } else if (!this.disabled) {
-                        if (this.defaultDate === 'now' ) {
+                    if (this.defaultDate === 'now') {
                         this.$emit('input', moment(new Date()).format(this.defaultFormat));
                         return moment(new Date()).format(this.defaultDisplayFormat);
                     } else {
@@ -92,9 +93,9 @@
             if (!this.displayFormat) {
                 if (this.type === 'datetime') {
                     return 'jDD jMMMM jYYYY ساعت HH:mm';
-                    } else if(this.type === 'date') {
+                } else if (this.type === 'date') {
                     return 'jDD jMMMM jYYYY';
-                    } else if(this.type === 'time') {
+                } else if (this.type === 'time') {
                     return 'HH:mm';
                 }
             }
@@ -104,9 +105,9 @@
             if (!this.inputFormat) {
                 if (this.type === 'datetime') {
                     return 'YYYY-MM-DD HH:mm';
-                    } else if(this.type === 'date') {
+                } else if (this.type === 'date') {
                     return 'YYYY-MM-DD';
-                    } else if(this.type === 'time') {
+                } else if (this.type === 'time') {
                     return 'HH:mm';
                 }
             }
@@ -116,9 +117,9 @@
             if (!this.format) {
                 if (this.type === 'datetime') {
                     return 'YYYY-MM-DD HH:mm';
-                    } else if(this.type === 'date') {
+                } else if (this.type === 'date') {
                     return 'YYYY-MM-DD';
-                    } else if(this.type === 'time') {
+                } else if (this.type === 'time') {
                     return 'HH:mm';
                 }
             }
@@ -138,6 +139,20 @@
                 return this.max;
             }
         },
+    },
+    methods: {
+        changeDatePicker(event) {
+            if (!this.disabled) {
+                this.$emit('input', event.format(this.defaultFormat))
+            }
+        }
+    },
+    watch: {
+        disabled(value) {
+            if (value) {
+                this.$emit('input', null);
+            }
         }
     }
+}
 </script>