如何为Vuetify.js Datepicker传入允许选择的日期数组？

嘿，这事儿其实挺简单的，咱们只需要调整一下allowedDates方法的逻辑，让它检查当前日期是否存在于你指定的允许日期数组里就行。下面是具体的实现步骤：

1. 准备允许的日期数组 #

首先，你需要把允许选择的日期整理成一个数组，最好统一用ISO日期字符串格式（比如'2024-05-20'），这样能和Vuetify日期选择器传入的val格式保持一致，避免匹配出错。比如：

data() {
  return {
    // 示例允许日期数组
    allowedDatesArray: ['2024-05-10', '2024-05-12', '2024-05-15']
  }
}

2. 修改allowedDates方法 #

接下来，把原来的判断逻辑改成检查当前日期是否在允许数组中。直接用数组的includes方法就能搞定：

methods: {
  allowedDates(val) {
    // val是Vuetify传入的ISO格式日期字符串，直接和数组里的元素匹配
    return this.allowedDatesArray.includes(val)
  }
}

3. 兼容非标准格式的日期数组 #

如果你的日期数组里的日期不是ISO格式（比如是Date对象或者其他格式），可以先统一转换一下，确保格式一致。比如：

<template>
  <v-date-picker v-model="selectedDate" :allowed-dates="allowedDates"></v-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      // 假设这里是你从后端拿到的日期数组，可能是Date对象或者其他格式
      rawAllowedDates: [new Date(2024, 4, 10), new Date(2024, 4, 12), '2024-05-15']
    }
  },
  computed: {
    // 预处理日期数组，统一转成YYYY-MM-DD格式的字符串
    allowedDatesArray() {
      return this.rawAllowedDates.map(date => {
        if (date instanceof Date) {
          // 将Date对象转成YYYY-MM-DD格式的字符串
          return date.toISOString().split('T')[0]
        }
        // 如果已经是字符串，直接返回（最好确保格式正确）
        return date
      })
    }
  },
  methods: {
    allowedDates(val) {
      return this.allowedDatesArray.includes(val)
    }
  }
}
</script>

关键说明 #

• Vuetify的allowed-dates回调函数传入的val参数是YYYY-MM-DD格式的字符串，所以我们的允许日期数组必须和这个格式匹配才能正确判断。
• 如果你的原始日期数据是Date对象或者其他格式，一定要先转换成统一的ISO字符串格式，避免因为格式不一致导致匹配失败。

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