Vuetify 3日期范围选择器支持起止日期为同一天的实现问询

Vuetify 默认的日期范围选择逻辑会把第二次点击同一日期判定为取消选择，导致无法设置起止日期相同的情况。要实现这个需求，你可以手动监听日期选择器的更新事件，自定义处理选中的日期：

1. 自定义日期更新逻辑 #

通过监听update:model-value事件，手动控制绑定的日期范围数组，当检测到用户重复点击同一日期时，强制将起止日期设为同一天：

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

// 绑定的日期范围数组
const dateRange = ref([])

const handleDateUpdate = (newRange) => {
  // 场景：已选一个起始日期，再次点击同一日期
  if (newRange.length === 1 
      && dateRange.value.length === 1 
      && newRange[0].getTime() === dateRange.value[0].getTime()) {
    // 强制设置起止为同一天
    dateRange.value = [newRange[0], newRange[0]]
  } else {
    // 其他情况按默认逻辑处理
    dateRange.value = newRange
  }
}
</script>

2. 修改模板绑定 #

将原本的v-model拆分为:model-value和@update:model-value，使用自定义的处理函数替代默认双向绑定：

<template>
  <v-menu>
    <template v-slot:activator="{ props }">
      <v-text-field
        :model-value="dateRange.length 
          ? `${dateRange[0].toISOString().split('T')[0]} - ${dateRange[1].toISOString().split('T')[0]}` 
          : ''"
        label="选择日期范围"
        readonly
        v-bind="props"
      />
    </template>
    <v-date-picker
      :model-value="dateRange"
      @update:model-value="handleDateUpdate"
      range
      locale="zh-CN"
    />
  </v-menu>
</template>

逻辑说明 #

• 第一次点击日期时，newRange为单个日期数组，直接赋值给dateRange作为起始日期；
• 再次点击同一日期时，通过时间戳判断选中日期与已选起始日期相同，此时将dateRange设置为包含两个相同日期的数组，实现同一天的范围选择；
• 如果需要初始化或手动设置同一天范围，直接给dateRange赋值[new Date('2024-12-25'), new Date('2024-12-25')]即可。

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