fix(components): [date-picker] month range should emit `calendar-chan…

…ge` (#14262)
element-plus · Sep 13, 2023 · 6e24736 · 6e24736
1 parent d791229
commit 6e24736
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/docs/en-US/component/date-picker.md b/docs/en-US/component/date-picker.md
@@ -177,14 +177,14 @@ Note, date time locale (month name, first day of the week ...) are also configur
 
 ## Events
 
-| Name            | Description                                                               | Parameters                    |
-| --------------- | ------------------------------------------------------------------------- | ----------------------------- |
-| change          | triggers when user confirms the value                                     | `(val: typeof v-model)`       |
-| blur            | triggers when Input blurs                                                 | `(e: FocusEvent)`             |
-| focus           | triggers when Input focuses                                               | `(e: FocusEvent)`             |
-| calendar-change | triggers when the calendar selected date is changed. Only for `daterange` | `(val: [Date, null \| Date])` |
-| panel-change    | triggers when the navigation button click.                                | `(date, mode, view)`          |
-| visible-change  | triggers when the DatePicker's dropdown appears/disappears                | `(visibility: boolean)`       |
+| Name            | Description                                                | Parameters                    |
+| --------------- | ---------------------------------------------------------- | ----------------------------- |
+| change          | triggers when user confirms the value                      | `(val: typeof v-model)`       |
+| blur            | triggers when Input blurs                                  | `(e: FocusEvent)`             |
+| focus           | triggers when Input focuses                                | `(e: FocusEvent)`             |
+| calendar-change | triggers when the calendar selected date is changed.       | `(val: [Date, null \| Date])` |
+| panel-change    | triggers when the navigation button click.                 | `(date, mode, view)`          |
+| visible-change  | triggers when the DatePicker's dropdown appears/disappears | `(visibility: boolean)`       |
 
 ## Methods
 

diff --git a/packages/components/date-picker/src/date-picker-com/panel-month-range.vue b/packages/components/date-picker/src/date-picker-com/panel-month-range.vue
@@ -184,6 +184,7 @@ const handleRangePick = (val: RangePickValue, close = true) => {
   if (maxDate.value === maxDate_ && minDate.value === minDate_) {
     return
   }
+  emit('calendar-change', [minDate_.toDate(), maxDate_ && maxDate_.toDate()])
   maxDate.value = maxDate_
   minDate.value = minDate_
 

diff --git a/packages/components/date-picker/src/props/panel-month-range.ts b/packages/components/date-picker/src/props/panel-month-range.ts
@@ -7,6 +7,10 @@ export const panelMonthRangeProps = buildProps({
   ...panelRangeSharedProps,
 } as const)
 
-export const panelMonthRangeEmits = ['pick', 'set-picker-option']
+export const panelMonthRangeEmits = [
+  'pick',
+  'set-picker-option',
+  'calendar-change',
+]
 
 export type PanelMonthRangeProps = ExtractPropTypes<typeof panelMonthRangeProps>