Using new Date() with v-date-picker doesn't work

Question

I'm trying to follow this video using Vue and Vuetify to apply the current date with v-model to the date picker component v-date-picker using the data value date that's initially being set with new Date().

This is a simplified structure of my project:

JS

new Vue({
  el:"#app",
  data: {
    date: new Date(),
    time: new Date()
  }
})

Template

<div id="app">
  <v-date-picker v-model="date"></v-date-picker>
    {{ date }}
  <v-time-picker v-model="time"></v-time-picker>
</div>

And here's a CodePen. Unfortunately I couldn't get the Vuetify CSS to work with the CodePen, but if you open up the console, you'll see that I get errors in the v-date-picker when trying to use new Date() with the v-model directive. Also the date picker isn't rendering. The v-time-picker however works fine.

On my local setup I've created a Vue project with the vue-cli. Here's the error I'm getting there:

[Vue warn]: Error in created hook: "TypeError: dateString.split is not a function"

found in

---> at src/components/Meetup/CreateMeetup.vue at src/App.vue

I'm doing exactly as in the tutorial I'm following, so I don't know if this is a bug with the latest version of either Vue or Vuetify? Or am I missing something?

Answer 1

You can use a computed property as a "shim" for v-model. The computed property contains all the logic for the type coercion and everything else is business as usual.

JS

new Vue({
  el:"#app",
  data: {
    date: new Date()
  },
  computed: {
    // "shim" for v-date-picker
    sdate: {
      get() {
        return this.date?.toISOString()
      },
      set(val) {
        this.date = new Date(val)
      }
    }
  }
})

Template

<div id="app">
  <v-date-picker v-model="sdate"></v-date-picker>
  {{ date }}
</div>