From 3d06f841b1458a58ea1073166874ec40c122ae44 Mon Sep 17 00:00:00 2001
From: aliqasemi <qasemi4245qq@gmail.com>
Date: Sat, 26 Dec 2020 17:54:20 +0330
Subject: [PATCH] set disable in persian date

---
 .../Global/components/Inputs/PersianDate.vue  | 213 ++++++++++--------
 1 file changed, 114 insertions(+), 99 deletions(-)

diff --git a/resources/js/Global/components/Inputs/PersianDate.vue b/resources/js/Global/components/Inputs/PersianDate.vue
index c55ac51..4179c50 100644
--- a/resources/js/Global/components/Inputs/PersianDate.vue
+++ b/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,114 +30,129 @@
     </div>
 </template>
 <script>
-    import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
-    import moment from 'jalali-moment';
+import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
+import moment from 'jalali-moment';
 
-    export default {
-        components: {
-            datePicker: VuePersianDatetimePicker
+export default {
+    components: {
+        datePicker: VuePersianDatetimePicker
+    },
+    props: {
+        color: {default: 'black'},
+        disabled: {default: false},
+        defaultDate: {
+            default: 'now',
+            type: String,
+            validator: (val) => ['now', 'empty'].includes(val)
         },
-        props: {
-            color: {default: 'black'},
-            defaultDate: {
-                default: 'now',
-                type: String,
-                validator: (val) => ['now', 'empty'].includes(val)
-            },
-            min: {default: null},
-            max: {default: null},
-            displayFormat: {default: null},
-            inputFormat: {default: null},
-            format: {default: null},
-            type: {
-                default: 'datetime',
-                type: String,
-                validator: (val) => ['datetime', 'time', 'date'].includes(val)
-            },
-            label: {default: 'در تاریخ '},
-            value: {default: null},
-            icon: {default: 'calendar-alt'},
+        min: {default: null},
+        max: {default: null},
+        displayFormat: {default: null},
+        inputFormat: {default: null},
+        format: {default: null},
+        type: {
+            default: 'datetime',
+            type: String,
+            validator: (val) => ['datetime', 'time', 'date'].includes(val)
         },
-        data: () => ({
-            localeConfig: {
-                fa: {
-                    lang: {label: 'شمسی'}
-                },
-                en: {
-                    lang: {label: 'Gregorian'}
-                }
+        label: {default: 'در تاریخ '},
+        value: {default: null},
+        icon: {default: 'calendar-alt'},
+    },
+    data: () => ({
+        localeConfig: {
+            fa: {
+                lang: {label: 'شمسی'}
             },
-            show: false,
-            uniqueId: Math.floor(Math.random() * 10000)
-        }),
-        computed: {
-            dateShow: {
-                get() {
-                    if (this.value) {
-                        return moment(new Date(this.value)).format(this.defaultDisplayFormat);
+            en: {
+                lang: {label: 'Gregorian'}
+            }
+        },
+        show: false,
+        uniqueId: Math.floor(Math.random() * 10000)
+    }),
+    computed: {
+        dateShow: {
+            get() {
+                if (this.value) {
+                    return moment(new Date(this.value)).format(this.defaultDisplayFormat);
+                } else if (!this.disabled) {
+                    if (this.defaultDate === 'now') {
+                        this.$emit('input', moment(new Date()).format(this.defaultFormat));
+                        return moment(new Date()).format(this.defaultDisplayFormat);
                     } else {
-                        if (this.defaultDate === 'now' ) {
-                            this.$emit('input', moment(new Date()).format(this.defaultFormat));
-                            return moment(new Date()).format(this.defaultDisplayFormat);
-                        } else {
-                            return '';
-                        }
-
-                    }
-                },
-                set(value) {
-                }
-            },
-            defaultDisplayFormat() {
-                if (!this.displayFormat) {
-                    if (this.type === 'datetime') {
-                        return 'jDD jMMMM jYYYY ساعت HH:mm';
-                    } else if(this.type === 'date') {
-                        return 'jDD jMMMM jYYYY';
-                    } else if(this.type === 'time') {
-                        return 'HH:mm';
-                    }
-                }
-                return this.displayFormat
-            },
-            defaultInputFormat() {
-                if (!this.inputFormat) {
-                    if (this.type === 'datetime') {
-                        return 'YYYY-MM-DD HH:mm';
-                    } else if(this.type === 'date') {
-                        return 'YYYY-MM-DD';
-                    } else if(this.type === 'time') {
-                        return 'HH:mm';
+                        return '';
                     }
+
                 }
-                return this.inputFormat
             },
-            defaultFormat() {
-                if (!this.format) {
-                    if (this.type === 'datetime') {
-                        return 'YYYY-MM-DD HH:mm';
-                    } else if(this.type === 'date') {
-                        return 'YYYY-MM-DD';
-                    } else if(this.type === 'time') {
-                        return 'HH:mm';
-                    }
+            set(value) {
+            }
+        },
+        defaultDisplayFormat() {
+            if (!this.displayFormat) {
+                if (this.type === 'datetime') {
+                    return 'jDD jMMMM jYYYY ساعت HH:mm';
+                } else if (this.type === 'date') {
+                    return 'jDD jMMMM jYYYY';
+                } else if (this.type === 'time') {
+                    return 'HH:mm';
                 }
-                return this.format
-            },
-            minimum() {
-                if (this.min === 'now') {
-                    return moment(new Date()).format(this.defaultInputFormat);
-                } else {
-                    return this.min;
+            }
+            return this.displayFormat
+        },
+        defaultInputFormat() {
+            if (!this.inputFormat) {
+                if (this.type === 'datetime') {
+                    return 'YYYY-MM-DD HH:mm';
+                } else if (this.type === 'date') {
+                    return 'YYYY-MM-DD';
+                } else if (this.type === 'time') {
+                    return 'HH:mm';
                 }
-            },
-            maximum() {
-                if (this.max === 'now') {
-                    return moment(new Date()).format(this.defaultInputFormat);
-                } else {
-                    return this.max;
+            }
+            return this.inputFormat
+        },
+        defaultFormat() {
+            if (!this.format) {
+                if (this.type === 'datetime') {
+                    return 'YYYY-MM-DD HH:mm';
+                } else if (this.type === 'date') {
+                    return 'YYYY-MM-DD';
+                } else if (this.type === 'time') {
+                    return 'HH:mm';
                 }
-            },
+            }
+            return this.format
+        },
+        minimum() {
+            if (this.min === 'now') {
+                return moment(new Date()).format(this.defaultInputFormat);
+            } else {
+                return this.min;
+            }
+        },
+        maximum() {
+            if (this.max === 'now') {
+                return moment(new Date()).format(this.defaultInputFormat);
+            } else {
+                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>