element的时间组件的可选时间段,时间段之前或者之后禁用

列如

 

2022年01-01之前的日期不可选择 和不可以选择当天以后的日期

html部分

      <el-date-picker :clearable="false" :picker-options="pickerOptions" v-model="timelist" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>

 js部分

  data() {
    return {

      timelist: [],//时间
      // 时间的禁用状态
      pickerOptions: {
        disabledDate: time => {
          let this_  = this
          //在此判断 当前的时间是否小于2022-01-01 
          //如果小于就禁用 小于这个时间不可选择
          // 1,先把时间转换成时间戳
          let startdate = new Date('2021-12-31')
          let startDay = startdate.getTime()
          // 如果大于就禁用 大于当前时间不可选择
          // 2,获取当前时间 



          let enddate =  new Date(this_.datetime()) 
          let endDay = enddate.getTime()
          // 进行判断 || 就返回true
          if( time.getTime()<startDay  || time.getTime()>endDay){
            return true
          }

        },
      },

        }
    }

created(){


    //获取时间
    getCurrentMonth() {
      // 获取当年1月1号
      var date = new Date()
      // date.setDate(1)
      let beginTime = date.getFullYear() + "-01" + "-01"  //当前年的1月1

      //  let year = date.getFullYear();
     //  let month = date.getMonth() + 1;
     //  let day = date.getDate();
     // month = (month > 9) ? month : ('0' + month);
     //  day = (day < 10) ? ('0' + day) : day;
     //  let today = year + '-' + month + '-' + day; //当前年的今天
      this.timelist=[beginTime,this.datetime()]
     
    },
   }
methods:{


    // 获取时间格式为2021-12-31的方法
    datetime(){
      var date = new Date()
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = (month > 9) ? month : ('0' + month);
      day = (day < 10) ? ('0' + day) : day;
      let today = year + '-' + month + '-' + day; //当前年的今天
      return today
    },


}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值