fix(datepicker): fix keydown event for datepicker

add monthrange and fix keydown for datepicker type date, month

Author: AngusFu

src/components/calendar/index.css

@@ -164,7 +164,7 @@
 }
 
 .c-calendar__body .c-calendar__month-table td {
-  padding: 1.2em 1.6em;
+  padding: 1em;
 }
 
 .c-calendar__body table thead th,

src/components/calendar/index.vue

@@ -144,6 +144,10 @@ export default {
       if (new Date(date) > new Date(this.maxDate)) date = this.maxDate
       if (new Date(date) < new Date(this.minDate)) date = this.minDate
       this.$emit('update', new Date(date).format(this.format), true)
+    },
+    updateMonthBykeydown (num, type) {
+      const [year, month] = this.updateMonth(this.year, this.month, num, type)
+      this.$emit('update', new Date(year, month).format(this.format), true)
     }
   }
 }

src/components/datepicker/daterange.vue

@@ -9,7 +9,7 @@
         :maxDate="startMaxDate"
         :year="startYear"
         :month="startMonth"
-        :monthshow="startMonthsShow"
+        :monthsShow="startMonthsShow"
         @monthchange="startMonthChange"
         @yearchange="startYearChange"
         @monthshow="startMonthTableShow"
@@ -20,6 +20,7 @@
           :minDate="minDate"
           :maxDate="startMaxDate"
           :year="startYear"
