diff --git a/packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue b/packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue
index 132224c80b..301d7e0440 100644
--- a/packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue
+++ b/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[]) => {
diff --git a/packages/components/date-picker/__tests__/date-picker.test.ts b/packages/components/date-picker/__tests__/date-picker.test.ts
index 5c71a9351c..fe05d05d4d 100644
--- a/packages/components/date-picker/__tests__/date-picker.test.ts
+++ b/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(
+ ``,
+ () => ({ 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(
`()
const inputRef = ref()
@@ -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)
diff --git a/packages/hooks/use-empty-values/index.ts b/packages/hooks/use-empty-values/index.ts
index 74600ba6c4..4ccbc573bf 100644
--- a/packages/hooks/use-empty-values/index.ts
+++ b/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')
}