Vuetify 3中替代Vuetify 2 v-date-picker的组件及日期控制方案咨询

Vuetify 3 中的日期选择实现 #

Vuetify 3 不再单独提供 v-date-picker 组件，原日期选择功能被整合到了 v-calendar 组件中，通过配置参数即可实现日期选择需求：

• 基础用法：设置 type="date" 开启日期选择模式，配合 v-model 绑定选中值
• 控制可选日期范围：使用 min 属性设置最早可选日期，max 属性设置最晚可选日期，以此限制用户选择过去或未来日期

示例代码：

<template>
  <v-calendar
    v-model="selectedDate"
    type="date"
    :min="new Date().toISOString().split('T')[0]" <!-- 禁用过去日期 -->
    <!-- :max="new Date().toISOString().split('T')[0]" 禁用未来日期 -->
  ></v-calendar>
</template>

<script setup>
import { ref } from 'vue'
const selectedDate = ref(null)
</script>

替代方案 #

如果 v-calendar 不符合需求，可选择以下方案：

• 原生 HTML5 日期输入框：无需额外依赖，通过 min/max 属性控制可选范围，兼容性较好

  <template>
    <input
      type="date"
      v-model="selectedDate"
      :min="new Date().toISOString().split('T')[0]"
    >
  </template>
  
  <script setup>
  import { ref } from 'vue'
  const selectedDate = ref('')
  </script>
  

• 第三方 Vue3 日期选择组件：比如 vue3-datepicker，支持丰富的自定义配置，包括日期范围禁用、主题自定义等，可通过包管理工具安装使用

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