美文网首页
element ui 中日期有2个日期选择器的时候时间范围限制

element ui 中日期有2个日期选择器的时候时间范围限制

作者: alive02 | 来源:发表于2018-08-10 13:31 被阅读0次

    element ui 中有自带的联动选择的日期限制,可是有需求是要用2个选择器,要求后一个选择器的可选时间要根据前一个选择器变化,前后选择器范围为1个月

    //2个选择器
     <el-date-picker 
          v-model="time1"
          type="date"
          placeholder="开始日期"
          :picker-options="pickerOptions0">
      </el-date-picker>
      <el-date-picker 
           v-model="time2"
           type="date"
           placeholder="结束日期"
           :picker-options="pickerOptions1">
      </el-date-picker>
    //data中定义
     let vm = new Vue({
            el: "#CustomerReport",
            data: {
              time1:'',
              time2:'',
              pickerOptions0: {
                disabledDate: (time) => {
                    if (vm.time2 != "") {
                      let currentTime = vm.time2;
                      let threeMonths = currentTime.setMonth(currentTime.getMonth()-1);
                      currentTime.setMonth(currentTime.getMonth()+1)  
                      return time.getTime() > vm.time2 || time.getTime() < threeMonths ;
                    } else {
                        return time.getTime() > Date.now();
                    }
    
                }
            },
            pickerOptions1: {
              disabledDate:(time) => {
                if( vm.time1 != ""){
                   let currentTime = vm.time1;
                  let threeMonths = currentTime.setMonth(currentTime.getMonth()+1);
                  currentTime.setMonth(currentTime.getMonth()-1)  
                  return time.getTime() < vm.time1 || time.getTime() > threeMonths ;
                }else {
                        return time.getTime() > Date.now();
                    }
               
              }
            },
    })
    

    上面代码可以实现如开始时间是2018-6-01 那么结束时间可选范围为2018-6-01到2018-6-30

    相关文章

      网友评论

          本文标题:element ui 中日期有2个日期选择器的时候时间范围限制

          本文链接:https://www.haomeiwen.com/subject/atvkbftx.html