惠州网站设计定制怎样宣传自己的品牌

 需求解释：时间日期选择器，下方日期有禁止选择范围，所以上面的日期输入框要求禁止输入，但时间输入框可以输入，也就是下图效果，其中日历中的禁止选择可以通过【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,}  },