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

<template>
    <div :class="[ disabled ? 'has-blur' : '' ]">
        <v-text-field
            v-model="dateShow"
            :label="label"
            :prepend-icon="'WMi-'+icon"
            color="purple"
            :id="'my-custom-date-' + uniqueId"
            readonly
            :color="color"
            @click="show = true"
        />
        <date-picker
            v-model="dateShow"
            locale="fa,en"
            :locale-config="localeConfig"
            :format="defaultDisplayFormat"
            :inputFormat="defaultInputFormat"
            @change="changeDatePicker"
            :type="type"
            :auto-submit="true"
            :element="'my-custom-date-' + uniqueId"
            :editable="true"
            :show="show"
            :min="minimum"
            :max="maximum"
            @close="show = false"
            :color="color"
        />
    </div>
</template>
<script>
    import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
    import {convertToJalali, convertNowToJalali} from '@Global/utils/date/jalali-date'

    export default {
        components: {
            datePicker: VuePersianDatetimePicker
        },
        props: {
            color: {default: 'black'},
            disabled: {default: false},
            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'},
        },
        data: () => ({
            localeConfig: {
                fa: {
                    lang: {label: 'شمسی'}
                },
                en: {
                    lang: {label: 'Gregorian'}
                }
            },
            show: false,
            uniqueId: Math.floor(Math.random() * 10000)
        }),
        computed: {
            dateShow: {
                get() {
                    if (this.value) {
                        return convertToJalali(this.value, this.defaultDisplayFormat);
                    } else if (!this.disabled) {
                        if (this.defaultDate === 'now') {
                            this.$emit('input', convertNowToJalali(null, this.defaultFormat));
                            return convertNowToJalali(null, 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 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 convertNowToJalali(null, this.defaultInputFormat);
                } else {
                    return this.min;
                }
            }
            ,
            maximum() {
                if (this.max === 'now') {
                    return convertNowToJalali(null, 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>