+          :month="startMonth"
           @change="startSelectMonth"
           )
         c-datetable(
@@ -44,7 +45,7 @@
         :maxDate="maxDate"
         :year="endYear"
         :month="endMonth"
-        :monthshow="endMonthsShow"
+        :monthsShow="endMonthsShow"
         @monthchange="endMonthChange"
         @yearchange="endYearChange"
         @monthshow="endMonthTableShow"
@@ -55,6 +56,7 @@
           :minDate="endMinDate"
           :maxDate="maxDate"
           :year="endYear"
+          :month="endMonth"
           @change="endSelectMonth"
           )
         c-datetable(
@@ -98,6 +100,10 @@ export default {
     value: [Array, String],
     size: String,
     show: Boolean,
+    type: {
+      type: String,
+      default: 'date'
+    },
     minDate: {
       type: String,
       default: '1970-01-01'
@@ -107,8 +113,7 @@ export default {
       default: '2099-12-31'
     },
     pattern: {
-      type: String,
-      default: 'yyyy-MM-dd'
+      type: String
     }
   },
   mixins: [Mixin],
@@ -127,14 +132,18 @@ export default {
       rangeObj: {
         endDate: '',
         selecting: true
-      }
+      },
+      format: ''
     }
   },
   created () {
     const [start, end] = this.value
     this.start = start || ''
     this.end = end || ''
+    this.startMonthsShow = this.isMonthRange
+    this.endMonthsShow = this.isMonthRange
     this.updateDate()
+    this.format = this.pattern ? this.pattern : this.isMonthRange ? 'yyyy-MM' : 'yyyy-MM-dd'
   },
   watch: {
     show (newVal) {
@@ -145,14 +154,17 @@ export default {
     }
   },
   computed: {
+    isMonthRange () {
+      return this.type === 'month'
+    },
     className () {
       return this.size ? `is-${this.size}` : 'md'
     },
     startMaxDate () {
-      return new Date(this.endYear, this.endMonth, 0).format(this.pattern)
+      return new Date(this.endYear, this.endMonth, 0).format(this.format)
     },
     endMinDate () {
-      return new Date(this.startYear, this.startMonth + 1, 1).format(this.pattern)
+      return new Date(this.startYear, this.startMonth + 1, 1).format(this.format)
     }
   },
   methods: {
@@ -218,9 +230,13 @@ export default {
       this.startMonthsShow = show
     },
     startSelectMonth (month) {
-      this.startMonthsShow = false
+      this.startMonthsShow = this.isMonthRange
       this.startMonth = month
       this.startDay = ''
+      if (this.isMonthRange) {
+        this.start = new Date(this.startYear, this.startMonth).format(this.format)
+        this.updateDate()
+      }
     },
     selectDay (dateObj) {
       this.start = dateObj.start
@@ -237,9 +253,13 @@ export default {
       this.endMonthsShow = show
     },
     endSelectMonth (month) {
-      this.endMonthsShow = false
+      this.endMonthsShow = this.isMonthRange
       this.endMonth = month
       this.endDay = ''
+      if (this.isMonthRange) {
+        this.end = new Date(this.endYear, this.endMonth).format(this.format)
+        this.updateDate()
+      }
     },
     cancel () {
       [this.start, this.end] = this.value

src/components/datepicker/index.md

@@ -144,6 +144,35 @@ layout: component
 
 ```
 
+## 设置月份的范围
+
+```html
+<template>
+  <c-datepicker
+    v-model="monthrange"
+    :type="'monthrange'"
+    :placeholder="'请选择日期'"
+    size="sm"
+    @change="monthChange"
+  ></c-datepicker>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        monthrange: ['2018-01', '2018-02']
+      }
+    },
+    methods: {
+      monthChange (date) {
+        this.daterange = date
+      }
+    }
+  }
+</script>
+```
+
 ## API
 
 > 注意：当type为daterange时，v-model需要传递起始时间和终止时间的数组

src/components/datepicker/index.vue

@@ -11,7 +11,7 @@
   .c-datepicker__icon(:clas="className")
     c-icon(name="calendar")
   c-input(
-    v-if="type == 'daterange'"
+    v-if="type == 'daterange' || type == 'monthrange'"
     v-model="daterange"
     :placeholder="placeholder"
     :disabled="disabled"
@@ -31,12 +31,13 @@
     @change="dateChange"
     @focusin.native="open"
     @focusout.native="onBlur"
+    @keydown.native="onKeyDown"
   )
 
   .c-datepicker__panel
     c-calendar(
       ref="calendar"
-      v-if="type !== 'daterange'"
+      v-if="type == 'date' || type == 'month'"
       :type="type"
       :pattern="datePattern"
       :value="date"
@@ -55,6 +56,16 @@
         :show="isOpen"
         @change="setDateRange"
       )
+    .c-datepicker__body(
+      v-if="type == 'monthrange'"
+    )
+      c-daterange(
+        :value="date"
+        :size="size"
+        :show="isOpen"
+        type="month"
+        @change="setDateRange"
+      )
 </template>
 
 <script>
@@ -95,7 +106,7 @@ export default {
       return this.size ? `is-size-${this.size}` : ''
     },
     daterange () {
-      if (this.type === 'date') return []
+      if (this.type.indexOf('range') === -1) return []
       const [start, end] = this.date
       return !start && !end ? '' : `${start} 至 ${end}`
     },
@@ -124,11 +135,9 @@ export default {
         this.resize()
         window.addEventListener('mousedown', this.onMouseDown, true)
         window.addEventListener('mouseup', this.onMouseUp, true)
-        window.addEventListener('keydown', this.onKeyDown, false)
       } else {
         window.removeEventListener('mousedown', this.onMouseDown, true)
         window.removeEventListener('mouseup', this.onMouseUp, true)
-        window.removeEventListener('keydown', this.onKeyDown, false)
       }
     },
     value (newVal) {
@@ -187,19 +196,23 @@ export default {
       }
       const { keyCode } = e
       if (keyCode === keys.ESC) this.close()
+      const { calendar } = this.$refs
+      const date = new Date(calendar.year, calendar.month, calendar.day).format(this.datePattern)
       if (keyCode === keys.ENTER && this.type === 'date') {
-        const { calendar } = this.$refs
-        const date = new Date(calendar.year, calendar.month, calendar.day).format(this.datePattern)
         this.setDate(date)
       }
       if (keyCode === keys.UP) {
-        this.$refs.calendar.updateDay(7, 'sub')
+        this.type === 'date' && this.$refs.calendar.updateDay(7, 'sub')
+        this.type === 'month' && this.$refs.calendar.updateMonthBykeydown(3, 'sub')
       } else if (keyCode === keys.DOWN) {
-        this.$refs.calendar.updateDay(7, 'plus')
+        this.type === 'date' && this.$refs.calendar.updateDay(7, 'plus')
+        this.type === 'month' && this.$refs.calendar.updateMonthBykeydown(3, 'plus')
       } else if (keyCode === keys.LEFT) {
-        this.$refs.calendar.updateDay(1, 'sub')
+        this.type === 'date' && this.$refs.calendar.updateDay(1, 'sub')
+        this.type === 'month' && this.$refs.calendar.updateMonthBykeydown(1, 'sub')
       } else if (keyCode === keys.RIGHT) {
-        this.$refs.calendar.updateDay(1, 'plus')
+        this.type === 'date' && this.$refs.calendar.updateDay(1, 'plus')
+        this.type === 'month' && this.$refs.calendar.updateMonthBykeydown(1, 'plus')
       }
     },
     resetDate (e) {