<v-date-picker>中如何禁用今日及所有未来日期？

你当前的问题出在两个点：

• :max设为今日日期时，v-date-picker允许选择该日期，所以今日还是能选；
• :disabledDates="date.getDate()"是错误用法，这个属性需要传入一个判断日期的函数，而非直接调用getDate()。

下面给两种可行的解决方法：

方法1：通过:max设置为昨日日期 #

把max值设为前一天的日期字符串，这样今日及之后的日期都会被禁用：

<template>
  <v-date-picker
    class="date-picker-header"
    v-model="dateTo"
    @input="menuTo = false"
    :max="yesterdayDate"
  ></v-date-picker>
</template>

<script>
export default {
  data() {
    return {
      dateTo: null,
      menuTo: false
    };
  },
  computed: {
    yesterdayDate() {
      const yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      // 截取YYYY-MM-DD格式的字符串
      return yesterday.toISOString().slice(0, 10);
    }
  }
};
</script>

方法2：使用disabledDates函数（更灵活） #

通过自定义函数判断每个日期是否需要禁用，明确过滤今日及之后的日期：

<template>
  <v-date-picker
    class="date-picker-header"
    v-model="dateTo"
    @input="menuTo = false"
    :disabledDates="disableFutureAndToday"
  ></v-date-picker>
</template>

<script>
export default {
  data() {
    return {
      dateTo: null,
      menuTo: false
    };
  },
  methods: {
    disableFutureAndToday(date) {
      const today = new Date();
      // 重置今日的时分秒为0，避免时间部分干扰日期比较
      today.setHours(0, 0, 0, 0);
      // 返回true表示禁用该日期，今日及之后的日期都会被禁用
      return date >= today;
    }
  }
};
</script>

两种方法都能实现需求，方法2适合需要更复杂禁用规则的场景，方法1则更简洁直接。

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