将日期选择器应用于底部 sheet vuetify

Question

我刚开始使用 vuetify。我想应用底部 sheet 的日期选择器。当用户聚焦输入字段时，日历将从底部打开。谁能帮我怎么做？

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>

如果您需要什么，请告诉我:)

将日期选择器应用于底部 sheet vuetify

apply datepicker with bottom sheet vuetify

vuejs2

vuetify.js