nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.32k stars 840 forks source link

is-range date picker not working in Vue 3 #1082

Open ghost opened 2 years ago

ghost commented 2 years ago

Package version: ^3.0.0-alpha.8 Vue 3.0.5

My issue is that the datepicker itself does not open whe the is-range boolean is true. The date picker itself works fine when only picking 1 date, however when I want to enable is-range, the component just does not appear, no error given.

<DatePicker
  mode="date"
  v-model="dateRange"
  :available-dates="avalaibleDates"
  :popover="{ placement: popoverPlacement, visibility: 'click' }"
  :columns="2"
  :masks="{ input: 'MMMM D' }"
  :theme="theme"
  @input="inputHandler"
  @drag="dragHandler"
  is-range
  is-expanded
>
...
</DatePicker>

I am using a Vue 3 computed value (composition API) as v-model to populate and edit the value of the picker in a store.

const dateRange = computed({
    get: () => store.getters['website/period'],
    set: (v) => {
      if (v) {
     store.dispatch('website/setPeriod', v);
      }
    },
});

Am I missing someting?

ilvalerione commented 1 year ago

The same behaviour for me ("v-calendar": "^3.0.0-alpha.8").

In Vue 3 it doesn't appear using is-range option.

Nothing is printed in console.