'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