fix(components): [date-picker-panel] sync clear value with valueOnClear (#22059)

* fix(components): [date-picker-panel] The value after cleared

* chore: refactor logic to isEmptyValue method

packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue

@@ -871,6 +871,10 @@ const handleMaxTimePick = (
 }
 
 const handleClear = () => {
+  let valueOnClear = null
+  if (pickerBase?.emptyValues) {
+    valueOnClear = pickerBase.emptyValues.valueOnClear.value
+  }
   leftDate.value = getDefaultValue(unref(defaultValue), {
     lang: unref(lang),
     unit: 'month',
@@ -881,7 +885,7 @@ const handleClear = () => {
   minDate.value = undefined
 
   handleRangeConfirm(true)
-  emit('pick', null)
+  emit('pick', valueOnClear)
 }
 
 const formatToString = (value: Dayjs | Dayjs[]) => {

packages/components/date-picker/__tests__/date-picker.test.ts

@@ -160,6 +160,24 @@ describe('DatePicker', () => {
     expect(vm.value).toBeDefined()
   })
 
+  it('cleared value should match the value-on-clear prop', async () => {
+    const value = ['2025-01-01', '2025-01-02']
+    const wrapper = _mount(
+      `<el-date-picker
+        v-model="value"
+        type="daterange"
+        :empty-values="[[]]"
+        :value-on-clear="() => []"
+    />`,
+      () => ({ value })
+    )
+    await nextTick()
+    expect(wrapper.vm.value).toEqual(value)
+    const clearBtn = wrapper.find('.el-range__close-icon')
+    clearBtn.trigger('click')
+    expect(wrapper.vm.value).toEqual([])
+  })
+
   it('defaultTime and clear value', async () => {
     const wrapper = _mount(
       `<el-date-picker

packages/components/time-picker/src/common/picker.vue

@@ -240,7 +240,7 @@ const elPopperOptions = inject(
   PICKER_POPPER_OPTIONS_INJECTION_KEY,
   {} as Options
 )
-const { valueOnClear } = useEmptyValues(props, null)
+const emptyValues = useEmptyValues(props, null)
 
 const refPopper = ref<TooltipInstance>()
 const inputRef = ref<InputInstance>()
@@ -436,9 +436,9 @@ const onClearIconClick = (event: MouseEvent) => {
     if (pickerOptions.value.handleClear) {
       pickerOptions.value.handleClear()
     } else {
-      emitInput(valueOnClear.value)
+      emitInput(emptyValues.valueOnClear.value)
     }
-    emitChange(valueOnClear.value, true)
+    emitChange(emptyValues.valueOnClear.value, true)
     onHide()
   }
   emit('clear')
@@ -510,8 +510,8 @@ const handleChange = () => {
     }
   }
   if (userInput.value === '') {
-    emitInput(valueOnClear.value)
-    emitChange(valueOnClear.value, true)
+    emitInput(emptyValues.valueOnClear.value)
+    emitChange(emptyValues.valueOnClear.value, true)
     userInput.value = null
   }
 }
@@ -657,6 +657,7 @@ const blur = () => {
 
 provide(PICKER_BASE_INJECTION_KEY, {
   props,
+  emptyValues,
 })
 provide(ROOT_COMMON_PICKER_INJECTION_KEY, commonPicker)
 

packages/hooks/use-empty-values/index.ts

@@ -3,8 +3,10 @@ import {
   buildProps,
   debugWarn,
   definePropType,
+  isArray,
   isFunction,
 } from '@element-plus/utils'
+import { isEqual } from 'lodash-unified'
 
 import type { ExtractPropTypes, InjectionKey, Ref } from 'vue'
 
@@ -33,7 +35,13 @@ export const useEmptyValuesProps = buildProps({
       Function,
     ]),
     default: undefined,
-    validator: (val: unknown) => (isFunction(val) ? !val() : !val),
+    validator: (val: unknown) => {
+      val = isFunction(val) ? val() : val
+      if (isArray(val)) {
+        return val.every((item) => !item)
+      }
+      return !val
+    },
   },
 } as const)
 
@@ -64,10 +72,18 @@ export const useEmptyValues = (
   })
 
   const isEmptyValue = (value: unknown) => {
-    return emptyValues.value.includes(value)
+    let result = true
+    if (isArray(value)) {
+      result = emptyValues.value.some((emptyValue) => {
+        return isEqual(value, emptyValue)
+      })
+    } else {
+      result = emptyValues.value.includes(value)
+    }
+    return result
   }
 
-  if (!emptyValues.value.includes(valueOnClear.value)) {
+  if (!isEmptyValue(valueOnClear.value)) {
     debugWarn(SCOPE, 'value-on-clear should be a value of empty-values')
   }