Metronic Vue datepicker that works with VeeValidate / Yup
Hello,
I just bought your template and I cant figure out how can I implement el-plus datepicker with validation? Can you please provide me with a working example?
<div class="mb-5 row">
<div class="col-md-6">
<!--begin::Label-->
<label class="form-label mb-3">Name</label>
<!--end::Label-->
<!--begin::Input-->
<Field
type="text"
placeholder="xxx"
class="form-control form-control-lg form-control-solid"
name="name"
/>
<ErrorMessage
name="name"
class="fv-plugins-message-container invalid-feedback"
></ErrorMessage>
<!--end::Input-->
</div>
<div class="col-md-6">
<!--begin::Label-->
<label class="form-label mb-3">Date of Birth</label>
<!--end::Label-->
<!--begin::Input-->
[el-plus datepicker that matches style of normal Metronic fields with working ErrorMessage here]
<!--end::Input-->
</div>
</div>Replies (10)
Hi,
Sorry for the late reply.
Here is an example of how you can use Vee-Validate in combination with el-date-picker:
<Field name="yourFieldName" :value="defaultValue" v-slot="{ field }">
<el-date-picker
v-bind="field"
type="date"
size="default"
/>
</Field>Regards,
Lauris Stepanovs,
Keenthemes Support Team
thanks a lot 
saved me
Hi,
Glad to hear this! Please let us know if you have any further questions on this topic or anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
hey Lauris,
when data is loaded dynamically, vee validate shows errormessage even though its loaded into element plus item.
for example, if i am loading user object from api,
dateofbirth sets correctly to the datepicker, but veevalidate will always show error as if dateofbirth has not been loaded correctly into the datepicker
Hi,
Can you attach an example of your form? Do you have validation error on all fields or only when you use element plus field in combination with Vee Validate?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hey Lauris,
For example:
If I have Edit modal which loads data from props, and those props are mapped to formData in the edit modal.
When data is mapped to formData, el-plus errors will show veevalidation errors. Other fields won't.
Not sure if this will help, but this is the exact code of Edit modal that throws veevalidation errors on el-plus elements:
https://pastebin.com/raw/9XN79rRw
As you can see, I tried using watcher and resetForm, but doesnt work.
https://i.imgur.com/R7yvOud.png
And i would need to click on the el-plus inputs and select all same data to make it valid
Hi,
Are you setting valid input values?
Can you try to remove v-model from your element-plus field?
<Field name="date" v-slot="{ field }" v-model="formData.date">
<el-date-picker
v-bind="field"
format="DD.MM.YYYY."
value-format="YYYY-MM-DD"
size="large"
type="date"
placeholder="Odaberite datum"
class="w-100 datepicker"
/>
</Field>https://vee-validate.logaretm.com/v4/api/field#rendering-fields
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Seems like using v-model both on element plus elements and veevalidate Field fixed it for me? Everything seems fine now, not sure if some bugs will occur later on
```
<Field name="date" v-slot="{ field }" v-model="formData.date">
<el-date-picker
v-bind="field"
format="DD.MM.YYYY."
value-format="YYYY-MM-DD"
size="large"
type="date"
v-model="formData.date"
placeholder="Odaberite datum"
class="w-100 datepicker"
/>
</Field>
<ErrorMessage
name="date"
clas
```
Hi,
You do not need to include v-model directive, the component should work correctly without it.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
