I want to select a time range using v-date-picker on vCalender in my vuetify project. I use v-date-picker for this. Even though I use dateTime as the mod in v-date-picker, there is no place to select the time. It's just the calendar. Any ideas what I'm doing wrong?
my-template
<div>
<div class="flex mb-2">
<label class="text-gray-600 font-medium"><input class="mr-1" type="radio" value="" v-model="timezone" />Local</label>
<label class="text-gray-600 font-medium ml-3"><input class="mr-1" type="radio" value="utc" v-model="timezone" />UTC</label>
</div>
<v-date-picker v-model="date" multiple :timezone="timezone" mode="dateTime" />
</div>
my data:
date: new Date(),
timezone: '',
EDIT:
The problem seems to be a conflict as both components are named v-date-picker, and as it stands, it is picking the Vuetify's component as the default. If you wish to use both in your application, check this resolved Github issue:
Quouting the owner of Vcalendar; nathanreyes from the Github issue:
You can pass componentPrefix as an option when using VCalendar.
Vue.use(VCalendar, { componentPrefix: 'vc' })Then when using in template
<template> <vc-calendar> </vc-calendar> </template>
Old answer below is before the OP edited the question to better reflect the problem.
There is no option in the v-date-picker API for mode. However, there is a type option, but it only supports either "date" for date picker or "month" for month picker.
You could use vuetify-datetime-picker extension of Vuetify instead which was linked in an answer to this question. Thanks to @Jeanpaul1304.
Vue.use(VCalendar, {
componentPrefix: 'vc', // Now use vc-calendar and vc-date-picker
});
The code is not working because there is confusion with vuetify. For this, we need to make changes in main js. So we need to use vc-data-picker instead of v-data-picker.