Metronic Theme -> Vue ->Datepicker -> Wizard
I try to implement the Date Picker from the demo "Set First Target" into the Wizard "Create App" - but i can't receive the Date within my form. The picked Date is not stored in the "Interface" data. I use the name of the declared object within the parent - but the Yup (defined in the parent) tells me, that no data are provided.. I also tried something with refs, but this also do not work...
Does someone have any idea to do this - or another solution like the "Field" Component where i have usage of the parent view...
Replies (4)
Hi Heico,
Thank you for reaching out to us.
You can use custom input fields in the wizard and validate them by wrapping your input with the "Field" component of vee-validate.
Here is an example:
<Field name="accountName" v-slot="{ field }">
<el-date-picker
v-bind="field"
v-model="field.value"
type="date"
:teleported="false"
name="eventStartDate"
/>
</Field>Regards,
Lauris Stepanovs,
Keenthemes Support Team
Can you explain accountName and eventStartDate .... shouldn't these be the same?
I'm trying to do much the same, I'm using the wizard but need to convert it all to use element plus as in your example. Thanks!
Hi,
In the example above the second name is not needed, including one name on the Field component is enough.
Here is an updated example:
<Field name="accountName" v-slot="{ field }">
<el-date-picker
v-bind="field"
v-model="field.value"
type="date"
:teleported="false"
/>
</Field>Regards,
Lauris Stepanovs,
Keenthemes Support Team
HI!
I have tried this, and all I get is
ReferenceError: endDate is not defined
I have tried to define it just about everywhere, but nothing seems to work.
<Field name="pickupEndDate"
type="text"
class="form-control form-control-lg form-control-solid"
v-slot="{ endDate }">
<el-date-picker
v-bind="endDate"
v-model="endDate.value"
type="datetime"
:teleported="false"
/>
</Field>
