el-date-picker 隐藏输入框 通过按钮实现弹出

通过点击 下载制定时间数据 弹出 el-date-picker 组件

2.给它设置一个ref标识，在需要选择自定义时间时，直接通过this.$refs.datePickerRef找到该组件，然后$el表示组件元素，通过调用click点击事件控制选择器显示。

html代码：

 <el-date-picker
    v-model="timePick1"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    ref="tiemPick"
    class="timnePickCSS"
  >
  </el-date-picker>

 <div  @click="uploadTime">
   下载指定时间数据
 </div>

js

uploadTime() {

  // 二选一
  // if (this.$refs.tiemPick.$el) this.$refs.tiemPick.$el.click();
  if (this.$refs.tiemPick) this.$refs.tiemPick.focus();
}

Bug

上面处理出现的bug就是时间选择器会跑到页面左上角，因为时间选择器是相对选择框来定位的，当选择框设置隐藏时，时间选择器就会相对整个页面来定位了，elementui封装的就是如此，除非修改源码。

所以还是需要让选择框显示，不能设置隐藏，但是可以通过设置层级间接实现。

解决方法

.timnePickCSS{
  位置 自己设置
  position: fixed;
  top: 30%;
  left: 70%;
  z-index: -1;
}

给 元素设置 visibility:hidden;  也可以
隐藏该元素，真正的隐藏，但他还占有那块空间。