Vuetify Datepicker开启range属性时获取区间内有效选中日期方法

启用range属性后，v-date-picker的v-model确实只会返回区间起止两个日期，要拿到区间内所有符合可选规则的日期，直接遍历起止日期区间、复用已有的allowed-dates校验规则过滤即可，不需要修改组件原有配置。

实现逻辑 #

1. 编写区间日期遍历工具函数，注意处理时区偏移问题，避免日期计算错误
2. 复用组件上绑定的allowedDates校验方法，过滤掉区间内不可选的日期
3. 通过计算属性实时返回选中区间内的所有有效日期，不用额外绑定事件监听

可直接复用的代码 #

日期遍历工具方法 #

/**
 * 生成日期区间内所有符合可选规则的日期
 * @param {string} startStr 开始日期 YYYY-MM-DD格式
 * @param {string} endStr 结束日期 YYYY-MM-DD格式
 * @param {Function} allowedCheck 日期可选校验函数，和组件绑定的allowed-dates逻辑一致
 * @returns {string[]} 区间内所有有效日期，格式为YYYY-MM-DD
 */
const getRangeValidDates = (startStr, endStr, allowedCheck) => {
  const validDates = []
  // 拆分字符串构造日期对象，避免new Date('YYYY-MM-DD')带来的时区偏移问题
  const [startYear, startMonth, startDay] = startStr.split('-').map(Number)
  const [endYear, endMonth, endDay] = endStr.split('-').map(Number)
  const curDate = new Date(startYear, startMonth - 1, startDay)
  const endDate = new Date(endYear, endMonth - 1, endDay)

  while (curDate <= endDate) {
    // 格式化为和组件一致的YYYY-MM-DD字符串
    const formatYear = curDate.getFullYear()
    const formatMonth = String(curDate.getMonth() + 1).padStart(2, '0')
    const formatDay = String(curDate.getDate()).padStart(2, '0')
    const curDateStr = `${formatYear}-${formatMonth}-${formatDay}`
    
    // 仅保留符合可选规则的日期
    if (allowedCheck(curDateStr)) {
      validDates.push(curDateStr)
    }
    // 日期向后推1天
    curDate.setDate(curDate.getDate() + 1)
  }
  return validDates
}

业务代码中调用 #

直接通过计算属性实时获取结果即可，选完起止日期后会自动计算：

// 原有响应式变量保持不变：days、allowedDates、minDate
const allSelectedDays = computed(() => {
  // 未选完完整区间时返回空数组
  if (!days.value || days.value.length !== 2) return []
  const [startDate, endDate] = days.value
  return getRangeValidDates(startDate, endDate, allowedDates.value)
})

注意事项 #

• 日期构造时不要直接写new Date('2024-01-01')，UTC时区下会解析为前一天的23点，导致遍历结果缺漏，按年月日拆分构造本地日期对象可以规避这个问题
• 直接复用组件绑定的allowedDates方法做过滤，不需要重复写日期禁用规则，能保证返回结果和组件UI上的可选日期完全一致
• 如果项目里已经引入了dayjs/date-fns等日期处理库，可以用库的日期累加、格式化方法替换原生实现，逻辑完全一致

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