单面板时间范围选择器
实现方法,使用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");
}
}
方法比较笨,有别的解决方案,希望告知呦。
网友评论