Vuetify新手求助：如何实现Bottom Sheet式Datepicker？

嘿，作为Vuetify新手想要做这个需求完全没问题，我给你整理了一套简单易懂的实现方案，跟着步骤来就行～

核心思路 #

我们要结合Vuetify自带的v-bottom-sheet（底部弹窗）和v-date-picker（日期选择器）组件，通过输入框的聚焦事件触发底部弹窗打开，选择日期后再同步到输入框并关闭弹窗。

完整实现代码 #

模板部分

<template>
  <v-container class="pa-4">
    <!-- 日期输入框 -->
    <v-text-field
      v-model="formattedDate"
      label="选择日期"
      readonly
      @focus="openSheet"
      placeholder="点击选择日期"
    ></v-text-field>

    <!-- 底部弹窗日期选择器 -->
    <v-bottom-sheet v-model="sheetOpen" persistent>
      <v-card>
        <v-card-title class="text-h5">选择日期</v-card-title>
        <v-card-text>
          <v-date-picker v-model="selectedDate" @input="onDateSelect"></v-date-picker>
        </v-card-text>
        <v-card-actions class="justify-end">
          <v-btn text @click="sheetOpen = false">取消</v-btn>
          <v-btn color="primary" @click="confirmDate">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-bottom-sheet>
  </v-container>
</template>

脚本部分

<script setup>
import { ref, computed } from 'vue'

// 控制底部弹窗的显示状态
const sheetOpen = ref(false)
// 存储选中的原始日期（ISO格式）
const selectedDate = ref(null)

// 格式化日期，用于显示在输入框中
const formattedDate = computed({
  get() {
    if (!selectedDate.value) return ''
    return new Date(selectedDate.value).toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    })
  },
  set() {
    // 输入框只读，这里不需要处理设置逻辑
  }
})

// 打开底部弹窗
const openSheet = () => {
  sheetOpen.value = true
}

// 选择日期时的即时反馈（可选）
const onDateSelect = (date) => {
  selectedDate.value = date
}

// 确认选择日期，关闭弹窗
const confirmDate = () => {
  sheetOpen.value = false
}
</script>

关键细节说明 #

• 输入框设置readonly：避免用户手动输入日期，只能通过点击聚焦打开选择器，保证日期格式统一
• persistent属性：添加到v-bottom-sheet上，点击弹窗外部不会自动关闭，提升用户体验
• 日期格式化：用computed属性把ISO格式的日期转换成用户友好的中文格式，你也可以根据需求调整格式规则
• 事件绑定：通过@focus触发弹窗打开，确认按钮点击后关闭弹窗并同步日期

如果需要自定义底部弹窗的高度或者样式，可以给v-bottom-sheet添加height属性，比如height="600"来调整。

内容的提问来源于stack exchange，提问作者Alauddin Ahmed