V-calendar: Unable to display Popover on Click instead of Hover with DatePicker

[husteadrobert]

I'm trying to create a button the user can click in order to display the DatePicker popover. This should be possible, as written here: https://vcalendar.io/guide/datepicker.html#custom-slot

I include VCalendar in my code

import Vue from 'vue';
import VCalendar from 'v-calendar'
import 'v-calendar/lib/v-calendar.min.css';

Vue.use(VCalendar);

And my code for date-picker is here:

          <v-date-picker
            v-model="deadlineDate"
            @input="updateTask(true)" 
            :popover="{ placement: 'bottom', visibility: 'click' }">
            <button>I am a button</button>
          </v-date-picker>

However, this does not have the intended action. This displays the popover on hover, and not on click. It is unclear from the documentation what I need to do to display the popover on click and NOT hover.

[husteadrobert]

Update:

For anyone else struggling with this issue, it appears that the docs are out of date. From this Issue here: https://github.com/nathanreyes/v-calendar/issues/88 we can find that the way to include open-on-click functionality is to use popover-visibility='focus' in the v-date-picker.

I also tried setting the Default options for datePicker.popover.visibility to 'click' and 'focus' but that didn't seem to work either. I'm not sure if this is a bug or just out of date docs.

[ptdev]

Actually, the docs have been updated for the next version of vcalendar (v1.0.0) and are correct for that version.
You appear to still be using v0.9 so your documentation is available at:

https://vcalendar-legacy.netlify.com/

[husteadrobert]

You're right! Looks like I'm using the older version, thus my confusion. Thank you for the reply!

[bglass]

[email protected]:

• popover-visibility='focus' does not work, while
• :popover="{ visibility: 'click' }" works as expected.

[mirzasetiyono]

the latest version is
<vc-date-picker v-model="form.endDate"> <template v-slot="{ inputValue, togglePopover }"> <div class="date-picker-wrap"> <i class="far fa-calendar-alt"></i> <input :value="inputValue" v-on:click="togglePopover" class="datepicker-input" placeholder="End Date" readonly /> </div> </template> </vc-date-picker>