Time picker not showing in v-date-picker

user_15825021 0
Viewed 278

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: '',
vuejs2 vuetify.js vue.js javascript
2 Answers

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.

user_164702810 
    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.

user_158250210
Related