el-date-picker自定义只能选中当前月份和半年内月份等

请叫我欧皇i2023-09-09 9:10

需求：el-date-picker只能选中当前月期和当前月期往前半年，其他时间就禁用了不让选择了，因为没数据哈哈。当然也可以选择往前一年等。

一、效果

二、写个日期选择器

:picker-options：日期选项

value-format：选择后的格式

@change：事件改变后触发的函数

html 复制代码

<el-date-picker
          type="months"
          v-model="monthTimeData"
          placeholder="选择一个或多个日期"
          :picker-options="pickerOptions"
          value-format="yyyyMM"
          @change="monthTime"
        >
        </el-date-picker>

三、data的值

javascript 复制代码

      monthTimeData: [], // 绑定的日期值
      currentDate: new Date(), // 当前时间

四、computed

this.currentDate.getMonth() - 4：注意！！！这个-4，就是当前月往前可选的几个月，

-6就是不算上当前月往前可以选6个月，实在不懂可以自己测一下很简单的~

@change时间就是个函数，值就是选择后的值，这边我就不写了

javascript 复制代码

  computed: {
    pickerOptions() {
      const startMonth = new Date(
        this.currentDate.getFullYear(),
        this.currentDate.getMonth() - 4
      );
      const endMonth = this.currentDate;
      
      return {
        disabledDate(time) {
          return time < startMonth || time > endMonth;
        },
      };
    },
  },

文章到此结束，希望对你有所帮助~