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