el-date-picker禁止选择2023 11月之前vue2

最新推荐文章于 2024-05-16 13:30:42 发布

青青子衿越

最新推荐文章于 2024-05-16 13:30:42 发布

阅读量412

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46376192/article/details/135206284

版权

<template>
  <el-date-picker v-model="selectedDate" :picker-options="pickerOptions" @before-picker-show="handleBeforePickerShow"></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      pickerOptions: {
        disabledDate(time) {
          // 获取当前日期的年份和月份
          const year = time.getFullYear();
          const month = time.getMonth();

          // 判断是否在2023年11月之前
          if (year < 2023 || (year === 2023 && month < 10)) {
            return true; // 禁用该日期
          } else {
            return false; // 允许选择该日期
          }
        }
      }
    };
  },
  methods: {
    handleBeforePickerShow(picker) {
      // 设置日期选择范围为2023年11月之后
      picker.$options.disabledDate = time => {
        const year = time.getFullYear();
        const month = time.getMonth();
        
        if (year > 2023 || (year === 2023 && month >= 10)) {
          return false; // 允许选择该日期
        } else {
          return true; // 禁用该日期
        }
      };
    }
  }
};
</script>