From 264a5255eb7bae353d12a00caa5d70547ec6adbe Mon Sep 17 00:00:00 2001 From: iamkun Date: Wed, 18 Aug 2021 08:49:19 +0800 Subject: [PATCH] feat: add 'calendar-change' event to date-range datetime-range picker (#2964) --- .../date-picker/__tests__/date-picker.spec.ts | 17 ++++++++++++++++- .../src/date-picker-com/panel-date-range.vue | 9 ++++++--- packages/time-picker/src/common/picker.vue | 8 +++++++- website/docs/en-US/date-picker.md | 1 + website/docs/en-US/datetime-picker.md | 1 + website/docs/es/date-picker.md | 1 + website/docs/es/datetime-picker.md | 1 + website/docs/fr-FR/date-picker.md | 1 + website/docs/fr-FR/datetime-picker.md | 1 + website/docs/jp/date-picker.md | 1 + website/docs/jp/datetime-picker.md | 1 + website/docs/zh-CN/date-picker.md | 1 + website/docs/zh-CN/datetime-picker.md | 1 + 13 files changed, 39 insertions(+), 5 deletions(-) diff --git a/packages/date-picker/__tests__/date-picker.spec.ts b/packages/date-picker/__tests__/date-picker.spec.ts index 9288abd4b3..286c04be23 100644 --- a/packages/date-picker/__tests__/date-picker.spec.ts +++ b/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(``, () => ({ 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 () => { diff --git a/packages/date-picker/src/date-picker-com/panel-date-range.vue b/packages/date-picker/src/date-picker-com/panel-date-range.vue index 361ce11046..1ba52c363b 100644 --- a/packages/date-picker/src/date-picker-com/panel-date-range.vue +++ b/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_ diff --git a/packages/time-picker/src/common/picker.vue b/packages/time-picker/src/common/picker.vue index eade1ed8a9..ac49d6b2d3 100644 --- a/packages/time-picker/src/common/picker.vue +++ b/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 > @@ -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, } }, }) diff --git a/website/docs/en-US/date-picker.md b/website/docs/en-US/date-picker.md index 071fb728be..c03fa544a5 100644 --- a/website/docs/en-US/date-picker.md +++ b/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 | diff --git a/website/docs/en-US/datetime-picker.md b/website/docs/en-US/datetime-picker.md index 1de85d9286..9acc09019a 100644 --- a/website/docs/en-US/datetime-picker.md +++ b/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 | diff --git a/website/docs/es/date-picker.md b/website/docs/es/date-picker.md index 84f74aa3a0..aa2cfc07db 100644 --- a/website/docs/es/date-picker.md +++ b/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 | diff --git a/website/docs/es/datetime-picker.md b/website/docs/es/datetime-picker.md index 7da8f3ac39..5371aa69c3 100644 --- a/website/docs/es/datetime-picker.md +++ b/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 | diff --git a/website/docs/fr-FR/date-picker.md b/website/docs/fr-FR/date-picker.md index f2fe12d274..ea25e34dcd 100644 --- a/website/docs/fr-FR/date-picker.md +++ b/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 | diff --git a/website/docs/fr-FR/datetime-picker.md b/website/docs/fr-FR/datetime-picker.md index 6d8d4982cf..e234856bfb 100644 --- a/website/docs/fr-FR/datetime-picker.md +++ b/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 | diff --git a/website/docs/jp/date-picker.md b/website/docs/jp/date-picker.md index 496d7e48ac..9d57531e15 100644 --- a/website/docs/jp/date-picker.md +++ b/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 | diff --git a/website/docs/jp/datetime-picker.md b/website/docs/jp/datetime-picker.md index a551450ec7..6403929b4a 100644 --- a/website/docs/jp/datetime-picker.md +++ b/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 | diff --git a/website/docs/zh-CN/date-picker.md b/website/docs/zh-CN/date-picker.md index 72ee66cc88..38b5d107e1 100644 --- a/website/docs/zh-CN/date-picker.md +++ b/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 | 方法名 | 说明 | 参数 | diff --git a/website/docs/zh-CN/datetime-picker.md b/website/docs/zh-CN/datetime-picker.md index fbd6ed738f..0ae8ca1d0f 100644 --- a/website/docs/zh-CN/datetime-picker.md +++ b/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 | 方法名 | 说明 | 参数 |