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.只要清楚了組件實現的原理，任何組件都可以實現所有想要的效果。