我需要的是,我点击时间,确定按钮处于禁止状态,只有选择了才能点击确定
你用的哪个时间日历组件。。。。。还是说本来就是你自己写的?
如果有这个时间选择器的源码,修改源码就很简单
就是element官方的时间日期选择器
你这个需求,,,这个组件默认是选择了当前日期的,所以确定按钮是一直可以点击的。如果想要达到你的需求的话,需要研究element的源码了,要把当前日期的默认选择去掉。。。
二楼大佬有办法吗
你先利用/deep/让他默认禁用 再监听选择框的值只要不为空 就获取确认按钮元素,改变它的style 获取方法是document.querySelector(".el-picker-panel__footer").childNodes[1]
三楼大佬可以帮忙写个小demo吗,刚开始学这个,不太懂o^o
<!--
* @Author: G_yl
* @Date: 2020-12-30 10:30:35
* @LastEditTime: 2020-12-30 10:30:35
-->
<template>
<el-date-picker
class="my-picker"
v-model="dateTimeValue"
@change="pickerChange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="left"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
dateTimeValue: ""
};
},
methods: {
pickerChange(){
if (dateTimeValue!="") {
let dom = document.querySelector(".el-picker-panel__footer").childNodes[1].style
dom.background = "blue"
dom.pointerEvents=""
}
}
}
};
</script>
<style lang="less" scoped>
.my-picker{
/deep/.is-disabled{
background: gray;
color: #ffffffad;
}
}
</style>
伪代码 没测试过
忘记加pointer-events: none; 要使用要在css里面加上
感谢大佬