101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
Vue
<template>
|
|
<div class="row form-group" :key="$attrs.key">
|
|
<label
|
|
:for="localFormElement.key"
|
|
:class="$attrs.labelClass ?? 'col-md-3'"
|
|
>{{ localFormElement.label }}</label
|
|
>
|
|
<div
|
|
:class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]"
|
|
>
|
|
<label for="">از:</label>
|
|
<date-picker
|
|
editable
|
|
color="#00acc1"
|
|
auto-submit
|
|
popover="bottom-left"
|
|
class="date-picker mb-3"
|
|
v-model="textValue1"
|
|
format="YYYY-MM-DD"
|
|
display-format="jYYYY-jMM-jDD"
|
|
@input="emitInput()"
|
|
:placeholder="localFormElement.placeholder"
|
|
/>
|
|
</div>
|
|
<div :class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]">
|
|
<label for="">تا:</label>
|
|
<date-picker
|
|
editable
|
|
color="#00acc1"
|
|
auto-submit
|
|
popover="bottom-left"
|
|
class="date-picker"
|
|
v-model="textValue2"
|
|
format="YYYY-MM-DD"
|
|
display-format="jYYYY-jMM-jDD"
|
|
@input="emitInput()"
|
|
:placeholder="localFormElement.placeholder"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import formBuilderMixin from "@mixins/formBuilderMixin";
|
|
// import VuePersianDatetimePicker from "vue-persian-datetime-picker";
|
|
|
|
export default {
|
|
mixins: [formBuilderMixin],
|
|
data() {
|
|
return {
|
|
date: "",
|
|
textValue1: "",
|
|
textValue2: "",
|
|
};
|
|
},
|
|
watch: {
|
|
textValue1: {
|
|
handler(newValue) {
|
|
this.setTextValueRange();
|
|
},
|
|
},
|
|
textValue2: {
|
|
handler(newValue) {
|
|
this.setTextValueRange();
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
emitInput() {
|
|
this.setTextValueRange();
|
|
this.$emit("oninput", this.textValue);
|
|
},
|
|
setTextValueRange() {
|
|
let date1 = this.textValue1 ? this.datefa(this.textValue1) : "";
|
|
let date2 = this.textValue2 ? this.datefa(this.textValue2) : "";
|
|
let a = "--";
|
|
if (date1 || date2) {
|
|
a = "--";
|
|
} else {
|
|
a = "";
|
|
}
|
|
|
|
this.textValue = date1 + a + date2;
|
|
},
|
|
datefa(item) {
|
|
var m = item;
|
|
var d = new Date(m).toLocaleDateString("fa-IR");
|
|
return d;
|
|
},
|
|
},
|
|
components: {
|
|
// datePicker: VuePersianDatetimePicker,
|
|
datePicker: () =>
|
|
import(
|
|
"vue-persian-datetime-picker"
|
|
),
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped></style>
|