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') }