How to prepopulate date range value?-CodePudding

I have an issue on my edit page while trying to prepopulate date range value.

Ex. 2022-06-03, 2022-06-04

Rather than see this

I got an error in the console.

CodePudding user response：

I don't know if I understood the question correctly, but in the absence of a code snippet I refer to the official Vuetify documentation.

Basically you assign a date pattern to the Vuetify component and optionally, with a computed, calculate the divisor.

 export default {
    data: () => ({
      dates: ['2019-09-10', '2019-09-20'],
    }),
    computed: {
      dateRangeText () {
        return this.dates.join(' ~ ')
      },
    },
  }

<v-row>
    <v-col
      cols="12"
      sm="6"
    >
      <v-date-picker
        v-model="dates"
        range
      ></v-date-picker>
    </v-col>
    <v-col
      cols="12"
      sm="6"
    >
      <v-text-field
        v-model="dateRangeText"
        label="Date range"
        prepend-icon="mdi-calendar"
        readonly
      ></v-text-field>
      model: {{ dates }}
    </v-col>
  </v-row>