The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More
Light
Dark
System
Ask  Question

elementPlus - issues


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"

          />

I used this code e.g on CustomersListing.vue
this causes


Uncaught RangeError: Maximum call stack size exceeded.

and simply I can`t pick a date. ( calendar is opening ) ... pick .. error in console date is not picked.

p.s.
Additional, it could be fine when theme dark element-plus also dark
K
Krystian 3 years ago
Vue
6 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)

K
Krystian 3 years ago

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…


user
Lauris Stepanovs Author 3 years ago

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?


K
Krystian 3 years ago

the you provided is working indeed, thanks very important and useful Lauris
To reproduce issue please go to
<a>https://preview.keenthemes.com/metronic8/vue/demo5/?_ga=2.208797522.1913056374.1650360416-103528003.1650360416#/apps/calendar</a>

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

 </el-form-item>

 <!--end::Input-->

 </div>

 <!--end::Input group-->


user
Lauris Stepanovs Author 3 years ago

Thank you for your feedback.

Yes, I see now this error, we will check this issue and fix it in the upcoming release.


K
Krystian 3 years ago

Hello again, I dont want to add new post ... Ive 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 )
user
Lauris Stepanovs Author 3 years ago

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


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(