Time picker not showing in v-date-picker-CodePudding

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 >
                <label ><input  type="radio" value="" v-model="timezone" />Local</label>
                <label ><input  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: '',

CodePudding user response：

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.

CodePudding user response：

    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.