How can i add loading in the datepicker vuetify?

Question

Demo like this : https://codepen.io/positivethinking639/pen/wvvoMpK?editors=1010

My html like this :

<v-dialog
  ref="dialog"
  v-model="modal"
  :return-value.sync="date"
  persistent
  width="290px"
  :loading="loading"
>
  <template v-slot:activator="{ on }">
    <v-btn color="success" dark v-on="on" @click="test">call datepicker</v-btn>
  </template>
  <v-date-picker v-model="date" scrollable>
    <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>

My js like this :

  data: () => ({
    date: new Date().toISOString().substr(0, 10),
    modal: false,
    loading: false
  }),

  methods: {
    test () {
      console.log('test')
      this.loading = true

      setTimeout(() => (this.loading = false), 8000)
    }
  },

I follow this reference : https://vuetifyjs.com/en/components/cards#loading-card

I try like that, but seems it does not works in the v-dialog

How can I solve this problem?

chans chans · Accepted Answer · 2019-10-19T05:05:48

Yes, it is possible to show loading. But v-dialog component does not have such property explicitly we need to write some external code. But there is a loading property in v-card. So, I've wrapped the datapicker inside a v-card. Now it is working as expected

Working code pen here: https://codepen.io/chansv/pen/gOOLPqp?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-row>
      <v-col cols="12" sm="6" md="4">
        <v-dialog
          ref="dialog"
          v-model="modal"
          :return-value.sync="date"
          persistent
          width="290px"

        >
          <template v-slot:activator="{ on }">
            <v-btn color="success" dark v-on="on" @click="test">call datepicker</v-btn>
          </template>
          <v-card :loading="loading">
          <v-date-picker v-model="date" scrollable>
            <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-card>
        </v-dialog>
      </v-col>

    </v-row>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
    modal: false,
    loading: false
  }),

  methods: {
    test () {
      console.log('test')
      this.loading = true

      setTimeout(() => (this.loading = false), 8000)
    }
  },
})

How can i add loading in the datepicker vuetify?

1 Answers