'VCalendar DatePicker is getting closed
io date-picker as below with custom footer slot
<vc-date-picker
v-model="rangeFilter"
is-range
is-expanded
:columns="$screens({ default: 1, lg: 2 })"
show-caps
:available-dates="dates"
:min-date="minDate"
:max-date="maxDate"
@dayclick="onDayClick($event)"
>
<template v-slot="{ inputValue, togglePopover }">
<div class="actions_datepicker_input-container">
<div class="actions_datepicker-icon">
<img
v-bind:src="
require(`../assets/icons/${currentTheme}Mode/invoices_menu_date_picker.svg`)
"
alt="Invoice Date"
/>
</div>
<input
:value="
inputValue.start != null
? inputValue.start + dateSeperartor + inputValue.end
: ''
"
type="text"
aria-placeholder="Invoice Date"
ref="rangeFilterCalender"
v-on:keyup.tab.stop="
togglePopover({
placement: 'bottom',
transition: 'none',
showDelay: 0,
hideDelay: 0,
})
"
v-on:click.stop="dateSelected($event, togglePopover)"
class="actions_datepicker_input rounded w-full"
placeholder="Invoice Date"
readonly
/>
</div>
</template>
<template v-slot:footer>
<div class="actions_datepicker_footer">
<div class="button-container">
<button
tabindex="0"
class="btn btnApply"
@click="applyCustomRangeFilter"
>
Apply
</button>
<button
tabindex="0"
class="btn btn-secondary btnCancel"
@click="closeDatePicker"
>
Cancel
</button>
</div>
</div>
</template>
</vc-date-picker>
Version 2.4.1 with VUE 2.6 there I am facing issue about date-picker getting closed on date selection. However I want it to remain opened unless user click on any of the button in footer Apply/Cancel. How can I do that.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
