DateTimePicker日期时间选择器中，只需要选择器，不需要输入框

vue的element-ui中有个日期时间选择器，有个需求就是只需要使用选择器，而不需要输入框，也就是说选择时间的触发条件是别的事件，比如点击某个按钮。

 

实现效果：

组件默认样式：输入框和时间选择器是绑定的，当点击输入框时，才显示时间选择器。

 

需求：当点击选项：自定义时间 时，显示出时间选择器，此时可以选择时间。

      

 

 实现代码：

1.template：

<!-- 时间选择器 -->
<el-date-picker
  v-model="form.timeValueArr"
  type="datetimerange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  value-format="yyyy-MM-dd HH:mm:ss"
  ref="datePickerRef"
  v-show="false"
  @change="fnchooseCustomTime"
>
</el-date-picker>

2.js：

this.$refs.datePickerRef.$el.click(); // 手动控制日期时间选择器打开

// 选择自定义时间范围
fnchooseCustomTime(value) {
  this.form.timeValue = value.join(",");
  this.chooseTime();
},

 

实现原理：

1.需要在HTML中添加一个日期时间选择器，但是设置为false，不显示。

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

3.给组件设置change方法，当选择完时间之后，可以获取到选择的时间，进行需要的操作。

 

bug：

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

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

 

解决代码：

1.template：

<!-- 时间选择器 -->
<el-date-picker
  v-model="form.timeValueArr"
  type="datetimerange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  value-format="yyyy-MM-dd HH:mm:ss"
  ref="datePickerRef"
  class="date_style"
  @change="fnchooseCustomTime"
>
</el-date-picker>

2.js不变，同上。

3.css：

.date_style {
  margin-left: -100px;
  width: 100px;
  z-index: -1;
}

 

注意：

1.由于在element-UI中对组件进行了封装，所以将输入框和选择器绑定到了一起，只对外提供了一个标签来使用，所以我们这边很难做修改，需要改变源代码。但是可以采用巧妙的办法：比如通过手动的方法来控制组件实现效果。

2.只要清楚了组件实现的原理，任何组件都可以实现所有想要的效果。