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

需求: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;
        },
      };
    },
  },

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

相关推荐
科技探秘人2 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR8 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香10 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969313 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai18 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91527 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试