[Vuejs]-Vuetify v-date-picker doesnt show up when changing to range prop

by

0👍

The snippet below is using your code and the picker shows up just fine. Am I missing something in your question?

One thing I should point out is that when using range prop date picker expects its model to be an array of length 2 or empty. In your code, the date prop is a string. It doesn’t affect the calendar rendering though.

Screenshot

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    date: ['2019-09-10', '2019-09-20'],
    menu: false,
    modal: false,
  }),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app id="inspire">
    <v-row>
      <v-col cols="11" sm="5">
        <v-dialog ref="dialog" v-model="modal" :return-value.sync="date" persistent width="290px">
          <template v-slot:activator="{ on, attrs }">
            <v-text-field
              v-model="date"
              label="Picker in dialog"
              prepend-icon="mdi-calendar"
              readonly
              v-bind="attrs"
              v-on="on"
            ></v-text-field>
          </template>
          <v-date-picker v-model="date" scrollable range>
            <v-spacer></v-spacer>
            <v-btn text color="primary" @click="modal = false">
              Cancel
            </v-btn>
            <v-btn text color="primary" @click="$refs.dialog.save(date)">
              OK
            </v-btn>
          </v-date-picker>
        </v-dialog>
      </v-col>
    </v-row>
  </v-app>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Leave a comment