diff --git a/README.md b/README.md index ef7f042..9c15d19 100644 --- a/README.md +++ b/README.md @@ -124,6 +124,7 @@ You can also override some of the default locale by `lang`. | clearable | if false, don't show the clear icon | `boolean` | true | | confirm | if true, need click the button to change value | `boolean` | false | | confirm-text | the text of confirm button | `string` | 'OK' | +| multiple | if true, multi-select date | `boolean` | false | | disabled | disable the component | `boolean` | false | | disabled-date | specify the date that cannot be selected | `(date) => boolean` | - | | disabled-time | specify the time that cannot be selected | `(date) => boolean` | - | @@ -132,6 +133,7 @@ You can also override some of the default locale by `lang`. | input-class | input classname | `string` | 'mx-input' | | input-attr | input attrs(eg: { name: 'date', id: 'foo'}) | `object` | — | | open | open state of picker | `boolean` | - | +| default-panel | default panel of the picker | year\|month | - | | popup-style | popup style | `object` | — | | popup-class | popup classes | | — | | shortcuts | set shortcuts to select | `Array<{text, onClick}>` | - | diff --git a/README.zh-CN.md b/README.zh-CN.md index 42bd3d1..feef4f0 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -122,6 +122,7 @@ import 'vue2-datepicker/locale/zh-cn'; | clearable | 是否显示清除按钮 | `boolean` | true | | confirm | 是否需要确认 | `boolean` | false | | confirm-text | 确认按钮的文字 | `string` | 'OK' | +| multiple | 如果是 true, 可以选择多个日期 | `boolean` | false | | disabled | 禁用组件 | `boolean` | false | | disabled-date | 禁止选择的日期 | `(date) => boolean` | - | | disabled-time | 禁止选择的时间 | `(date) => boolean` | - | @@ -130,6 +131,7 @@ import 'vue2-datepicker/locale/zh-cn'; | input-class | 输入框的类 | `string` | 'mx-input' | | input-attr | 输入框的其他属性(eg: { name: 'date', id: 'foo'}) | `object` | — | | open | 控制弹出层的显示 | `boolean` | - | +| default-panel | 控制打开的面板 | year\|month | - | | popup-style | 弹出层的样式 | `object` | — | | popup-class | 弹出层的类 | | — | | shortcuts | 设置快捷选择 | `Array<{text, onClick}>` | - | diff --git a/__test__/date-picker.test.js b/__test__/date-picker.test.js index 0f209f6..945d462 100644 --- a/__test__/date-picker.test.js +++ b/__test__/date-picker.test.js @@ -387,4 +387,35 @@ describe('DatePicker', () => { input.trigger('change'); expect(wrapper.emitted().input).toEqual([[[text, text]], [[text, text]], [[text, text]]]); }); + + it('prop: multiple', () => { + const value = [new Date(2020, 5, 6), new Date(2020, 6, 7)]; + wrapper = mount(DatePicker, { + propsData: { + multiple: true, + open: true, + value, + }, + }); + wrapper.find('.mx-date-row .active').trigger('click'); + expect(wrapper.emitted().input[0][0]).toEqual(value.slice(0, 1)); + wrapper.find('[title="2020-07-15"]').trigger('click'); + expect(wrapper.emitted().input[1][0]).toEqual(value.concat(new Date(2020, 6, 15))); + }); + + it('prop: invalid multiple', () => { + wrapper = shallowMount(DatePicker, { + propsData: { + multiple: true, + range: true, + }, + }); + const { vm } = wrapper; + expect(vm.validMultipleType).toBe(false); + wrapper.setProps({ + range: false, + type: 'datetime', + }); + expect(vm.validMultipleType).toBe(false); + }); }); diff --git a/example/demo/DisabledDateTime.vue b/example/demo/DisabledDateTime.vue index 30e9134..a7262e2 100644 --- a/example/demo/DisabledDateTime.vue +++ b/example/demo/DisabledDateTime.vue @@ -38,10 +38,8 @@ export default { data() { return { value1: new Date(), - value2: new Date(), value3: '', value4: '', - value5: '', }; }, methods: { diff --git a/src/calendar/calendar-panel.vue b/src/calendar/calendar-panel.vue index ae03d93..7752245 100644 --- a/src/calendar/calendar-panel.vue +++ b/src/calendar/calendar-panel.vue @@ -240,7 +240,8 @@ export default { initCalendar() { let calendarDate = this.calendar; if (!isValidDate(calendarDate)) { - calendarDate = getValidDate(this.innerValue[0], this.defaultValue); + const { length } = this.innerValue; + calendarDate = getValidDate(length > 0 ? this.innerValue[length - 1] : this.defaultValue); } this.innerCalendar = calendarDate; }, @@ -249,7 +250,7 @@ export default { }, emitDate(date, type) { if (!this.isDisabled(date)) { - this.$emit('select', date, type); + this.$emit('select', date, type, this.innerValue); // someone need get the first selected date to set range value. (#429) this.dispatch('DatePicker', 'pick', date, type); } @@ -287,7 +288,7 @@ export default { const nextCalendar = setYear(this.innerCalendar, year); this.updateCalendar(nextCalendar, 'year'); this.handelPanelChange('month'); - if (this.partialUpdate && this.innerValue[0]) { + if (this.partialUpdate && this.innerValue.length === 1) { const date = setYear(this.innerValue[0], year); this.emitDate(date, 'year'); } @@ -301,7 +302,7 @@ export default { const nextCalendar = setMonth(this.innerCalendar, month); this.updateCalendar(nextCalendar, 'month'); this.handelPanelChange('date'); - if (this.partialUpdate && this.innerValue[0]) { + if (this.partialUpdate && this.innerValue.length === 1) { const date = setMonth(setYear(this.innerValue[0], this.calendarYear), month); this.emitDate(date, 'month'); } diff --git a/src/date-picker.vue b/src/date-picker.vue index 5eccc16..c411eae 100644 --- a/src/date-picker.vue +++ b/src/date-picker.vue @@ -90,7 +90,7 @@