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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 心中的帆(原创首发) 作者/韩林(山东) 浩瀚的海洋白帆点点 百舸竞流乘风破浪 眺望远航的那片风帆 已从心海划出很...
    翰林居阅读 373评论 0 1
  • 1.引子   iOS App开发过程中总会遇到Debug、UI调整、查看系统Log等诉求,以往的Debug成本会随...
    牛哥小小阅读 3,588评论 0 6