element [Bug Report] el-date-picker日期时间范围组件，当打开只选择开始时间后点清空按钮后，再打开选择开始时间，选中的值会填充到结束时间框里

tp5buhyn 于 3个月前发布在其他

关注(0)|答案(2)|浏览(41)

Element UI version

2.15.13

OS/Browsers version

mac360极速浏览器/12.2.1664.0

Vue version

2.7.14

Reproduction Link

https://jsfiddle.net/mmx38qxw/example1

Steps to reproduce

el-date-picker日期时间范围组件，当打开只选择开始时间后点清空按钮后，再打开选择开始时间，选中的值会填充到结束时间框里【官网组件例子就可以复现：https://element.eleme.cn/#/zh-CN/component/datetime-picker】

What is Expected?

默认常理，只选择开始时间后，点了清空按钮后，重新打开时间选择面板，第一个选择的时间应该是到填充到开始时间框里面

What is actually happening?

只选择开始时间后，点了清空按钮后，重新打开时间选择面板，第一个选择的时间填充到了结束时间框里去了

Element

来源：https://github.com/ElemeFE/element/issues/22494

2条答案

按热度按时间

l5tcr1uw1#

奇怪，不能贴图

赞(0）回复(0）举报 3个月前

h9vpoimq2#

1、新建datePickerPatch.js文件

import { DatePicker } from 'element-ui'
import Picker from 'element-ui/packages/date-picker/src/picker.vue'

const ElDatePickerPatch = {
  extends: DatePicker,
  methods: {
    mountPicker () {
      Picker.methods.mountPicker.call(this)
      const nativeHandleClear = this.picker.handleClear
      this.picker.handleClear = () => {
        if (this.picker.rangeState.selecting) {
          this.picker.rangeState.selecting = false
        }
        nativeHandleClear.call(this.picker)
      }
     }
  }
}
export default {
  install (Vue) {
    Vue.component(DatePicker.name, ElDatePickerPatch)
  }
}

2、使用

import ElDatePickerPatch from './datePickerPatch.js'
Vue.use(ElDatePickerPatch)