1

image.png
Recently, I encountered a demand and asked to click the "Clear" button at the bottom to not close the date box. The element-ui is clicked to close by default. Checking the official documents did not give configuration items or callbacks, so I had to find a way to achieve it. My approach is to listen to the change event, the time value is null when the click is cleared, and then the date box is opened in it. The specific code is as follows:

template

<el-date-picker
    ref="datePicker"
    v-model="timeSelect"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围"
    @change="selectTime"
    :picker-options="pickerOptions"
    :default-time="['00:00:00', '23:59:59']"
  >
</el-date-picker>

js

selectTime(v) {
  // 点清空按钮
  if (v === null) {
    this.$refs.datePicker.showPicker()
    this.timeSelect = []
    return
  }
}

all2005
3.4k 声望36 粉丝