feat: add pick event when date clicked (#429)

Author: mengxiong10

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
 

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
 

__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));
+  });
 });

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) {

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);
+      }
+    },
+  },
+};