vue限制日期选择器不能选今年后的日期

vue限制日期选择器不能选今年后的日期

在 Vue 中，你可以使用 v-date-picker 组件来创建一个日期选择器，并通过 min 和 max 属性来限制日期的选择范围。以下是一个示例代码：

<template>
  <v-date-picker v-model="selectedDate" :min="minDate" :max="maxDate"></v-date-picker>
</template>

<script>
export default {
  data() {
    const today = new Date();
    const currentYear = today.getFullYear();
    const currentMonth = today.getMonth() + 1; // 月份从0开始
    const currentDay = today.getDate();

    const minDate = new Date(currentYear, currentMonth - 1, currentDay);
    const maxDate = new Date(currentYear + 1, currentMonth - 1, currentDay);

    return {
      selectedDate: null,
      minDate,
      maxDate,
    };
  },
};
</script>

在上述示例中，我们通过 JavaScript 的 Date 对象来获取当前日期，并计算出限制日期选择器不能选择今年后的日期的最小日期和最大日期。然后，我们将这两个日期赋值给 minDate 和 maxDate 属性，并将其绑定到 v-date-picker 组件的 min 和 max 属性上。

请注意，上述代码中的日期选择器使用的是 Vuetify 的 v-date-picker 组件，如果你使用的是其他日期选择器组件，可能需要根据组件的文档来设置相应的属性。