将datepicker与bottom sheet vuetify一起使用

Question

我刚刚使用了vuetify。我想将datepicker应用于底部工作表。当用户聚焦输入字段时，日历将从底部打开。任何人都可以帮我怎么做？

Answer 1

为您的组件尝试以下代码。

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

如果您需要，请告诉我们。）