Hi,
Metronic Demo5 Vue, fresh installation
code from element-plus docs
<el-date-picker v-model="value1" type="date" placeholder="Pick a day" :size="size"></el-date-picker>
Uncaught RangeError: Maximum call stack size exceeded.
Hello again,
I don`t want to add new post ... I`ve managed to work with datePicker - i simply copy the NewEventModal.vue
But I`ve got small annoying problem.
I've added an element plus select option to NewEventModal.vue ( oryginal file )
the issue is when I choose date select option is opening and closing. Maybe someone had this issue before?
Something is going wrong between Metronic and ElementPlus
below pasted code ( oryginal NewEventModal with el-option added )
<template>
<div class="modal fade show" aria-modal="true" role="dialog" ref="newTargetModalRef">
<div class="modal-dialog modal-dialog-centered mw-650px">
<div class="modal-content">
<el-form class="form fv-plugins-bootstrap5 fv-plugins-framework" :model="targetData" :rules="rules" ref="formRef">
<div class="modal-header">
<h2 class="fw-bold">Add a New Event</h2>
<div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
<span class="svg-icon svg-icon-1">
<inline-svg src="media/icons/duotune/arrows/arr061.svg"></inline-svg>
</span>
</div>
</div>
<!--end::Modal header-->
<!--begin::Modal body-->
<div class="modal-body py-10 px-lg-17">
<!--begin::Input group-->
<div class="fv-row mb-9 fv-plugins-icon-container">
<!--begin::Label-->
<label class="required fs-6 fw-semobold mb-2">Select field Elem-Plus</label>
<el-form-item prop="salesRepresentative">
<el-select v-model="targetData.salesRepresentative" filterable placeholder="Select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-9 fv-plugins-icon-container">
<!--begin::Label-->
<label class="fs-6 fw-semobold required mb-2">Event Name</label>
<!--end::Label-->
<!--begin::Input-->
<el-form-item prop="eventName">
<el-input v-model="targetData.eventName" type="text" name="eventName"></el-input>
</el-form-item>
<!--end::Input-->
<div class="fv-plugins-message-container invalid-feedback"></div>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-9">
<!--begin::Label-->
<label class="fs-6 fw-semobold mb-2">Event Description</label>
<!--end::Label-->
<!--begin::Input-->
<el-input v-model="targetData.eventDescription" type="text" placeholder="" name="eventDescription"></el-input>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-9">
<!--begin::Label-->
<label class="fs-6 fw-semobold mb-2">Event Location</label>
<!--end::Label-->
<!--begin::Input-->
<el-input v-model="targetData.eventLocation" type="text" placeholder="" name="eventLocation"></el-input>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-9">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid">
<el-checkbox v-model="targetData.allDay" type="checkbox"></el-checkbox>
<span class="form-check-label fw-semobold">All Day</span>
</label>
<!--end::Checkbox-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="row row-cols-lg-2 g-10">
<div class="col">
<div class="fv-row mb-9 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
<!--begin::Label-->
<label class="fs-6 fw-semobold mb-2 required">Event Start Date</label>
<!--end::Label-->
<!--begin::Input-->
<el-date-picker v-model="targetData.eventStartDate" type="text" name="eventStartDate"></el-date-picker>
<!--end::Input-->
<div class="fv-plugins-message-container invalid-feedback"></div>
</div>
</div>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="row row-cols-lg-2 g-10">
<div class="col">
<div class="fv-row mb-9 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
<!--begin::Label-->
<label class="fs-6 fw-semobold mb-2 required">Event End Date</label>
<!--end::Label-->
<!--begin::Input-->
<el-date-picker v-model="targetData.eventEndDate" type="text" name="eventName"></el-date-picker>
<!--end::Input-->
<div class="fv-plugins-message-container invalid-feedback"></div>
</div>
</div>
</div>
<!--end::Input group-->
</div>
<!--end::Modal body-->
<!--begin::Modal footer-->
<div class="modal-footer flex-center">
<!--begin::Button-->
<button data-bs-dismiss="modal" type="reset" class="btn btn-light me-3">
Cancel
</button>
<!--end::Button-->
<!--begin::Button-->
<button :data-kt-indicator="loading ? "on" : null" class="btn btn-lg btn-primary" type="submit">
<span v-if="!loading" class="indicator-label">
Submit
<span class="svg-icon svg-icon-3 ms-2 me-0">
<inline-svg src="media/icons/duotune/arrows/arr064.svg"></inline-svg>
</span>
</span>
<span v-if="loading" class="indicator-progress">
Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
<!--end::Button-->
</div>
<!--end::Modal footer-->
<div></div>
</el-form>
<!--end::Form-->
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { hideModal } from "@/core/helpers/dom";
import Swal from "sweetalert2/dist/sweetalert2.js";
interface NewAddressData {
eventName: string;
eventDescription: string;
eventLocation: string;
allDay: boolean;
eventStartDate: string;
eventEndDate: string;
}
export default defineComponent({
name: "new-event-modal",
components: {},
setup() {
const formRef = ref<null | HTMLFormElement>(null);
const newTargetModalRef = ref<null | HTMLElement>(null);
const loading = ref<boolean>(false);
const options = [
{
value: "Option1",
label: "Option1",
},
{
value: "Option2",
label: "Option2",
},
{
value: "Option3",
label: "Option3",
},
{
value: "Option4",
label: "Option4",
},
{
value: "Option5",
label: "Option5",
},
];
const targetData = ref<NewAddressData>({
eventName: "",
eventDescription: "",
eventLocation: "",
allDay: true,
eventStartDate: "",
eventEndDate: "",
});
const rules = ref({
eventName: [
{
required: true,
message: "Please input event name",
trigger: "blur",
},
],
});
const submit = () => {
if (!formRef.value) {
return;
}
formRef.value.validate((valid) => {
if (valid) {
loading.value = true;
setTimeout(() => {
loading.value = false;
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
},
}).then(() => {
hideModal(newTargetModalRef.value);
});
}, 2000);
} else {
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
},
});
return false;
}
});
};
return {
formRef,
newTargetModalRef,
loading,
targetData,
rules,
submit,
options,
};
},
});
</script>
<style lang="scss">
.el-select {
width: 100%;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 100%;
}
</style>
Hi,
Do you have this issue on our preview page?
https://preview.keenthemes.com/metronic8/vue/demo1/#/crafted/modals/forms/new-target
Also please specify which Metronic version are you using?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
this is demo 5 vue version, Metronic 8.1.1
First of all a had problems with date picker.
Then I found NewEventModal.vue (modal to add an event ) that has date picker working. I added a element plus select option ⦠and the rest is in my previous post.
It seems that I have to wait for next update. Need to have this working and ktdatatable bugs also to move onâ¦
Hi,
It seems that the datepicker in demo5 is working fine as well.
https://preview.keenthemes.com/metronic8/vue/demo5/#/crafted/modals/forms/new-target
Are there any steps to reproduce this issue?
the you provided is working indeed, thanks very important and useful Lauris
To reproduce issue please go to
https://preview.keenthemes.com/metronic8/vue/demo5/?_ga=2.208797522.1913056374.1650360416-103528003.1650360416#/apps/calendar
simply using provided Add Event modal generates warnings in console - warning but maybe this have affect?
simply adding this and proper options in tscript section couses my issue.
<!--begin::Input group-->
<div class="fv-row mb-9 fv-plugins-icon-container">
<!--begin::Label-->
<label class="required fs-6 fw-semobold mb-2">Select field Elem-Plus</label>
<el-form-item prop="salesRepresentative">
<el-select v-model="targetData.salesRepresentative" filterable placeholder="Select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<!--end::Input-->
</div>
<!--end::Input group-->
Thank you for your feedback.
Yes, I see now this error, we will check this issue and fix it in the upcoming release.