set disable in persian date

pull/48/head
aliqasemi 4 years ago
parent a80a2d1760
commit 3d06f841b1

@ -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>

Loading…
Cancel
Save