feat: add disabledCalendarChanger (#628)

mengxiong10 · Jun 2, 2022 · cadb45c · cadb45c
1 parent d09739f
commit cadb45c
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 13 deletions.
diff --git a/example/demo/Basic.vue b/example/demo/Basic.vue
@@ -6,6 +6,8 @@
         v-model="value1"
         format="YYYY-MM-DD"
         type="date"
+        :disabled-date="disabledDate"
+        disabled-arrows="smart"
         placeholder="Select date"
       ></date-picker>
     </section>
@@ -45,5 +47,13 @@ export default {
       value6: null,
     };
   },
+  computed: {
+    // calendar()
+  },
+  methods: {
+    disabledDate(date) {
+      return date > new Date();
+    },
+  },
 };
 </script>
diff --git a/src/calendar/calendar-panel.js b/src/calendar/calendar-panel.js
@@ -33,6 +33,10 @@ export default {
     defaultPanel: {
       type: String,
     },
+    disabledCalendarChanger: {
+      type: [Function, String],
+      default: () => false,
+    },
     disabledDate: {
       type: Function,
       default: () => false,
@@ -111,6 +115,15 @@ export default {
       }
       this.innerCalendar = startOfMonth(calendarDate);
     },
+    isDisabledCalendarChanger(date) {
+      if (this.disabledCalendarChanger === 'smart') {
+        return this.isDisabled(date);
+      }
+      if (typeof this.disabledCalendarChanger === 'function') {
+        return this.disabledCalendarChanger(date);
+      }
+      return false;
+    },
     isDisabled(date) {
       return this.disabledDate(new Date(date), this.innerValue);
     },
@@ -185,19 +198,43 @@ export default {
       return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
     },
     getMonthClasses(month) {
+      const classes = [];
       if (this.type !== 'month') {
-        return this.calendarMonth === month ? 'active' : '';
+        if (this.calendarMonth === month) {
+          classes.push('active');
+        }
+        const minDate = new Date(this.innerCalendar);
+        minDate.setMonth(month, 1);
+        minDate.setHours(0, 0, 0, 0);
+        const maxDate = new Date(this.innerCalendar);
+        maxDate.setMonth(month + 1, 0);
+        maxDate.setHours(23, 59, 59, 999);
+        if (this.isDisabledCalendarChanger(minDate) && this.isDisabledCalendarChanger(maxDate)) {
+          classes.push('disabled');
+        }
+        return classes;
       }
-      const classes = [];
       const cellDate = this.getMonthCellDate(month);
       classes.push(this.getStateClass(cellDate));
       return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
     },
     getYearClasses(year) {
+      const classes = [];
       if (this.type !== 'year') {
-        return this.calendarYear === year ? 'active' : '';
+        if (this.calendarYear === year) {
+          classes.push('active');
+        }
+        const minDate = new Date(this.innerCalendar);
+        minDate.setFullYear(year, 0, 1);
+        minDate.setHours(0, 0, 0, 0);
+        const maxDate = new Date(this.innerCalendar);
+        maxDate.setFullYear(year, 11, 31);
+        maxDate.setHours(23, 59, 59, 999);
+        if (this.isDisabledCalendarChanger(minDate) && this.isDisabledCalendarChanger(maxDate)) {
+          classes.push('disabled');
+        }
+        return classes;
       }
-      const classes = [];
       const cellDate = this.getYearCellDate(year);
       classes.push(this.getStateClass(cellDate));
       return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
@@ -227,6 +264,7 @@ export default {
     if (panel === 'year') {
       return (
         <TableYear
+          disabledCalendarChanger={this.isDisabledCalendarChanger}
           calendar={innerCalendar}
           getCellClasses={this.getYearClasses}
           getYearPanel={this.getYearPanel}
@@ -238,6 +276,7 @@ export default {
     if (panel === 'month') {
       return (
         <TableMonth
+          disabledCalendarChanger={this.isDisabledCalendarChanger}
           calendar={innerCalendar}
           getCellClasses={this.getMonthClasses}
           onSelect={this.handleSelectMonth}
@@ -248,6 +287,7 @@ export default {
     }
     return (
       <TableDate
+        disabledCalendarChanger={this.isDisabledCalendarChanger}
         class={{ [`${this.prefixClass}-calendar-week-mode`]: this.type === 'week' }}
         calendar={innerCalendar}
         getCellClasses={this.getDateClasses}

diff --git a/src/calendar/icon-button.vue b/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: {

diff --git a/src/calendar/table-date.vue b/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 type="left" @click="handleIconLeftClick"></icon-button>
-      <icon-button type="double-right" @click="handleIconDoubleRightClick"></icon-button>
-      <icon-button type="right" @click="handleIconRightClick"></icon-button>
+      <icon-button
+        type="double-left"
+        :disabled="isDisabledArrows('last-year')"
+        @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);
+    },
     handleIconLeftClick() {
       this.$emit(
         'changecalendar',

diff --git a/src/calendar/table-month.vue b/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 type="double-right" @click="handleIconDoubleRightClick"></icon-button>
+      <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);
+    },
     handleIconDoubleLeftClick() {
       this.$emit(
         'changecalendar',

diff --git a/src/calendar/table-year.vue b/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 type="double-right" @click="handleIconDoubleRightClick"></icon-button>
+      <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);
+    },
     getYears(calendar) {
       const firstYear = Math.floor(calendar.getFullYear() / 10) * 10;
       const years = [];

diff --git a/src/style/btn.scss b/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 {