From 4ff6945f0cc900d0c7306a23e0aa6a58ee88e7ea Mon Sep 17 00:00:00 2001 From: mxie <15623530290@163.com> Date: Tue, 12 Feb 2019 13:34:35 +0800 Subject: [PATCH] feat: add prop `default-value` for calendar default date (#94) --- README.md | 1 + README.zh-CN.md | 1 + src/calendar.vue | 21 +++++++++++++++------ test/index.spec.js | 12 ++++++++++++ 4 files changed, 29 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index ffafb70..a27daad 100644 --- a/README.md +++ b/README.md @@ -95,6 +95,7 @@ export default { | placeholder | input placeholder text | `string` | — | | width | input size | `string`\|`number` | 210 | | append-to-body | append the popup to body | `boolean` | false | +| default-value | default date of the calendar | `Date` | new Date() | | popupStyle | popup style(override the top, left style) | `object` | — | | not-before | Disable all dates before new Date(not-before) | `string`\|`Date` | ''| | not-after | Disable all dates after new Date(not-after) | `string`\|`Date`| '' | diff --git a/README.zh-CN.md b/README.zh-CN.md index 1cdf5b0..9949ff6 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -95,6 +95,7 @@ export default { | placeholder | 输入框placeholder | `string` | — | | width | 设置宽度 | `string`\|`number` | 210 | | append-to-body | 弹出层元素插入body下面 | `boolean` | false | +| default-value | 日历的默认值 | `Date` | new Date() | | popupStyle | 弹出层的样式(可以覆盖left,top样式) | `object` | — | | not-before | 禁止选择这个时间之前的时间 | `string`\|`Date` | ''| | not-after | 禁止选择这个时间之前=后的时间 | `string`\|`Date`| '' | diff --git a/src/calendar.vue b/src/calendar.vue index f6988bf..bf8d9b3 100644 --- a/src/calendar.vue +++ b/src/calendar.vue @@ -107,6 +107,11 @@ export default { default: 'YYYY-MM-DD' }, // below user set + defaultValue: { + validator: function (val) { + return isValidDate(val) + } + }, firstDayOfWeek: { default: 7, type: Number, @@ -143,7 +148,7 @@ export default { } }, data () { - const now = new Date() + const now = this.getNow(this.value) const calendarYear = now.getFullYear() const calendarMonth = now.getMonth() const firstYear = Math.floor(calendarYear / 10) * 10 @@ -235,13 +240,17 @@ export default { this.updateNow(this.value) } }, + getNow (value) { + return value ? new Date(value) : ( + (this.defaultValue && isValidDate(this.defaultValue)) ? new Date(this.defaultValue) : new Date() + ) + }, // 根据value更新日历 updateNow (value) { - const now = value ? new Date(value) : new Date() - const oldNow = new Date(this.now) - this.now = now - if (this.visible) { - this.dispatch('DatePicker', 'calendar-change', [now, oldNow]) + const oldNow = this.now + this.now = this.getNow(value) + if (this.visible && this.now !== oldNow) { + this.dispatch('DatePicker', 'calendar-change', [new Date(this.now), new Date(oldNow)]) } }, getCriticalTime (value) { diff --git a/test/index.spec.js b/test/index.spec.js index 74cc511..233a696 100644 --- a/test/index.spec.js +++ b/test/index.spec.js @@ -380,6 +380,18 @@ describe('datepicker', () => { }) describe('calendar-panel', () => { + it('prop: defaultValue', () => { + wrapper = mount(CalendarPanel, { + propsData: { + value: null, + defaultValue: '2018-10-01' + } + }) + const vm = wrapper.vm + expect(vm.calendarYear).toBe(2018) + expect(vm.calendarMonth).toBe(9) + }) + it('click: prev/next month', () => { wrapper = mount(CalendarPanel)