el-date-picker记录

隐藏输入框

   <div class="my-date-pick" :class="showDate ? '' : 'hide-time'">
          <el-date-picker
            :editable="false"
            ref="timePick"
            v-model="timeVal"
            type="daterange"
            range-separator="~"
            start-placeholder=""
            end-placeholder=""
            format="yyyy/MM/dd"
            @change="dateChange"
          ></el-date-picker>
        </div>
<style scoped>
.my-date-pick >>> .el-input__inner {
  border: 0 solid #dcdfe6;
  height: auto;
  padding: 0;
  width: 100%;
}
.my-date-pick >>> .el-date-editor .el-range-separator {
  padding: 0;
  width: auto;
}
.my-date-pick >>> .el-date-editor .el-range__icon {
  display: none;
}
.my-date-pick >>> .el-date-editor .el-range-input {
  width: 80px;
  color: #4d4d4d;
  cursor: pointer;
}
.my-date-pick >>> .el-date-editor .el-range__close-icon {
  display: none;
}
</style>

通过按钮触发

  <div @click="datePicker" class="edit-all"></div>

    datePicker() {
      this.$refs.timePick.$el.click();
    },

日期选择器位置问题

  <div class="my-date-pick" :class="showDate ? '' : 'hide-time'">
</div>
<style scoped>
.hide-time {
  visibility: hidden; //不会改变位置 （display:none v-show等方法都会影响日期选择器的位置 原生代码是基于父元素的position去定位的）
  width: 0;//宽度设置为0不会占位
}
</style>