vue + element 时间选择器增加‘至今’

项目中遇到一个需求，需要时间选择器增加至今选项，在任职年月等其它应用场景应该比较常见，工作使用的是element组件暂时没有发现这个功能，就围魏救赵的方法粗略实现了一下功能。

实现方式 ：因为在el-date-piker不可以展示日期之外的字符串，使用el-date-picker 的 prefix-icon来实现‘至今’的展现，前提得跟后端约定一个字段来控制至今这个内容的接收。

效果如下：

HTML代码如下：

<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 :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="med在这里插入代码片ium" value-format="yyyy-MM-dd" :picker-options="{disabledDate:data=>endDatePicker(data,formObj.timeStart), shortcuts: [{
    text: '至今',
    onClick(picker) {
      now(picker)
    }
    }]
  }">
</el-date-picker>

script代码如下：

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

methods: {
	// 选择至今的操作
	now(picker) {
      this.formObj.timeEndNow = true;
      this.formObj.timeEnd = "";
    },
    // 时间选择的先后限制
    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();
      }
    },
}

css 代码如下：

<style lang="less" scoped>
.goodsManage {
 // 使用控制css的方式将图标改为至今两个字达到效果
  .time-picker {
    /deep/ .el-input__inner {
      padding-left: 0.45rem;
    }
    /deep/ .el-icon-date {
      margin-left: 0.1rem;
      width: 0.3rem;
      color: #333;
      &::before {
        content: '至今';
      }
      &::after {
        content: '';
      }
   }
  }
}
</style>