el-date-picker禁止手动输入只能选择

这篇博客介绍了如何使用CSS和Vue的watch属性来禁止Element UI日期时间选择器的输入。通过设置CSS的z-index使部分组件不可见,以及监听endTime属性来确保时间只能选择到小时,不显示分钟和秒。这种方法为特定需求提供了定制化的输入限制解决方案。
摘要由CSDN通过智能技术生成

element 提供了方法 :editable=“false” 只能禁止外层的输入,但是里层的(白色的部分还是不行)
在这里插入图片描述
这里的话,左侧的日期我是用css使其禁止输入

.el-date-picker__time-header {
    .el-date-picker__editor-wrap:nth-child(1) .el-input:nth-child(1) {
      z-index: -1;
    }
  }

右侧的时间,因为我们的需求是只能选择小时不能选择分秒,所以就用监听完成

watch:{ 
     endTime(nv) {
      // 如果手动输入了分秒,则让分秒归零
      let msTime = moment(nv).format("mm:ss");
      let ymdTime = moment(nv).format("YYYY-MM-DD HH");
      if (msTime !== "00:00") {
        this.endTime = ymdTime + ":00:00";
      }
        }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值