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

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() 

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

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


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>

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;
    <script src=""></script>
    <script src="">
    <script src="">
    <script src="">

    <link rel="stylesheet" href="">
    <link rel="stylesheet" href=",300,400,500,700,900|Material+Icons">
    <link rel="stylesheet" href="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <div id="app">
      <v-app id="inspire">
            <v-layout row wrap>
              <v-flex pb-4 xs12>
                Stored date: {{ theDate }}
              <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>