element-ui使用date-picker中unlink-p

2021-01-28  本文已影响0人  ce048d2693f5

单面板时间范围选择器

实现方法,使用unlink-panels属性取消两个面板间的联动,用css设置display:none隐藏右面板。

这个有个bug,第一次选择没有问题,比如上一次选择的最大日期是2020年12月,下一次再选右按钮只能选择到2020年11月就会被禁用掉

解决方案:绑定focus,获取dom元素,绑定click事件,清除属性

@focus="focus"

focus() {

      // 去掉日期选择右上角下一月被禁用

      if(document.getElementsByClassName("el-picker-panel")[0]) {

        let butten = document.getElementsByClassName("el-picker-panel")[0]

                              .getElementsByClassName("is-left")[0]

                              .getElementsByClassName("el-icon-arrow-right")[0];

       butten.classList.remove("is-disabled");

       butten.removeAttribute("disabled");

       // 去掉日期选择右上角下一年 

       let nextYear = document.getElementsByClassName("el-picker-panel")[0]

                              .getElementsByClassName("is-left")[0]

                              .getElementsByClassName("el-icon-d-arrow-right")[0];

       nextYear.classList.remove("is-disabled");

       nextYear.removeAttribute("disabled");

      }

    }

方法比较笨,有别的解决方案,希望告知呦。

上一篇 下一篇

猜你喜欢

热点阅读