apply datepicker with bottom sheet vuetify

Question

I'm newly using vuetify. I want to apply datepicker with bottom sheet. When user focus the input field, the calendar will open up from bottom. Can anyone help me how to do it?

Answer 1

try the below code for your component.

<template>
 <div class="text-xs-center">
  <v-bottom-sheet v-model="sheet">
   <v-text-field
     slot="activator"
     name="date"
     label="Date"
     id="date"
     v-model="date"
    ></v-text-field>
   <v-date-picker autosave style="" v-model="date"></v-date-picker>
  </v-bottom-sheet>
 </div>
</template>
<script>
export default {
  data () {
    return {
       date:'',
       sheet:null,
    }
  },
}
</script>
<style>
  .dialog{
    background:white;
    justify-content:center; 
    display:flex
  }
</style>

please let me know if you need anything :)