实现后效果如下:
思路:鼠标聚焦添加DOM,失焦移除DOM;
<el-date-picker v-model="item.projectCycle" type="datetimerange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="setChildProjectDate" @focus="setDialogTit" @blur="blurDialogTit" :picker-options="pickerOptions">
</el-date-picker>
时间框动态添加自定义提示文字
setDialogTit(){
let that = this;
const elements = document.querySelector('.remarkClass');
if(elements != null) return;
const parentElem = document.querySelector('.el-picker-panel__body');
const childElem = document.querySelector('.el-date-range-picker__time-header');
const spanElem = document.createElement('div');
spanElem.classList.add('remarkClass');
spanElem.style.cssText = 'color: red; margin-left: 20px;';
let statTime = that.planStartTime;
let endTime = that.deadline;
spanElem.textContent = "温馨提示:只可选择主任务:" + statTime + "至" + endTime + "时间范围内的日期";
if (parentElem !== null && childElem !== null) {
parentElem.insertBefore(spanElem, childElem);
} else {
console.log('防止DOM未找到指定的元素');
}
},
移除时间框动态DOM
blurDialogTit(){
this.removeElementsByClass('remarkClass');
},
const elements = document.querySelectorAll(`.${className}`);
elements.forEach(element => element.remove());
},
选择时间时触发的方法:
setChildProjectDate(v) {
if (!v) {
return;
}
if (v[0] === v[1]) {
v[0] = v[0].substring(0, 11) + "00:00:00";
v[1] = v[1].substring(0, 11) + "23:59:59";
this.form.deadline = v[1];
this.form.planStartTime = v[0];
return;
}
if (new Date(v[1]).getTime() - new Date(v[0]).getTime() < 1800000) {
this.msgWarning("时间跨度不能小于半个小时");
this.childTimeLimit = "";
return;
}
this.form.deadline = v[1];
this.form.planStartTime = v[0];
},
限制新增的时间选择范围
computed: {
pickerOptions() {
let that = this;
return {
disabledDate(time) {
if (that.deadline && that.planStartTime) {
return (
time.getTime() < Date.parse(that.planStartTime + " 00:00:00") ||
Date.parse(that.deadline) < time.getTime()
);
} else if (that.deadline) {
return Date.parse(that.deadline) < time.getTime();
} else if (that.planStartTime) {
return time.getTime() < Date.parse(that.planStartTime);
}
},
};
},
}