121 lines
3.3 KiB
Vue
121 lines
3.3 KiB
Vue
|
<template>
|
||
|
|
<div class="row form-group mt-3" :key="$attrs.key">
|
||
|
|
<label
|
||
|
|
:for="localFormElement.key"
|
||
|
|
:class="$attrs.labelClass ?? 'col-md-3'"
|
||
|
|
>{{ localFormElement.label }}</label
|
||
|
|
>
|
||
|
|
|
||
|
|
<PersianDatepicker
|
||
|
|
v-if="localFormElement?.savetype == 'time'"
|
||
|
|
append-to="body"
|
||
|
|
:popover="{
|
||
|
|
placement: 'left',
|
||
|
|
offsetX: 10,
|
||
|
|
offsetY: 10,
|
||
|
|
}"
|
||
|
|
editable
|
||
|
|
color="#00acc1"
|
||
|
|
container="form-group"
|
||
|
|
:class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]"
|
||
|
|
class="date-picker mt-2"
|
||
|
|
v-model="textValue"
|
||
|
|
@input="$emit('oninput', $event)"
|
||
|
|
:placeholder="localFormElement.placeholder"
|
||
|
|
:type="'time'"
|
||
|
|
/>
|
||
|
|
<PersianDatepicker
|
||
|
|
v-else-if="localFormElement?.subtype == 'simple'"
|
||
|
|
append-to="body"
|
||
|
|
:popover="{
|
||
|
|
placement: 'left',
|
||
|
|
offsetX: 10,
|
||
|
|
offsetY: 10,
|
||
|
|
}"
|
||
|
|
editable
|
||
|
|
simple
|
||
|
|
color="#00acc1"
|
||
|
|
container="form-group"
|
||
|
|
:class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]"
|
||
|
|
class="date-picker mt-2"
|
||
|
|
v-model="textValue"
|
||
|
|
:format="getFormat()"
|
||
|
|
:display-format="getDisplayFormat()"
|
||
|
|
@input="$emit('oninput', $event)"
|
||
|
|
:placeholder="localFormElement.placeholder"
|
||
|
|
:type="'date'"
|
||
|
|
/>
|
||
|
|
<PersianDatepicker
|
||
|
|
v-else
|
||
|
|
append-to="body"
|
||
|
|
:popover="{
|
||
|
|
placement: 'left',
|
||
|
|
offsetX: 10,
|
||
|
|
offsetY: 10,
|
||
|
|
}"
|
||
|
|
editable
|
||
|
|
color="#00acc1"
|
||
|
|
container="form-group"
|
||
|
|
:class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]"
|
||
|
|
class="date-picker mt-2"
|
||
|
|
v-model="textValue"
|
||
|
|
:format="getFormat()"
|
||
|
|
:display-format="getDisplayFormat()"
|
||
|
|
@input="$emit('oninput', $event)"
|
||
|
|
:placeholder="localFormElement.placeholder"
|
||
|
|
:type="'date'"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import formBuilderMixin from "~/extensions/formBuilderExtension.js";
|
||
|
|
// import datePicker from "vue3-persian-datetime-picker";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
extends: formBuilderMixin,
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
date: "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getFormat() {
|
||
|
|
if (
|
||
|
|
this.localFormElement?.savetype == "datetime" ||
|
||
|
|
this.localFormElement?.savetype == "timestamp"
|
||
|
|
)
|
||
|
|
return "YYYY-MM-DD HH:mm";
|
||
|
|
else if (this.localFormElement?.savetype == "date") return "YYYY-MM-DD";
|
||
|
|
else if (this.localFormElement?.savetype == "jdate")
|
||
|
|
return "jYYYY/jMM/jDD";
|
||
|
|
else if (this.localFormElement?.savetype == "time") return "time";
|
||
|
|
else return "jYYYY/jMM/jDD";
|
||
|
|
},
|
||
|
|
getDisplayFormat() {
|
||
|
|
if (this.localFormElement?.displaytype == "datetime")
|
||
|
|
return "jYYYY/jMM/jDD HH:mm";
|
||
|
|
if (this.localFormElement?.displaytype == "jdatetime")
|
||
|
|
return "jYYYY/jMM/jDD HH:mm";
|
||
|
|
else if (this.localFormElement?.displaytype == "date")
|
||
|
|
return "YYYY-MM-DD";
|
||
|
|
else if (this.localFormElement?.displaytype == "jdate")
|
||
|
|
return "jYYYY/jMM/jDD";
|
||
|
|
else if (this.localFormElement?.displaytype == "time") return "time";
|
||
|
|
else return "jYYYY/jMM/jDD";
|
||
|
|
},
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
// datePicker,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
.form-group.inside-entity .date-picker .vpd-input-group .vpd-icon-btn {
|
||
|
|
//right: 90% !important;
|
||
|
|
right: unset !important;
|
||
|
|
left:0;
|
||
|
|
height: 100% !important;
|
||
|
|
}
|
||
|
|
</style>
|