feat: add type year and month

README.md

@@ -68,7 +68,7 @@ export default {
 
 | Prop                | Type          | Default     | Description                                         |
 |---------------------|---------------|-------------|-----------------------------------------------------|
-| type                | String        | 'date'      | select datepicker or datetimepicker(date/datetime)  |
+| type                | String        | 'date'      | select date type (date/datetime/year/month)         |
 | range               | Boolean       | false       | if true, the type is daterange or datetimerange     |
 | format              | String        | YYYY-MM-DD  | The parsing tokens are similar to the moment.js     |
 | lang                | String/Object | zh          | Translation (en/zh/es/pt-br/fr/ru/de/it/cs)(custom) |

README.zh-CN.md

@@ -68,7 +68,7 @@ export default {
 
 | Prop                | Type          | Default     | Description                                         
 |---------------------|---------------|-------------|-----------------------------------------------------
-| type                | String        | 'date'      | 选择日期或日期时间(可选：date,datetime)                 
+| type                | String        | 'date'      | 选择日期或日期时间(可选：date,datetime,year,month)      
 | range               | Boolean       | false       | 如果是true， 显示日历范围选择     
 | format              | String        | YYYY-MM-DD  | 格式化显示日期 api类似moment.js     
 | lang                | String/Object | zh          | 选择语言或自定义 (en/zh/es/pt-br/fr/ru/de/it/cs)(custom) 

demo/index.js

@@ -15,7 +15,9 @@ new Vue({  // eslint-disable-line
       value6: '',
       value7: '',
       value8: '',
-      value9: ''
+      value9: '',
+      value10: new Date(),
+      value11: new Date()
     }
   },
   methods: {
@@ -44,7 +46,9 @@ new Vue({  // eslint-disable-line
   render (h) {
     const example1 = {
       'base': '<date-picker v-model="value1" lang="en" :not-before="new Date()"></date-picker>',
-      'range': '<date-picker v-model="value2" range ></date-picker>'
+      'range': '<date-picker v-model="value2" range ></date-picker>',
+      'month': '<date-picker v-model="value10" lang="en" type="month" format="YYYY-MM"></date-picker>',
+      'year': '<date-picker v-model="value11" lang="en" type="year" format="YYYY"></date-picker>'
     }
     const example2 = {
       'datetime': `

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.showPanelYear()
-        this.showPanelDate()
-      } else {
-        this.showPanelYear()
-      }
     },
     handleBtnMonth () {
-      if (this.panel === 'MONTH') {
+      this.showPanelMonth()
-        this.showPanelDate()
-      } else {
-        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>

test/index.spec.js

@@ -409,6 +409,36 @@ describe('calendar-panel', () => {
       done()
     }, 0)
   })
+
+  it('prop: type year', () => {
+    wrapper = mount(CalendarPanel, {
+      propsData: {
+        type: 'year',
+        value: new Date(2018, 1, 1)
+      }
+    })
+    const td = wrapper.find('.mx-panel-year .cell:nth-child(1)')
+    td.trigger('click')
+    const expectDate = new Date(2010, 1, 1)
+    expect(wrapper.emitted()).toEqual({
+      'select-date': [[expectDate]]
+    })
+  })
+
+  it('prop: type month', () => {
+    wrapper = mount(CalendarPanel, {
+      propsData: {
+        type: 'month',
+        value: new Date(2018, 1, 1)
+      }
+    })
+    const td = wrapper.find('.mx-panel-month .cell:nth-child(1)')
+    td.trigger('click')
+    const expectDate = new Date(2018, 0, 1)
+    expect(wrapper.emitted()).toEqual({
+      'select-date': [[expectDate]]
+    })
+  })
 })
 
 describe('date-panel', () => {