elementui中日期组件，日期图标在右边，有删除图标（完整代码）

效果图：



日期组件完整代码：

<template>
  <div class="date-picker">
    <el-date-picker
    v-model="datePicker"
    type="daterange"
    :clearable="true"
    range-separator="至"
    align="right"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    value-format="yyyy-MM-dd"
    :picker-options="pickerOptions"
    @input="dateChange"
    @mouseover.native="setDateIcon"
    @mouseleave.native="dateVisableIcon='false'">
    </el-date-picker>
    <i :class="['el-icon-date',dateVisableIcon=='false'?'data_icon':'data_display']"></i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datePicker: [],
      dateVisableIcon:'false',
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now()
        },
      },
    }
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    setDateIcon(){
      if (this.datePicker == '' || this.datePicker == null) {
        return false;
      }
      this.dateVisableIcon='true';
    },
    dateChange(val) {
      let data={}
      data.startDate=val?val[0]:null
      data.endDate=val?val[1]:null
      this.$emit('dateChange',data)
    },
  },
}
</script>
<style lang='less' scoped>
::v-deep .el-range__icon {
    display: none;
}
.date-picker {
  position: relative;
  width: fit-content;
  .data_icon {
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    z-index: 9;
    color: #c0c4cc;
    font-size: 14px;
    transform: translateY(-50%);
  }
  .data_display {
    display: none;
  }

  ::v-deep .el-range__close-icon {
    position: absolute;
    right: 34px;
    top: 54%;
    transform: translateY(-50%);
  }

  ::v-deep .el-range__close-icon {
    right: 15px;
    top: 55%;
  }
}
</style>

父组件使用：

<date-picker ref="datePicker" @dateChange="dateChange"></date-picker>
import datePicker from '@/components/datePicker.vue'
components: {
    datePicker
 },