element-ui日期时间选择器禁止输入日期

发布于:2025-05-10 ⋅ 阅读:(13) ⋅ 点赞:(0)

 需求解释:时间日期选择器,下方日期有禁止选择范围,所以上面的日期输入框要求禁止输入,但时间输入框可以输入,也就是下图效果,其中日历中的禁止选择可以通过【picker-options】这个属性实现,此属性官网文档有介绍,此处不做介绍,我们主要介绍怎么实现日期输入框的禁止输入

 第一步:这里要注意的就是@focus="handleFocus",其他的属性都是常规属性

 <el-form-item label="时间" prop="reDate">
              <el-date-picker  type="datetime" @focus="handleFocus" :picker-options="pickerArrivalOptions"  format="yyyy-MM-dd HH:mm" placeholder="请选择时间" v-model="rForm.reDate" style="width: 100%;"></el-date-picker>
            </el-form-item>

 第二部:通过dom获取日期选择弹筐里的日期输入框添加禁止输入属性,这里获取dom结构可能是不一样的,可以自己找一下

handleFocus() {
        setTimeout(() => {
          let datedomAll = document.querySelectorAll('.el-picker-panel .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__time-header .el-date-picker__editor-wrap:first-child input')
          if (datedomAll && datedomAll.length > 0) {
            datedomAll.forEach(item => {
              item.disabled = 'disabled'
              item.style.cursor = 'not-allowed'
              item.style.backgroundColor = '#f5f7fa'
              item.style.color = '#c0c4cc'
              item.style.webkitTextFillColor = '#c0c4cc'
            })
          }
        })
      }

第三步:这里需要注意的是,下面日期重新选择变化时上面的属性就没了,所以要加个watch进行监听

 watch: {
      rForm:{
        handler() {
          this.handleFocus()
        },
        deep: true,
        immediate:true,
      }  
    },


网站公告

今日签到

点亮在社区的每一天
去签到