diff --git a/README.md b/README.md index 1e15800e..296aa7a2 100644 --- a/README.md +++ b/README.md @@ -277,6 +277,7 @@ set fixed time list to select; | input-error | When user type a invalid Date | the input text | | focus | When input focus | | | blur | When input blur | | +| pick | when select date [#429](issues/429) | date | ### Slots diff --git a/README.zh-CN.md b/README.zh-CN.md index bbd31417..471ebd9d 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -263,17 +263,18 @@ data() { ### 事件 -| 名称 | 描述 | 回调函数的参数 | -| ----------- | -------------------- | -------------------------------------------- | -| input | 当选择日期的事件触发 | date | -| change | 当选择日期的事件触发 | date, type(date, hour, minute, second, ampm) | -| open | 当弹出层打开时候 | | -| close | 当弹出层关闭时候 | | -| confirm | 当点击确认按钮 | date | -| clear | 当点击清除按钮 | | -| input-error | 当输入一个无效的时间 | 输入的值 | -| focus | 当输入框有焦点 | | -| blur | 当输入框失焦 | | +| 名称 | 描述 | 回调函数的参数 | +| ----------- | ------------------------------- | -------------------------------------------- | +| input | 当选择日期的事件触发 | date | +| change | 当选择日期的事件触发 | date, type(date, hour, minute, second, ampm) | +| open | 当弹出层打开时候 | | +| close | 当弹出层关闭时候 | | +| confirm | 当点击确认按钮 | date | +| clear | 当点击清除按钮 | | +| input-error | 当输入一个无效的时间 | 输入的值 | +| focus | 当输入框有焦点 | | +| blur | 当输入框失焦 | | +| pick | 当点击日期时 [#429](issues/429) | date | ### Slots diff --git a/__test__/date-picker.test.js b/__test__/date-picker.test.js index d10cb37e..f3620541 100644 --- a/__test__/date-picker.test.js +++ b/__test__/date-picker.test.js @@ -352,4 +352,17 @@ describe('DatePicker', () => { expect(v.element.type).toBe('button'); }); }); + + it('should emit pick event on first click', () => { + wrapper = mount(DatePicker, { + range: true, + propsData: { + open: true, + defaultValue: new Date(2019, 9, 1), + }, + }); + const td = wrapper.find('.mx-table-date td'); + td.trigger('click'); + expect(wrapper.emitted().pick[0][0]).toEqual(new Date(2019, 8, 29)); + }); }); diff --git a/src/calendar/calendar-panel.vue b/src/calendar/calendar-panel.vue index dd198d76..de1f527f 100644 --- a/src/calendar/calendar-panel.vue +++ b/src/calendar/calendar-panel.vue @@ -114,6 +114,7 @@ import TableDate from './table-date'; import TableMonth from './table-month'; import TableYear from './table-year'; import { getLocaleFieldValue } from '../locale'; +import emitter from '../mixin/emitter'; export default { name: 'CalendarPanel', @@ -122,6 +123,7 @@ export default { TableMonth, TableYear, }, + mixins: [emitter], inject: { t: { default: () => getLocaleFieldValue, @@ -248,6 +250,8 @@ export default { emitDate(date, type) { if (!this.isDisabled(date)) { this.$emit('select', date, type); + // someone need get the first selected date to set range value. (#429) + this.dispatch('DatePicker', 'pick', date, type); } }, updateCalendar(date) { diff --git a/src/mixin/emitter.js b/src/mixin/emitter.js new file mode 100644 index 00000000..08f76f4e --- /dev/null +++ b/src/mixin/emitter.js @@ -0,0 +1,19 @@ +export default { + methods: { + dispatch(componentName, ...params) { + let parent = this.$parent || this.$root; + let { name } = parent.$options; + + while (parent && (!name || name !== componentName)) { + parent = parent.$parent; + + if (parent) { + name = parent.$options.name; + } + } + if (parent) { + parent.$emit(...params); + } + }, + }, +};