diff --git a/packages/components/date-picker/__tests__/date-picker.test.ts b/packages/components/date-picker/__tests__/date-picker.test.ts
index efeaee9ea4781..30c3acb09ce2f 100644
--- a/packages/components/date-picker/__tests__/date-picker.test.ts
+++ b/packages/components/date-picker/__tests__/date-picker.test.ts
@@ -1246,6 +1246,25 @@ describe('DateRangePicker', () => {
it('panel change event', async () => {
await testDatePickerPanelChange('daterange')
})
+
+ it('display value', async () => {
+ const wrapper = _mount(
+ `
+ `,
+ () => ({
+ value: [undefined, undefined],
+ })
+ )
+
+ await nextTick()
+
+ const [startInput, endInput] = wrapper.findAll('input')
+ expect(startInput.element.value).toBe('')
+ expect(endInput.element.value).toBe('')
+ })
})
describe('MonthRange', () => {
diff --git a/packages/components/date-picker/__tests__/date-time-picker.test.ts b/packages/components/date-picker/__tests__/date-time-picker.test.ts
index 9ca6a2e41f62a..c971447fdfe3e 100644
--- a/packages/components/date-picker/__tests__/date-time-picker.test.ts
+++ b/packages/components/date-picker/__tests__/date-time-picker.test.ts
@@ -807,4 +807,23 @@ describe('Datetimerange', () => {
expect(formItem.attributes().role).toBe('group')
})
})
+
+ it('display value', async () => {
+ const wrapper = _mount(
+ `
+ `,
+ () => ({
+ value: [undefined, undefined],
+ })
+ )
+
+ await nextTick()
+
+ const [startInput, endInput] = wrapper.findAll('input')
+ expect(startInput.element.value).toBe('')
+ expect(endInput.element.value).toBe('')
+ })
})
diff --git a/packages/components/time-picker/__tests__/time-picker.test.ts b/packages/components/time-picker/__tests__/time-picker.test.ts
index f0c708167d578..baafc3277987e 100644
--- a/packages/components/time-picker/__tests__/time-picker.test.ts
+++ b/packages/components/time-picker/__tests__/time-picker.test.ts
@@ -788,4 +788,20 @@ describe('TimePicker(range)', () => {
expect(document.querySelector('.el-time-panel')).toBeTruthy()
})
})
+
+ it('display value', async () => {
+ const wrapper = _mount(
+ ``,
+ () => ({ value: [undefined, undefined] })
+ )
+
+ await nextTick()
+
+ const [startInput, endInput] = wrapper.findAll('input')
+ expect(startInput.element.value).toBe('')
+ expect(endInput.element.value).toBe('')
+ })
})
diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue
index 3408cebaec256..1181b169d73eb 100644
--- a/packages/components/time-picker/src/common/picker.vue
+++ b/packages/components/time-picker/src/common/picker.vue
@@ -171,10 +171,10 @@ import { useLocale, useNamespace, useSize } from '@element-plus/hooks'
import { formContextKey, formItemContextKey } from '@element-plus/tokens'
import ElInput from '@element-plus/components/input'
import ElIcon from '@element-plus/components/icon'
-import ElTooltip from '@element-plus/components/tooltip'
import { debugWarn, isArray, isEmpty } from '@element-plus/utils'
import { EVENT_CODE } from '@element-plus/constants'
import { Calendar, Clock } from '@element-plus/icons-vue'
+import ElTooltip from '@element-plus/components/tooltip'
import { timePickerDefaultProps } from './props'
import type { Dayjs } from 'dayjs'
@@ -190,6 +190,7 @@ import type {
TimePickerDefaultProps,
UserInput,
} from './props'
+import type { TooltipInstance } from '@element-plus/components/tooltip'
// Date object and string
const dateEquals = function (a: Date | any, b: Date | any) {
@@ -267,7 +268,7 @@ const elForm = inject(formContextKey, {} as FormContext)
const elFormItem = inject(formItemContextKey, {} as FormItemContext)
const elPopperOptions = inject('ElPopperOptions', {} as Options)
-const refPopper = ref>()
+const refPopper = ref()
const inputRef = ref()
const pickerVisible = ref(false)
const pickerActualVisible = ref(false)
@@ -521,11 +522,15 @@ const onClearIconClick = (event: MouseEvent) => {
pickerOptions.value.handleClear && pickerOptions.value.handleClear()
}
}
+
const valueIsEmpty = computed(() => {
+ const { modelValue } = props
return (
- !props.modelValue || (isArray(props.modelValue) && !props.modelValue.length)
+ !modelValue ||
+ (Array.isArray(modelValue) && !modelValue.filter(Boolean).length)
)
})
+
const onMouseDownInput = async (event: MouseEvent) => {
if (
(event.target as HTMLElement)?.tagName !== 'INPUT' ||