elementUi如何在时间控件上加自定义提示文字?

404 阅读1分钟

实现后效果如下: image.png

思路:鼠标聚焦添加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);
            }
          },
        };
      },
     }