[Bug Report][3.0.3] v-date-picker doesn't exist

[tassin-gauthier]

Environment

Vuetify Version: 3.0.3 Vue Version: 3.2.45 Browsers: Chrome 107.0.0.0 OS: Mac OS 10.15.7

Steps to reproduce

<v-date-picker v-model="date"></v-date-picker>

const date = ref('2022-01-01')

Expected Behavior

the v-date-picker component should be displayed

Actual Behavior

It display an error: "Failed to resolve component: v-date-picker"

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

It work for v2.x versions but doesn't work for v3.x. I don't understand because it's present on phase 4 of the migration notion: https://www.notion.so/d107077314ca4d2896f0eeba49fe8a14?v=5cc7c08e9cc44021a7c86a20f189b0ba. There is also a problem with the documentation because the "date-picker" is not present on the left menu, but it's referenced on google when you type "vuetify 3 date-picker" : https://next.vuetifyjs.com/en/components/date-pickers/

[JoakimFFCG]

The date picker component isn't included in the 3.0 release. It will be added in 3.1. See https://github.com/vuetifyjs/vuetify/milestone/56

It might be released a bit earlier in a preproduction state with "Labs", whatever that is. See https://next.vuetifyjs.com/en/introduction/roadmap/#labs

[jeremyVignelles]

Is the 3.1 milestone still accurate ? I don't see any mention of date-picker in the 3.1 milestone

EDIT: found it here : #13480 . It seems like it doesn't have any ETA yet.

[etrielQ]

I still don't see component 'date-picker' in vuetify documentation

[JoakimFFCG]

@etrielQ Seems like the date picker component was removed from the 3.1 milestone. It still isn't released yet. See #13480 for status updates.

[stratdev3]

datepicker component missing in v3 is still the main reason why i'm always using the v2. sad

[ghost]

This is the only reason why I can't switch to Vuetify 3, it's just impossible to work with the UI without v-date-time. Sad. :disappointed:

[MarinaMWestling]

So just going to leave this here because I was also struggling to find the date picker. Looks like they have a type of date on the v-text-field. You can see it on the advanced section of the expansion panels on vuetify 3.

[mcrapts]

Thank you @MarinaMWestling. No idea why this isn't documented but this is good enough for me!

[stratdev3]

@MarinaMWestling the type date is the one from underlying input tag from browser/os. Not really the former in v2 which offers a ton of great features.

[MFJamil]

So just going to leave this here because I was also struggling to find the date picker. Looks like they have a type of date on the v-text-field. You can see it on the advanced section of the expansion panels on vuetify 3.

Sorry but the link is pointing to Vuetify 2 page and not Vuetify 3. The equivalent link for Vuetify 3 is the following: https://next.vuetifyjs.com/en/components/expansion-panels/

[michael-scheurer]

It's now available with Vuetify Labs. You need to

• install vuetify with at least version 3.3.4. See https://vuetifyjs.com/en/components/date-pickers/
• import { VDatePicker } from 'vuetify/labs/VDatePicker' in your component. See https://vuetifyjs.com/en/labs/introduction/
• use <v-date-picker /> in your component

[dderrek]

Thank you @michael-scheurer for mentionning that the v-date-picker is now available. I could successfully set it up by following your steps, however I had to do one more thing for setting it up using the options API:

• include VDatePicker in the components property

Wth the composition API this step should not be needed.

[JenuelDev]

any alternative? since we cant use datepicker?

[etrielQ]

any alternative? since we cant use datepicker?

Version 3.3.4 introduced the date-picker feature to Vuetify 3 https://vuetifyjs.com/en/components/date-pickers/

[missmay4]

Im trying to use v-date-picker with Vue3 and Vuetify3 but the console gaves me this warn and the component doesn't show the date picker:

[Vue warn]: Failed to resolve component: v-date-picker If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Even if in include the VDatePicker in the components property with vue-labs. What am I doing wrong?

This is my main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import './assets/styles/main.css'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

// Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap'
import 'bootstrap-icons/font/bootstrap-icons.css'

const vuetify = createVuetify({
  components,
  directives,
})

const app = createApp(App)

app.use(router)
app.use(vuetify)

app.mount('#app')

[dderrek]

I assume with "include the VDatePicker in the components property" you're refering to my comment. I only had to do it using the Options API. From your code I cannot say whether it is the Options or Composition API (I am still a Vue junior ;-)). But you should anyway make sure that you import the VDatePicker like michael-scheurer mentionned in his comment.

[missmay4]

Thanks for the answer!

Yes! Im import the VDatePicker like this comment says, but nothing happen, the datepicker doesnt show.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import './assets/styles/main.css'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { VDatePicker } from 'vuetify/labs/VDatePicker'

// Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap'
import 'bootstrap-icons/font/bootstrap-icons.css'

const vuetify = createVuetify({
  components,
  directives,
  VDatePicker,
})

const app = createApp(App)

app.use(router)
app.use(vuetify)

app.mount('#app')

The console give me this warning:

Projects.vue:755 [Vue warn]: Failed to resolve component: v-date-picker If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <ProjectsDPMT onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {getProjects: ƒ, showHiddenTableElements: ƒ, showTableElements: ƒ, sortByType: ƒ, sortByTier: ƒ, …} > > at <RouterView> at <App>

Im using the datepicker component this way: inside of a v-container and a v-menu. In this example works perfectly but in my project doesn't open the date-picker.

My Vue version is 3.3.2 and my Vuetify version is 3.3.19.

[kosukhin]

@missmay4 Hi. you need to use VDatePicker inside concrete component in it's components field for example

name: 'ComponentA',
components: {
   VDatePicker
}

Or register VDatePicker component as global component like this

app.component('VDatePicker', VDatePicker)

First variant works for me, second I did not test, but it will work I think

[missmay4]

Thanks so much @kosukhin you save my life! It works perfectly with the second option.

I didn't know that i have to import like that, in the documentation doesnt says anything.

Have a nice day!

[thomktz]

@missmay4 Btw, running with vuetify 3.4.4, I had to use

import { VDatePicker } from 'vuetify/components/VDatePicker'

and not

import { VDatePicker } from 'vuetify/labs/VDatePicker'