feat: add prop default-value for calendar default date (#94)

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`| '' |

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`| '' |

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

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)