美文网首页
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