feat: add type year and month

src/calendar.vue

@@ -18,13 +18,16 @@
         class="mx-icon-next-month"
         @click="handleIconMonth(1)">&rsaquo;</a>
       <a
-        v-show="panel !== 'TIME'"
+        v-show="panel === 'DATE'"
         class="mx-current-month"
         @click="handleBtnMonth">{{months[calendarMonth]}}</a>
       <a
-        v-show="panel !== 'TIME'"
+        v-show="panel === 'DATE' || panel === 'MONTH'"
         class="mx-current-year"
         @click="handleBtnYear">{{calendarYear}}</a>
+      <a
+        v-show="panel === 'YEAR'"
+        class="mx-current-year">{{yearHeader}}</a>
       <a
         v-show="panel === 'TIME'"
         class="mx-time-header"
@@ -44,11 +47,13 @@
       <panel-year
         v-show="panel === 'YEAR'"
         :value="value"
+        :disabled-year="isDisabledYear"
         :first-year="firstYear"
         @select="selectYear" />
       <panel-month
         v-show="panel === 'MONTH'"
         :value="value"
+        :disabled-month="isDisabledMonth"
         :calendar-year="calendarYear"
         @select="selectMonth" />
       <panel-time
@@ -92,7 +97,7 @@ export default {
     // below user set
     type: {
       type: String,
-      default: 'date' // ['date', 'datetime']
+      default: 'date' // ['date', 'datetime'] zendy added 'month', 'year'
     },
     firstDayOfWeek: {
       default: 7,
@@ -156,6 +161,9 @@ export default {
     timeHeader () {
       return this.value && new Date(this.value).toLocaleDateString()
     },
+    yearHeader () {
+      return this.firstYear + ' ~ ' + (this.firstYear + 10)
+    },
     months () {
       return this.t('months')
     }
@@ -187,7 +195,13 @@ export default {
       }
     },
     init () {
-      this.panel = 'DATE'
+      if (this.type.toLowerCase() === 'month') {
+        this.panel = 'MONTH'
+      } else if (this.type.toLowerCase() === 'year') {
+        this.panel = 'YEAR'
+      } else {
+        this.panel = 'DATE'
+      }
       this.updateNow(this.value)
     },
     // 根据value更新日历
@@ -218,9 +232,16 @@ export default {
       } else if (typeof this.disabledDays === 'function') {
         disabledDays = this.disabledDays(new Date(date))
       }
-
       return notBefore || notAfter || disabledDays || startAt || endAt
     },
+    isDisabledYear (year) {
+      const date = new Date(year, this.calendarMonth)
+      return this.isDisabledDate(date)
+    },
+    isDisabledMonth (month) {
+      const date = new Date(this.calendarYear, month)
+      return this.isDisabledDate(date)
+    },
     selectDate (date) {
       if (this.type === 'datetime') {
         let time = new Date(date)
@@ -248,10 +269,16 @@ export default {
     },
     selectYear (year) {
       this.changeCalendarYear(year)
+      if (this.type.toLowerCase() === 'year') {
+        return this.selectDate(new Date(this.now))
+      }
       this.showPanelMonth()
     },
     selectMonth (month) {
       this.changeCalendarMonth(month)
+      if (this.type.toLowerCase() === 'month') {
+        return this.selectDate(new Date(this.now))
+      }
       this.showPanelDate()
     },
     selectTime (time) {
@@ -274,18 +301,10 @@ export default {
       }
     },
     handleBtnYear () {
-      if (this.panel === 'YEAR') {
-        this.showPanelDate()
-      } else {
-        this.showPanelYear()
-      }
+      this.showPanelYear()
     },
     handleBtnMonth () {
-      if (this.panel === 'MONTH') {
-        this.showPanelDate()
-      } else {
-        this.showPanelMonth()
-      }
+      this.showPanelMonth()
     },
     changePanelYears (flag) {
       this.firstYear = this.firstYear + flag * 10

src/panel/month.js

@@ -7,10 +7,20 @@ export default {
     value: null,
     calendarYear: {
       default: new Date().getFullYear()
-    }
+    },
+    disabledMonth: Function
   },
   methods: {
+    isDisabled (month) {
+      if (typeof this.disabledMonth === 'function' && this.disabledMonth(month)) {
+        return true
+      }
+      return false
+    },
     selectMonth (month) {
+      if (this.isDisabled(month)) {
+        return
+      }
       this.$emit('select', month)
     }
   },
@@ -22,7 +32,8 @@ export default {
       return <span
         class={{
           'cell': true,
-          'actived': currentYear === this.calendarYear && currentMonth === i
+          'actived': currentYear === this.calendarYear && currentMonth === i,
+          'disabled': this.isDisabled(i)
         }}
         onClick={this.selectMonth.bind(this, i)}>
         {v}

src/panel/year.js

@@ -2,10 +2,20 @@ export default {
   name: 'panelYear',
   props: {
     value: null,
-    firstYear: Number
+    firstYear: Number,
+    disabledYear: Function
   },
   methods: {
+    isDisabled (year) {
+      if (typeof this.disabledYear === 'function' && this.disabledYear(year)) {
+        return true
+      }
+      return false
+    },
     selectYear (year) {
+      if (this.isDisabled(year)) {
+        return
+      }
       this.$emit('select', year)
     }
   },
@@ -18,7 +28,8 @@ export default {
       return <span
         class={{
           'cell': true,
-          'actived': currentYear === year
+          'actived': currentYear === year,
+          'disabled': this.isDisabled(year)
         }}
         onClick={this.selectYear.bind(this, year)}
       >{year}</span>