Vuetify 3 v-date-picker选择日期点击确定后绑定空数组问题

你的问题核心在于Vuetify 3 Labs的v-date-picker默认是范围选择模式，这直接导致两个问题：

• v-model绑定的变量默认是数组类型，单日期选择时无法正确赋值，最终出现空数组
• 单个日期不会被高亮，因为组件默认等待选择第二个日期完成范围选择

修复步骤 #

1. 切换为单日期选择模式

在BaseDialog.vue的v-date-picker上添加mode="single"属性，强制组件使用单日期选择逻辑：

<v-date-picker
    v-model="date"
    mode="single" <!-- 新增该行 -->
    style="font-size: 20px"
    title="Date of Birth"
    calendarIcon="mdi-calendar-account"
    collapseIcon="mdi-calendar-collapse-horizontal"
    expandIcon="mdi-calendar-expand-horizontal"
    keyboardIcon="mdi-keyboard"
    showAdjacentMonths
    elevation="20"
    color="primary"
    @click:cancel="closeCalendar"
    @click:save="saveValue"
    :min="1900"
    :max="2024"
></v-date-picker>

2. 同步父组件已选日期到对话框

让对话框打开时自动加载父组件的已选日期，同时实现双向绑定：
修改BaseDialog.vue的props和逻辑：

<template>
    <teleport to="body">
        <v-dialog :model-value="isVisible" width="auto">
          <v-date-picker
              v-model="date"
              mode="single"
              <!-- 其他属性保持不变 -->
          ></v-date-picker>
        </v-dialog>
    </teleport>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { VDatePicker } from 'vuetify/labs/components';
export default defineComponent({
    components: {
        'v-date-picker': VDatePicker
    },
  emits:['close-calendar', 'update:modelValue'],
    props: {
        isVisible: {
            type: Boolean,
            required: true
        },
        modelValue: {
            type: String,
            default: undefined
        }
    },
    setup(props, context) {
      const date = ref<string | undefined>(props.modelValue);

      // 对话框打开时同步父组件的日期
      watch(() => props.isVisible, (newVal) => {
        if (newVal) date.value = props.modelValue;
      })

      watch(date, (newValue)=> {
        console.log('Base Dialog Watch => ', newValue);
      })
      const closeCalendar = ()=> {
        context.emit('close-calendar');
      };
      const saveValue = () => {
        context.emit('update:modelValue', date.value);
        closeCalendar();
      }
      return {
        date, closeCalendar, saveValue
      }
    }
})
</script>

3. 优化父组件的双向绑定

修改App.vue中base-dialog的使用方式，通过v-model实现自动同步：

<base-dialog
    :is-visible="showDialog"
    @close-calendar="showCalendar(false)"
    v-model="dateOfBirth" <!-- 新增双向绑定 -->
></base-dialog>

同时简化父组件的逻辑，移除冗余的dob方法，改用watch监听日期变化：

setup() {
    const showDialog = ref<boolean>(false);
    const dateOfBirth = ref<string | undefined>(undefined);
    const showCalendar = (show:boolean) => {
      showDialog.value = show;
    }

    watch(dateOfBirth, (val) => {
      console.log("Date of Birth =>", val);
    })

    return {
      showDialog,
      dateOfBirth, showCalendar
    }
  }

4. 可选：优化文本框日期显示

如果需要更友好的日期格式，可添加掩码：

<v-text-field
    v-model="dateOfBirth"
    type="text"
    label="*Date of Birth"
    append-inner-icon="mdi-calendar"
    :clearable="true"
    density="compact"
    variant="outlined"
    @click:append-inner="showCalendar(true)"
    :mask="['####', '-', '##', '-', '##']" <!-- 添加日期掩码 -->
></v-text-field>

关于官方示例的高亮问题 #

你提到的官方示例高亮异常，大概率是因为示例默认使用范围选择模式，切换为mode="single"后，选中日期就会正常高亮。

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