Quiero seleccionar un rango de tiempo usando v-date-picker en vCalender en mi proyecto vuetify. Yo uso v-date-picker para esto. Aunque uso dateTime como mod en v-date-picker, no hay lugar para seleccionar la hora. Es solo el calendario. ¿Alguna idea de lo que estoy haciendo mal?
mi-plantilla
<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>mis datos:
date: new Date(), timezone: '',EDITAR :
El problema parece ser un conflicto, ya que ambos componentes se denominan v-date-picker y, tal como está, está eligiendo el componente de Vuetify como predeterminado. Si desea usar ambos en su aplicación, verifique este problema resuelto de Github :
Citando al propietario de Vcalendar; nathanreyes del problema de Github:
Puede pasar componentePrefijo como una opción al usar VCalendar.
Vue.use(VCalendar, { componentPrefix: 'vc' })Luego, cuando se usa en la plantilla
<template> <vc-calendar> </vc-calendar> </template>
La respuesta anterior a continuación es antes de que el OP editara la pregunta para reflejar mejor el problema.
No hay ninguna opción en la API v-date-picker para el mode . Sin embargo, hay una opción de type , pero solo admite " fecha " para el selector de fecha o " mes " para el selector de mes.
En su lugar, podría usar la extensión vuetify-datetime-picker de Vuetify, que se vinculó en una respuesta a esta pregunta. Gracias a @ Jeanpaul1304 .
Vue.use(VCalendar, { componentPrefix: 'vc', // Now use vc-calendar and vc-date-picker });El código no funciona porque hay confusión con vuetify. Para esto, necesitamos hacer cambios en main js. Entonces necesitamos usar vc-data-picker en lugar de v-data-picker.