实现日期选择器 年月日 对大于当前日期的时间进行禁选

技术：ant design vue组件库中的a-date-picker

实现效果：

代码：

<template>
  <div>
    <div v-show="searchFormState.dateType == '1'">
      <a-date-picker
        v-model:value="dateYear"
        picker="year"
        value-format="YYYY"
        class="w-full"
        :disabledDate="disabledYear"
      />
    </div>
    <div v-show="searchFormState.dateType == '2'">
      <a-date-picker
        v-model:value="dateMonth"
        picker="month"
        value-format="YYYY - MM"
        class="w-full"
        :disabledDate="disabledMonth"
      />
    </div>
    <div v-show="searchFormState.dateType == '3'">
      <a-date-picker
        v-model:value="dateDay"
        value-format="YYYY - MM - DD"
        class="w-full"
        :disabledDate="disabledDay"
      />
    </div>
  </div>
</template>

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

export default {
  setup() {
    const searchFormState = ref({ dateType: '1' });
    const dateYear = ref('');
    const dateMonth = ref('');
    const dateDay = ref('');

    const currentDate = new Date();
    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth();
    const currentDay = currentDate.getDate();

    const disabledYear = (date) => {
       return date && date.year() > currentYear;
    };
    const disabledMonth = (date) => {
      const selectedYear = date.year();
      if (selectedYear === currentYear) {
        return date.month() > currentMonth;
      }
      return selectedYear > currentYear;
    };

    const disabledDay = (date) => {
      const selectedYear = date.year();
      const selectedMonth = date.month();
      if (selectedYear === currentYear && selectedMonth === currentMonth) {
        return date.date() > currentDay;
      }
      if (selectedYear === currentYear) {
        return selectedMonth > currentMonth;
      }
      return selectedYear > currentYear;
    };

    return {
      searchFormState,
      dateYear,
      dateMonth,
      dateDay,
      disabledYear,
      disabledMonth,
      disabledDay
    };
  }
};
</script>