Add custom slot to date picker popover
FedericoGiulianini98 opened this issue · comments
Hello, I'm trying to create a custom slot to insert above the header of the date picker but I'm not able to do it. When I add a v-slot with a custom name, the datepicker does not appear, and searching in the documentation, clicking on the "custom slot" entry leads to a 404 page.
I'm using Vue 2. This is my code:
<v-date-picker v-model="range" is-range :columns="$screens({ default: 1, lg: 2 })">
<template v-slot="{ inputValue, inputEvents }">
<div class="datepicker__flex">
<div class="datepicker__flex_wrapper">
<label for="">
check in
</label>
<input
:value="inputValue.start"
v-on="inputEvents.start"
class="border px-2 py-1 w-32 rounded focus:outline-none focus:border-indigo-300"
/>
</div>
<div class="datepicker__internal_separator"></div>
<div class="datepicker__flex_wrapper">
<label for="">
check out
</label>
<input
:value="inputValue.end"
v-on="inputEvents.end"
class="border px-2 py-1 w-32 rounded focus:outline-none focus:border-indigo-300"
/>
</div>
</div>
</template>
<!-- CUSTOM SLOT ABOVE HEADER -->
<template v-slot:customTopHeader>
<!-- things... -->
</template>
<template v-slot:footer>
<div class="datepicker__footer">
<p class="datepicker__footer_delete">Cancella date</p>
<div class="datepicker__footer_update">
<span>
aggiorna
</span>
</div>
</div>
</template>
</v-date-picker>
Thank you.