feat(components): [el-date-picker] add panel change event (#5304)

* feat(components): [el-date-picker] add panel change event

* docs: [el-date-picker] add panel change event

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

@@ -216,6 +216,7 @@ Note, date time locale (month name, first day of the week ...) are also configur
 | blur            | triggers when Input blurs                                                 | component instance        |
 | focus           | triggers when Input focuses                                               | component instance        |
 | calendar-change | triggers when the calendar selected date is changed. Only for `daterange` | [Date, Date]              |
+| panel-change    | triggers when the navigation button click.                                | `(date, mode, view)`      |
 
 ## Methods
 

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

@@ -30,6 +30,53 @@ afterEach(() => {
   document.documentElement.innerHTML = ''
 })
 
+const testDatePickerPanelChange = async (type: 'date' | 'daterange') => {
+  let mode
+  const wrapper = _mount(
+    `<el-date-picker
+        type="${type}"
+        v-model="value"
+        @panel-change="onPanelChange"
+    />`,
+    () => ({ value: type === 'daterange' ? [] : '' }),
+    {
+      methods: {
+        onPanelChange(value, _mode) {
+          mode = _mode
+        },
+      },
+    }
+  )
+
+  const reset = () => {
+    mode = undefined
+  }
+
+  const input = wrapper.find('input')
+  input.trigger('blur')
+  input.trigger('focus')
+  await nextTick()
+  const prevMonth = document.querySelector<HTMLElement>('button.arrow-left')
+  const prevYear = document.querySelector<HTMLElement>('button.d-arrow-left')
+  const nextMonth = document.querySelector<HTMLElement>('button.arrow-right')
+  const nextYear = document.querySelector<HTMLElement>('button.d-arrow-right')
+  prevMonth.click()
+  await nextTick()
+  expect(mode).toBe('month')
+  reset()
+  nextMonth.click()
+  await nextTick()
+  expect(mode).toBe('month')
+  reset()
+  prevYear.click()
+  await nextTick()
+  expect(mode).toBe('year')
+  reset()
+  nextYear.click()
+  await nextTick()
+  expect(mode).toBe('year')
+}
+
 describe('DatePicker', () => {
   it('create & custom class & style', async () => {
     const popperClassName = 'popper-class-test'
@@ -532,6 +579,10 @@ describe('DatePicker Navigation', () => {
     expect(getYearLabel()).toContain('2001')
     expect(getMonthLabel()).toContain('January')
   })
+
+  it('panel change event', async () => {
+    await testDatePickerPanelChange('date')
+  })
 })
 
 describe('MonthPicker', () => {
@@ -1094,6 +1145,10 @@ describe('DateRangePicker', () => {
       ['01/05 2021', '01/06 2021'].toString()
     )
   })
+
+  it('panel change event', async () => {
+    await testDatePickerPanelChange('daterange')
+  })
 })
 
 describe('MonthRange', () => {

packages/components/date-picker/src/date-picker-com/panel-date-pick.vue

@@ -229,7 +229,7 @@ export default defineComponent({
       validator: isValidDatePickType,
     },
   },
-  emits: ['pick', 'set-picker-option'],
+  emits: ['pick', 'set-picker-option', 'panel-change'],
   setup(props, ctx) {
     const { t, lang } = useLocale()
     const pickerBase = inject('EP_PICKER_BASE') as any
@@ -317,10 +317,12 @@ export default defineComponent({
     }
     const prevMonth_ = () => {
       innerDate.value = innerDate.value.subtract(1, 'month')
+      handlePanelChange('month')
     }
 
     const nextMonth_ = () => {
       innerDate.value = innerDate.value.add(1, 'month')
+      handlePanelChange('month')
     }
 
     const prevYear_ = () => {
@@ -329,6 +331,7 @@ export default defineComponent({
       } else {
         innerDate.value = innerDate.value.subtract(1, 'year')
       }
+      handlePanelChange('year')
     }
 
     const nextYear_ = () => {
@@ -337,6 +340,7 @@ export default defineComponent({
       } else {
         innerDate.value = innerDate.value.add(1, 'year')
       }
+      handlePanelChange('year')
     }
 
     const currentView = ref('date')
@@ -402,6 +406,7 @@ export default defineComponent({
       } else {
         currentView.value = 'date'
       }
+      handlePanelChange('month')
     }
 
     const handleYearPick = (year) => {
@@ -412,6 +417,7 @@ export default defineComponent({
         innerDate.value = innerDate.value.year(year)
         currentView.value = 'month'
       }
+      handlePanelChange('year')
     }
 
     const showMonthPicker = () => {
@@ -640,6 +646,15 @@ export default defineComponent({
       }
     }
 
+    const handlePanelChange = (mode: 'month' | 'year') => {
+      ctx.emit(
+        'panel-change',
+        innerDate.value.toDate(),
+        mode,
+        currentView.value
+      )
+    }
+
     ctx.emit('set-picker-option', ['isValidValue', isValidValue])
     ctx.emit('set-picker-option', ['formatToString', formatToString])
     ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])

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

@@ -285,7 +285,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['pick', 'set-picker-option', 'calendar-change'],
+  emits: ['pick', 'set-picker-option', 'calendar-change', 'panel-change'],
 
   setup(props, ctx) {
     const { t, lang } = useLocale()
@@ -372,6 +372,7 @@ export default defineComponent({
       if (!props.unlinkPanels) {
         rightDate.value = leftDate.value.add(1, 'month')
       }
+      handlePanelChange('year')
     }
 
     const leftPrevMonth = () => {
@@ -379,6 +380,7 @@ export default defineComponent({
       if (!props.unlinkPanels) {
         rightDate.value = leftDate.value.add(1, 'month')
       }
+      handlePanelChange('month')
     }
 
     const rightNextYear = () => {
@@ -388,6 +390,7 @@ export default defineComponent({
       } else {
         rightDate.value = rightDate.value.add(1, 'year')
       }
+      handlePanelChange('year')
     }
 
     const rightNextMonth = () => {
@@ -397,22 +400,35 @@ export default defineComponent({
       } else {
         rightDate.value = rightDate.value.add(1, 'month')
       }
+      handlePanelChange('month')
     }
 
     const leftNextYear = () => {
       leftDate.value = leftDate.value.add(1, 'year')
+      handlePanelChange('year')
     }
 
     const leftNextMonth = () => {
       leftDate.value = leftDate.value.add(1, 'month')
+      handlePanelChange('month')
     }
 
     const rightPrevYear = () => {
       rightDate.value = rightDate.value.subtract(1, 'year')
+      handlePanelChange('year')
     }
 
     const rightPrevMonth = () => {
       rightDate.value = rightDate.value.subtract(1, 'month')
+      handlePanelChange('month')
+    }
+
+    const handlePanelChange = (mode: 'month' | 'year') => {
+      ctx.emit(
+        'panel-change',
+        [leftDate.value.toDate(), rightDate.value.toDate()],
+        mode
+      )
     }
 
     const enableMonthArrow = computed(() => {

packages/components/time-picker/src/common/picker.vue

@@ -137,6 +137,7 @@
         @select-range="setSelectionRange"
         @set-picker-option="onSetPickerOption"
         @calendar-change="onCalendarChange"
+        @panel-change="onPanelChange"
         @mousedown.stop
       ></slot>
     </template>
@@ -236,7 +237,14 @@ export default defineComponent({
     ElIcon,
   },
   props: timePickerDefaultProps,
-  emits: ['update:modelValue', 'change', 'focus', 'blur', 'calendar-change'],
+  emits: [
+    'update:modelValue',
+    'change',
+    'focus',
+    'blur',
+    'calendar-change',
+    'panel-change',
+  ],
   setup(props, ctx) {
     const { lang } = useLocale()
 
@@ -619,6 +627,10 @@ export default defineComponent({
       ctx.emit('calendar-change', e)
     }
 
+    const onPanelChange = (value, mode, view) => {
+      ctx.emit('panel-change', value, mode, view)
+    }
+
     provide('EP_PICKER_BASE', {
       props,
     })
@@ -657,6 +669,7 @@ export default defineComponent({
       pickerDisabled,
       onSetPickerOption,
       onCalendarChange,
+      onPanelChange,
       focus,
     }
   },