美文网首页
element-ui使用date-picker中unlink-p

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

作者: ce048d2693f5 | 来源:发表于2021-01-28 16:07 被阅读0次

单面板时间范围选择器

实现方法,使用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");

      }

    }

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

相关文章

网友评论

      本文标题:element-ui使用date-picker中unlink-p

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