How can I add description on datepicker vuetify?

Question

My code like this :

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

My codepen like this

I want to add information available and unavailable di datepicker like this :

How can I do it?

Answer 1

Yes it is possible to add text in the bottom

Working codepen is 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,
    footer: false,
  }),

  methods: {
    test () {

      console.log('test')
      this.loading = true;


      var self  = this;
      setTimeout(() =>{
        self.loading = false;
        self.setFooter();
      }
                 , 2000)
    },
    setFooter() {
      if (!this.footer) {
        var div = document.createElement('div');
    var html = "<span><div style='float:left;height: 20px; width: 20px; border-radius: 10px; background-color: green;'></div></span><span style='margin-left: 10px; float: left;'>Available</span><span><div style='float:left;height: 20px; width: 20px; border-radius: 10px; background-color: black; margin-left:10px;'></div></span><span style='margin-left: 10px; float:left;'>Unavailable</span>";
  div.innerHTML = html;
    document.querySelector('.v-date-picker-table').append(div);
        this.footer = true;
      }


    },
  },
})

Answer 2

You are very close to do so, just create your own container within the v-date-picker (which you have to style your self to position everything correctly)

<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>
            <div>
                <div>Hello</div>
                <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>
            </div>
        </v-date-picker>
    </v-card>
</v-dialog>

Answer 3

You could also use @input on v-date-picker and when your value is changing based on that you can append the div.

You can check here with working codepen demo.

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
      var self = this;
      setTimeout(() => (self.loading = false), 2000)
    },
    onInputValue(val, e) {
      $('div.custom_data_msg').remove();
      $(this.$refs.datepicker.$el).find('div.v-date-picker-table').after(`<div class="custom_data_msg">${val}</div>`);
    }
  },
})

<v-date-picker ref="datepicker" v-on:input="onInputValue($event,event)" 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>