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

9
votes

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?

5
vue.jsvuetify.js
Obviously v-datepicker expects to be bound to a String. You might want to try data: { date: new Date().toJSON(), time: new Date().toJSON() } - connexo
But isn't new Date() outputting a string? - tobiasg
No, it's outputting a Javascript Date object. - connexo
Ah, okay. Your suggestion worked! Thanks! Isn't it strange however that v-date-picker and v-time-picker expects different types? - tobiasg
As far as I can see both expect a String. - connexo

5 Answers

6
votes

Obviously (from the error message you're getting) v-datepicker expects to be bound to a String. You might want to try 

data: { 
    date: new Date().toJSON(), 
    time: new Date().toJSON() 
}

https://codepen.io/connexo/pen/ypWxLv

Also see Vuetify API docs (which explicitly states it expects v-model to be of type String):

v-model   String    null    Controls the displayed date. Must use ISO 8601 format.

Vuetify Datepicker API Docs

4
votes

Instead, use the value attribute in order to overcome the binding.

example 

data: { 
    date: new Date().toISOString().substr(0, 10)
}
<v-text-field slot="activator" :value="dataValue.datePass" label="Date" append-icon="event" readonly style="font-size:14px"></v-text-field>
<v-date-picker v-model="dataValue.datePass"></v-date-picker>
2
votes

In my case, I needed the date to be stored as a Date object instead of a String. So instead of using v-model in the date-picker, I handled this using @input and :value.

new Vue({
  el: '#app',
  data() {
    return {
      isActive: false,
      theDate: new Date()
    }
  },
  computed: {
    formattedDate() {
      return this.theDate ? moment(this.theDate).format('MM/DD/YYYY') : undefined; // Custom format
    },
    datePickerFormattedDate() {
      return this.theDate ? moment(this.theDate).format('YYYY-MM-DD') : undefined; // Date picker objects needs date in this particular format
    }
  },
  methods: {
    inputHandler(date) {
      if (typeof date === 'string')
        date = moment(date).toDate();
      this.isActive = false;
      this.theDate = date;
    }
  }
})
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/locale/en-gb.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.12/vuetify.min.js">
    </script>
    <script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment-with-locales.min.js">
    </script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css">
    
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
    
    <link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app">
      <v-app id="inspire">
        <v-content>
          <v-container>
            <v-layout row wrap>
              <v-flex pb-4 xs12>
                Stored date: {{ theDate }}
              </v-flex>
              <v-flex xs12>
                <v-text-field :readonly="true" :value="formattedDate" label="I want to enter dates here"></v-text-field>
                <v-menu :close-on-content-click="true" v-model="isActive" :nudge-right="40" lazy transition="scale-transition" offset-y full-width min-width="290px">
                  <v-icon slot="activator">event</v-icon>

                  <v-date-picker :value="datePickerFormattedDate" @input="inputHandler"></v-date-picker>
                </v-menu>
              </v-flex>
            </v-layout>
          </v-container>
        </v-content>
        <v-footer></v-footer>
      </v-app>
    </div>

  </body>
</html>
0
votes

From the official examples, it looks like you have to use like this 

data: { 
    date: new Date().toISOString().substr(0, 10), 
    time: new Date().getHours() + ':' + new Date().getMinutes(), 
}

Example -

https://github.com/vuetifyjs/vuetifyjs.com/blob/master/src/examples/date-pickers/dateDialogAndMenu.vue

0
votes

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>