javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [date-picker] ensure reset visibility on picker range (#21691)

Browse Source 
closed #21689
This commit is contained in:
Noblet Ouways
2025-08-11 14:25:30 +02:00
committed by GitHub
parent 826373a133
commit 24cbd4bdbb
3 changed files with 103 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
packages/components/date-picker/__tests__/date-picker.test.ts
View File

@@ -1634,6 +1634,71 @@ describe('DateRangePicker', () => {
expect(calendarChangeValue[1]).toBeInstanceOf(Date)
})
it('daterange should be reopen successfully', async () => {
const wrapper = _mount(
`<el-date-picker
v-model="value"
type='daterange'
/>`,
() => ({ value: '' })
)
const rangePanelWrapper = wrapper.findComponent(
'.el-date-range-picker'
) as VueWrapper<InstanceType<typeof DatePickerRange>>
expect(rangePanelWrapper.vm.visible).toBe(false)
const input = wrapper.find('input')
await input.trigger('blur')
await input.trigger('focus')
expect(rangePanelWrapper.exists()).toBe(true)
expect(rangePanelWrapper.vm.visible).toBe(true)
const cells = document.querySelectorAll('.available .el-date-table-cell')
;(cells[0] as HTMLElement).click()
await nextTick()
;(cells[1] as HTMLElement).click()
await nextTick()
expect(rangePanelWrapper.vm.visible).toBe(false)
await input.trigger('blur')
await input.trigger('focus')
expect(rangePanelWrapper.vm.visible).toBe(true)
})
it('daterange should be reopen successfully with value-format', async () => {
const wrapper = _mount(
`<el-date-picker
v-model="value"
type='daterange'
value-format="YYYY-MM-DD"
/>`,
() => ({ value: '' })
)
const rangePanelWrapper = wrapper.findComponent(
'.el-date-range-picker'
) as VueWrapper<InstanceType<typeof DatePickerRange>>
expect(rangePanelWrapper.vm.visible).toBe(false)
const input = wrapper.find('input')
await input.trigger('blur')
await input.trigger('focus')
expect(rangePanelWrapper.exists()).toBe(true)
expect(rangePanelWrapper.vm.visible).toBe(true)
const cells = document.querySelectorAll('.available .el-date-table-cell')
;(cells[0] as HTMLElement).click()
await nextTick()
;(cells[1] as HTMLElement).click()
await nextTick()
expect(rangePanelWrapper.vm.visible).toBe(false)
await input.trigger('blur')
await input.trigger('focus')
expect(rangePanelWrapper.vm.visible).toBe(true)
})
it('reverse selection', async () => {
const wrapper = _mount(
`<el-date-picker

37
packages/components/date-picker/__tests__/date-time-picker.test.tsx
View File

@@ -1079,4 +1079,41 @@ describe('Datetimerange', () => {
expect(spy).toHaveBeenCalledOnce()
expect(rangePanelWrapper.vm.visible).toBe(false)
})
it('datetimerange should be reopen successfully', async () => {
const values = ref()
const wrapper = _mount(() => (
<DatePicker
v-model={values.value}
type="datetimerange"
valueFormat="YYYY-MM-DD"
/>
))
const rangePanelWrapper = wrapper.findComponent(
'.el-date-range-picker'
) as VueWrapper<InstanceType<typeof DatePickerRange>>
expect(rangePanelWrapper.vm.visible).toBe(false)
const input = wrapper.find('input')
await input.trigger('blur')
await input.trigger('focus')
expect(rangePanelWrapper.exists()).toBe(true)
expect(rangePanelWrapper.vm.visible).toBe(true)
const cells = document.querySelectorAll('.available .el-date-table-cell')
;(cells[0] as HTMLElement).click()
await nextTick()
;(cells[1] as HTMLElement).click()
await nextTick()
const button = document.querySelectorAll(
'.el-picker-panel__footer button'
)![1] as HTMLButtonElement
button.click()
await nextTick()
expect(rangePanelWrapper.vm.visible).toBe(false)
await input.trigger('blur')
await input.trigger('focus')
expect(rangePanelWrapper.vm.visible).toBe(true)
})
})

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

@@ -698,6 +698,7 @@ const handleRangePick = (
watch([maxDate, minDate], ([max, min]) => {
if (max && min) {
handleRangeConfirm(shouldBeVisible)
shouldBeVisible = true
}
})