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;
        },
      };
    },
  },

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

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端