feat(components): [date-picker] add open and close handlers (#9571)

* feat(components): [date-picker] add handleOpen and handleClose methods

* chore: update date-picker docs

* chore: update date-picker docs

* feat(components): [date-picker] add handleOpen and handleClose methods

* fix: update the handlers description in the docs

Co-authored-by: João Gonçalves <jandretgoncalves@gmail.com>

docs/en-US/component/date-picker.md

@@ -181,9 +181,11 @@ Note, date time locale (month name, first day of the week ...) are also configur
 
 ## Methods
 
-| Method | Description               | Parameters      |
-| ------ | ------------------------- | --------------- |
-| focus  | focus the Input component | focusStartInput |
+| Method      | Description                 | Parameters |
+| ----------- | --------------------------- | ---------- |
+| focus       | focus the Input component   | —          |
+| handleOpen  | open the DatePicker popper  | —          |
+| handleClose | close the DatePicker popper | —          |
 
 ## Slots
 

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

@@ -389,6 +389,54 @@ describe('DatePicker', () => {
     expect(attr).toEqual('false')
   })
 
+  it('ref handleOpen', async () => {
+    _mount(
+      `<el-date-picker
+        v-model="value"
+        ref="input"
+      />`,
+      () => ({ value: '' }),
+      {
+        mounted() {
+          this.$refs.input.handleOpen()
+        },
+      }
+    )
+    await nextTick()
+    const popperEl = document.querySelector('.el-picker__popper')
+    const attr = popperEl.getAttribute('aria-hidden')
+    expect(attr).toEqual('false')
+  })
+
+  it('ref handleClose', async () => {
+    vi.useFakeTimers()
+
+    _mount(
+      `<el-date-picker
+        v-model="value"
+        ref="input"
+      />`,
+      () => ({ value: '' }),
+      {
+        mounted() {
+          this.$refs.input.handleOpen()
+
+          setTimeout(() => {
+            this.$refs.input.handleClose()
+          }, 1000000)
+        },
+      }
+    )
+
+    vi.runAllTimers()
+    await nextTick()
+    const popperEl = document.querySelector('.el-picker__popper')
+    const attr = popperEl.getAttribute('aria-hidden')
+    expect(attr).toEqual('true')
+
+    vi.useRealTimers()
+  })
+
   it('custom content', async () => {
     const wrapper = _mount(
       `<el-date-picker

packages/components/date-picker/src/date-picker.tsx

@@ -52,6 +52,12 @@ export default defineComponent({
       focus: (focusStartInput = true) => {
         commonPicker.value?.focus(focusStartInput)
       },
+      handleOpen: () => {
+        commonPicker.value?.handleOpen()
+      },
+      handleClose: () => {
+        commonPicker.value?.handleClose()
+      },
     }
 
     expose(refProps)