feat: add 'calendar-change' event to date-range datetime-range picker (#2964)

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

@@ -536,10 +536,20 @@ describe('DatePicker dates', () => {
 describe('DateRangePicker', () => {
 
   it('create', async () => {
+    let calendarChangeValue = null
+    const changeHandler = jest.fn()
     const wrapper = _mount(`<el-date-picker
     type='daterange'
     v-model="value"
-  />`, () => ({ value: '' }))
+    @CalendarChange="onCalendarChange"
+  />`, () => ({ value: '' }), {
+      methods: {
+        onCalendarChange (e) {
+          calendarChangeValue = e
+          changeHandler(e)
+        },
+      },
+    })
     const inputs = wrapper.findAll('input')
     inputs[0].trigger('blur')
     inputs[0].trigger('focus')
@@ -567,6 +577,11 @@ describe('DateRangePicker', () => {
     // input text is something like date string
     expect(inputs[0].element.value.length).toBe(10)
     expect(inputs[1].element.value.length).toBe(10)
+    // calendar-change event
+    expect(changeHandler).toHaveBeenCalledTimes(2)
+    expect(calendarChangeValue.length).toBe(2)
+    expect(calendarChangeValue[0]).toBeInstanceOf(Date)
+    expect(calendarChangeValue[1]).toBeInstanceOf(Date)
   })
 
   it('reverse selection', async () => {

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

@@ -233,7 +233,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['pick', 'set-picker-option'],
+  emits: ['pick', 'set-picker-option', 'calendar-change'],
 
   setup(props, ctx) {
     const { t, lang } = useLocaleInject()
@@ -411,12 +411,15 @@ export default defineComponent({
     }
 
     const handleRangePick = (val, close = true) => {
-      const minDate_ = formatEmit(val.minDate, 0)
-      const maxDate_ = formatEmit(val.maxDate, 1)
+      const min_ = val.minDate
+      const max_ = val.maxDate
+      const minDate_ = formatEmit(min_, 0)
+      const maxDate_ = formatEmit(max_, 1)
 
       if (maxDate.value === maxDate_ && minDate.value === minDate_) {
         return
       }
+      ctx.emit('calendar-change', [min_.toDate(), max_ && max_.toDate()])
       maxDate.value = maxDate_
       minDate.value = minDate_
 

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

@@ -116,6 +116,7 @@
         @pick="onPick"
         @select-range="setSelectionRange"
         @set-picker-option="onSetPickerOption"
+        @calendar-change="onCalendarChange"
         @mousedown.stop
       ></slot>
     </template>
@@ -202,7 +203,7 @@ export default defineComponent({
   },
   directives: { clickoutside: ClickOutside },
   props: defaultProps,
-  emits: ['update:modelValue', 'change', 'focus', 'blur'],
+  emits: ['update:modelValue', 'change', 'focus', 'blur', 'calendar-change'],
   setup(props, ctx) {
     const ELEMENT = useGlobalConfig()
     const { lang } = useLocaleInject()
@@ -528,6 +529,10 @@ export default defineComponent({
       pickerOptions.value.panelReady = true
     }
 
+    const onCalendarChange = e => {
+      ctx.emit('calendar-change', e)
+    }
+
     provide('EP_PICKER_BASE', {
       props,
     })
@@ -563,6 +568,7 @@ export default defineComponent({
       refPopper,
       pickerDisabled,
       onSetPickerOption,
+      onCalendarChange,
     }
   },
 })

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

@@ -663,6 +663,7 @@ Note, date time locale (month name, first day of the week ...) are also configed
 | change | triggers when user confirms the value | component's binding value |
 | 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] |
 
 ### Methods
 | Method | Description | Parameters |

website/docs/en-US/datetime-picker.md

@@ -338,6 +338,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
 | change | triggers when user confirms the value | component's binding value |
 | 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 `datetimerange` | [Date, Date] |
 
 ### Methods
 | Method | Description | Parameters |

website/docs/es/date-picker.md

@@ -665,6 +665,7 @@ Note, date time locale (month name, first day of the week ...) are also configed
 | change | se dispara cuando el usuario confirma el valor | valor enlazado al componente |
 | blur   | se dispara cuando el input pierde el foco | instancia del componente     |
 | focus  | se dispara cuando el input obtiene el foco | instancia del componente     |
+| calendar-change | se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` | [Date, Date] |
 
 ### Metodos
 | Metodo | Descripción                | Parameteros |

website/docs/es/datetime-picker.md

@@ -340,6 +340,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más a
 | change           | Se dispara cuando el usuario confirma el valor | valor enlazado del componente |
 | blur             | Se dispara cuando el input pierde el foco | instancia del componente      |
 | focus            | Se dispara cuando el input obtiene el foco | instancia del componente      |
+| calendar-change | se dispara cuando se cambia la fecha seleccionada. Solamente para `datetimerange` | [Date, Date] |
 
 ### Métodos
 | Método | Descripción      | Parámetros |

website/docs/fr-FR/date-picker.md

@@ -669,6 +669,7 @@ Note, date time locale (month name, first day of the week ...) are also configed
 | change | Se déclenche quand l'utilisateur confirme la valeur | component's binding value |
 | blur | Se déclenche quand le champ perds le focus. | component instance |
 | focus | Se déclenche quand le champ a le focus. | component instance |
+| calendar-change | Se déclenchant quand la date sélectionnée change. Uniquement pour `daterange` | [Date, Date] |
 
 ### Méthodes
 | Méthode | Description | Paramètres |

website/docs/fr-FR/datetime-picker.md

@@ -338,6 +338,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
 | change | Se déclenche quand l'utilisateur confirme la valeur | component's binding value |
 | blur | Se déclenche quand le champ perds le focus. | component instance |
 | focus | Se déclenche quand le champ a le focus. | component instance |
+| calendar-change | Se déclenchant quand la date sélectionnée change. Uniquement pour `datetimerange` | [Date, Date] |
 
 ### Méthodes
 | Méthode | Description | Paramètres |

website/docs/jp/date-picker.md

@@ -660,6 +660,7 @@ Note, date time locale (month name, first day of the week ...) are also configed
 | change | ユーザーが値を確認したときにトリガされます。 | component's binding value |
 | blur | インプットがぼやけたときされます | component instance |
 | focus | 入力がフォーカスされているときにトリガされます。 | component instance |
+| calendar-change | triggers when the calendar selected date is changed. Only for `daterange` | [Date, Date] |
 
 ### 方法
 | Method | Description | Parameters |

website/docs/jp/datetime-picker.md

@@ -339,6 +339,7 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。属性
 | change | triggers when user confirms the value | component's binding value |
 | 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 `datetimerange` | [Date, Date] |
 
 ### メソッド
 | Method | Description | Parameters |

website/docs/zh-CN/date-picker.md

@@ -656,6 +656,7 @@ import { defineComponent, ref } from 'vue';
 | change | 用户确认选定的值时触发 | 组件绑定值 |
 | blur | 当 input 失去焦点时触发 | 组件实例 |
 | focus | 当 input 获得焦点时触发 | 组件实例 |
+| calendar-change | 选中日历日期后会执行的回调，只有当 `daterange` 才生效 | [Date, Date] |
 
 ### Methods
 | 方法名 | 说明 | 参数 |

website/docs/zh-CN/datetime-picker.md

@@ -336,6 +336,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，相关属性可以参照 D
 | change | 用户确认选定的值时触发 | 组件绑定值 |
 | blur | 当 input 失去焦点时触发 | 组件实例 |
 | focus | 当 input 获得焦点时触发 | 组件实例 |
+| calendar-change | 选中日历日期后会执行的回调，只有当 `datetimerange` 才生效 | [Date, Date] |
 
 ### Methods
 | 方法名 | 说明 | 参数 |