feat: add disabledCalendarChanger (#628)

src/calendar/calendar-panel.js

@@ -33,6 +33,10 @@ export default {
     defaultPanel: {
       type: String,
     },
+    disabledCalendarChanger: {
+      type: Function,
+      default: () => false,
+    },
     disabledDate: {
       type: Function,
       default: () => false,
@@ -185,19 +189,33 @@ export default {
       return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
     },
     getMonthClasses(month) {
-      if (this.type !== 'month') {
-        return this.calendarMonth === month ? 'active' : '';
-      }
       const classes = [];
+      if (this.type !== 'month') {
+        if (this.calendarMonth === month) {
+          classes.push('active');
+        }
+        const cellDate = this.getMonthCellDate(month);
+        if (this.disabledCalendarChanger(cellDate, 'month')) {
+          classes.push('disabled');
+        }
+        return classes;
+      }
       const cellDate = this.getMonthCellDate(month);
       classes.push(this.getStateClass(cellDate));
       return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
     },
     getYearClasses(year) {
-      if (this.type !== 'year') {
-        return this.calendarYear === year ? 'active' : '';
-      }
       const classes = [];
+      if (this.type !== 'year') {
+        if (this.calendarYear === year) {
+          classes.push('active');
+        }
+        const cellDate = this.getYearCellDate(year);
+        if (this.disabledCalendarChanger(cellDate, 'year')) {
+          classes.push('disabled');
+        }
+        return classes;
+      }
       const cellDate = this.getYearCellDate(year);
       classes.push(this.getStateClass(cellDate));
       return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
@@ -227,6 +245,7 @@ export default {
     if (panel === 'year') {
       return (
         <TableYear
+          disabledCalendarChanger={this.disabledCalendarChanger}
           calendar={innerCalendar}
           getCellClasses={this.getYearClasses}
           getYearPanel={this.getYearPanel}
@@ -238,6 +257,7 @@ export default {
     if (panel === 'month') {
       return (
         <TableMonth
+          disabledCalendarChanger={this.disabledCalendarChanger}
           calendar={innerCalendar}
           getCellClasses={this.getMonthClasses}
           onSelect={this.handleSelectMonth}
@@ -248,6 +268,7 @@ export default {
     }
     return (
       <TableDate
+        disabledCalendarChanger={this.disabledCalendarChanger}
         class={{ [`${this.prefixClass}-calendar-week-mode`]: this.type === 'week' }}
         calendar={innerCalendar}
         getCellClasses={this.getDateClasses}

src/calendar/icon-button.vue

@@ -1,7 +1,13 @@
 <template>
   <button
     type="button"
-    :class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-${type}`"
+    :disabled="disabled"
+    :class="[
+      `${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-${type}`,
+      {
+        disabled: disabled,
+      },
+    ]"
     v-on="$listeners"
   >
     <i :class="`${prefixClass}-icon-${type}`"></i>
@@ -12,6 +18,7 @@
 export default {
   props: {
     type: String,
+    disabled: Boolean,
   },
   inject: {
     prefixClass: {

src/calendar/table-date.vue

@@ -1,10 +1,26 @@
 <template>
   <div :class="`${prefixClass}-calendar ${prefixClass}-calendar-panel-date`">
     <div :class="`${prefixClass}-calendar-header`">
-      <icon-button type="double-left" @click="handleIconDoubleLeftClick"></icon-button>
+      <icon-button
-      <icon-button type="left" @click="handleIconLeftClick"></icon-button>
+        type="double-left"
-      <icon-button type="double-right" @click="handleIconDoubleRightClick"></icon-button>
+        :disabled="isDisabledArrows('last-year')"
-      <icon-button type="right" @click="handleIconRightClick"></icon-button>
+        @click="handleIconDoubleLeftClick"
+      ></icon-button>
+      <icon-button
+        type="left"
+        :disabled="isDisabledArrows('last-month')"
+        @click="handleIconLeftClick"
+      ></icon-button>
+      <icon-button
+        type="double-right"
+        :disabled="isDisabledArrows('next-year')"
+        @click="handleIconDoubleRightClick"
+      ></icon-button>
+      <icon-button
+        type="right"
+        :disabled="isDisabledArrows('next-month')"
+        @click="handleIconRightClick"
+      ></icon-button>
       <span :class="`${prefixClass}-calendar-header-label`">
         <button
           v-for="item in yearMonth"
@@ -87,6 +103,10 @@ export default {
     },
   },
   props: {
+    disabledCalendarChanger: {
+      type: Function,
+      default: () => false,
+    },
     calendar: {
       type: Date,
       default: () => new Date(),
@@ -141,6 +161,28 @@ export default {
     },
   },
   methods: {
+    isDisabledArrows(type) {
+      const date = new Date(this.calendar);
+      switch (type) {
+        case 'last-year':
+          date.setFullYear(date.getFullYear() - 1, date.getMonth() + 1, 0);
+          date.setHours(23, 59, 59, 999);
+          break;
+        case 'next-year':
+          date.setFullYear(date.getFullYear() + 1);
+          break;
+        case 'last-month':
+          date.setMonth(date.getMonth(), 0);
+          date.setHours(23, 59, 59, 999);
+          break;
+        case 'next-month':
+          date.setMonth(date.getMonth() + 1);
+          break;
+        default:
+          break;
+      }
+      return this.disabledCalendarChanger(date, type);
+    },
     handleIconLeftClick() {
       this.$emit(
         'changecalendar',

src/calendar/table-month.vue

@@ -1,8 +1,16 @@
 <template>
   <div :class="`${prefixClass}-calendar ${prefixClass}-calendar-panel-month`">
     <div :class="`${prefixClass}-calendar-header`">
-      <icon-button type="double-left" @click="handleIconDoubleLeftClick"></icon-button>
+      <icon-button
-      <icon-button type="double-right" @click="handleIconDoubleRightClick"></icon-button>
+        type="double-left"
+        :disabled="isDisabledArrows('last-year')"
+        @click="handleIconDoubleLeftClick"
+      ></icon-button>
+      <icon-button
+        type="double-right"
+        :disabled="isDisabledArrows('next-year')"
+        @click="handleIconDoubleRightClick"
+      ></icon-button>
       <span :class="`${prefixClass}-calendar-header-label`">
         <button
           type="button"
@@ -49,6 +57,10 @@ export default {
     },
   },
   props: {
+    disabledCalendarChanger: {
+      type: Function,
+      default: () => false,
+    },
     calendar: {
       type: Date,
       default: () => new Date(),
@@ -72,6 +84,21 @@ export default {
     },
   },
   methods: {
+    isDisabledArrows(type) {
+      const date = new Date(this.calendar);
+      switch (type) {
+        case 'last-year':
+          date.setFullYear(date.getFullYear() - 1, 11, 31);
+          date.setHours(23, 59, 59, 999);
+          break;
+        case 'next-year':
+          date.setFullYear(date.getFullYear() + 1, 0, 1);
+          break;
+        default:
+          break;
+      }
+      return this.disabledCalendarChanger(date, type);
+    },
     handleIconDoubleLeftClick() {
       this.$emit(
         'changecalendar',
@@ -95,7 +122,7 @@ export default {
         target = target.parentNode;
       }
       const month = target.getAttribute('data-month');
-      if (month) {
+      if (month && !target.classList.contains('disabled')) {
         this.$emit('select', parseInt(month, 10));
       }
     },

src/calendar/table-year.vue

@@ -1,8 +1,16 @@
 <template>
   <div :class="`${prefixClass}-calendar ${prefixClass}-calendar-panel-year`">
     <div :class="`${prefixClass}-calendar-header`">
-      <icon-button type="double-left" @click="handleIconDoubleLeftClick"></icon-button>
+      <icon-button
-      <icon-button type="double-right" @click="handleIconDoubleRightClick"></icon-button>
+        type="double-left"
+        :disabled="isDisabledArrows('last-decade')"
+        @click="handleIconDoubleLeftClick"
+      ></icon-button>
+      <icon-button
+        type="double-right"
+        :disabled="isDisabledArrows('next-decade')"
+        @click="handleIconDoubleRightClick"
+      ></icon-button>
       <span :class="`${prefixClass}-calendar-header-label`">
         <span>{{ firstYear }}</span>
         <span :class="`${prefixClass}-calendar-decade-separator`"></span>
@@ -41,6 +49,10 @@ export default {
     },
   },
   props: {
+    disabledCalendarChanger: {
+      type: Function,
+      default: () => false,
+    },
     calendar: {
       type: Date,
       default: () => new Date(),
@@ -70,6 +82,21 @@ export default {
     },
   },
   methods: {
+    isDisabledArrows(type) {
+      const date = new Date(this.calendar);
+      switch (type) {
+        case 'last-decade':
+          date.setFullYear(this.firstYear - 1, 11, 31);
+          date.setHours(23, 59, 59, 999);
+          break;
+        case 'next-decade':
+          date.setFullYear(this.lastYear + 1, 0, 1);
+          break;
+        default:
+          break;
+      }
+      return this.disabledCalendarChanger(date, type);
+    },
     getYears(calendar) {
       const firstYear = Math.floor(calendar.getFullYear() / 10) * 10;
       const years = [];
@@ -98,7 +125,7 @@ export default {
         target = target.parentNode;
       }
       const year = target.getAttribute('data-year');
-      if (year) {
+      if (year && !target.classList.contains('disabled')) {
         this.$emit('select', parseInt(year, 10));
       }
     },

src/style/btn.scss

@@ -18,6 +18,11 @@
     border-color: $primary-color;
     color: $primary-color;
   }
+  &:disabled,
+  &.disabled {
+    color: $disabled-color;
+    cursor: not-allowed;
+  }
 }
 
 .#{$namespace}-btn-text {