elmentui 日期选择器添加至今选项

 <el-date-picker v-model="formObj.timeStart" type="date" placeholder="请选择" size="medium" value-format="yyyy-MM-dd" :picker-options="{disabledDate:data=>startDatePicker(data,formObj.timeEnd)}">
      </el-date-picker>
      <span class="" style="margin: 0 2px 0px 8px"> -</span>
      <el-date-picker ref="dataNode" :class="formObj.timeEndNow && !formObj.timeEnd?'time-picker':''" v-model="formObj.timeEnd" prefix-icon='el-icon-date'
      type="date" style="margin-left:10px" :placeholder="formObj.timeEndNow?'至今':'请选择'"
      size="medium" value-format="yyyy-MM-dd"
      :picker-options="{disabledDate:data=>endDatePicker(data,formObj.timeStart),
      shortcuts: [{text: '至今',onClick(picker) {now(picker) }
    }]
  }">
      </el-date-picker>

数据：

 formObj: {
           timeStart: "",
            timeEnd: "",
            // 需要自定义一个字段来单独控制显示至今选项
            timeEndNow: false,
      }

方法：

now() {
        console.log()
        this.formObj.timeEndNow = true;
        this.formObj.timeEnd = "";
        this.$refs.dataNode.handleClose()
      },
      // 时间选择的先后限制
      startDatePicker(time, etime) {
        if (etime) {
          let data = new Date(etime);
          return time.getTime() > data.getTime();
        }
      },
      endDatePicker(time, btime) {
        if (btime) {
          let data = new Date(btime);
          return time.getTime() < data.getTime();
        }
      }

在now（）的方法中

this.formObj.timeEndNow = true;
this.formObj.timeEnd = "";

两个属性控制至今的出现

另外 this.$refs.dataNode.handleClose()中的handleClose(）的方法是elmentui源码中控制弹窗关闭的方法

elmentui 日期选择器添加至今选项

悦读