DatePicker: disabled year or month, fixed #758

packages/date-picker/src/basic/month-table.vue

@@ -2,44 +2,44 @@
   <table @click="handleMonthTableClick" class="el-month-table">
     <tbody>
     <tr>
-      <td :class="{ current: month === 0 }">
+      <td :class="getCellStyle(0)">
         <a class="cell">{{ $t('el.datepicker.months.jan') }}</a>
       </td>
-      <td :class="{ current: month === 1 }">
+      <td :class="getCellStyle(1)">
         <a class="cell">{{ $t('el.datepicker.months.feb') }}</a>
       </td>
-      <td :class="{ current: month === 2 }">
+      <td :class="getCellStyle(2)">
         <a class="cell">{{ $t('el.datepicker.months.mar') }}</a>
       </td>
-      <td :class="{ current: month === 3 }">
+      <td :class="getCellStyle(3)">
         <a class="cell">{{ $t('el.datepicker.months.apr') }}</a>
       </td>
     </tr>
     <tr>
-      <td :class="{ current: month === 4 }">
+      <td :class="getCellStyle(4)">
         <a class="cell">{{ $t('el.datepicker.months.may') }}</a>
       </td>
-      <td :class="{ current: month === 5 }">
+      <td :class="getCellStyle(5)">
         <a class="cell">{{ $t('el.datepicker.months.jun') }}</a>
       </td>
-      <td :class="{ current: month === 6 }">
+      <td :class="getCellStyle(6)">
         <a class="cell">{{ $t('el.datepicker.months.jul') }}</a>
       </td>
-      <td :class="{ current: month === 7 }">
+      <td :class="getCellStyle(7)">
         <a class="cell">{{ $t('el.datepicker.months.aug') }}</a>
       </td>
     </tr>
     <tr>
-      <td :class="{ current: month === 8 }">
+      <td :class="getCellStyle(8)">
         <a class="cell">{{ $t('el.datepicker.months.sep') }}</a>
       </td>
-      <td :class="{ current: month === 9 }">
+      <td :class="getCellStyle(9)">
         <a class="cell">{{ $t('el.datepicker.months.oct') }}</a>
       </td>
-      <td :class="{ current: month === 10 }">
+      <td :class="getCellStyle(10)">
         <a class="cell">{{ $t('el.datepicker.months.nov') }}</a>
       </td>
-      <td :class="{ current: month === 11 }">
+      <td :class="getCellStyle(11)">
         <a class="cell">{{ $t('el.datepicker.months.dec') }}</a>
       </td>
     </tr>
@@ -49,18 +49,34 @@
 
 <script type="text/babel">
   import Locale from 'element-ui/src/mixins/locale';
+  import { hasClass } from 'wind-dom/src/class';
 
   export default {
     props: {
+      disabledDate: {},
+      date: {},
       month: {
         type: Number
       }
     },
     mixins: [Locale],
     methods: {
+      getCellStyle(month) {
+        const style = {};
+        const date = new Date(this.date);
+
+        date.setMonth(month);
+        style.disabled = typeof this.disabledDate === 'function' &&
+          this.disabledDate(date);
+        style.current = this.month === month;
+
+        return style;
+      },
+
       handleMonthTableClick(event) {
         const target = event.target;
         if (target.tagName !== 'A') return;
+        if (hasClass(target.parentNode, 'disabled')) return;
         const column = target.parentNode.cellIndex;
         const row = target.parentNode.parentNode.rowIndex;
         const month = row * 4 + column;

packages/date-picker/src/basic/year-table.vue

@@ -2,38 +2,38 @@
   <table @click="handleYearTableClick" class="el-year-table">
     <tbody>
     <tr>
-      <td class="available" :class="{ current: year === startYear }">
+      <td class="available" :class="getCellStyle(startYear + 0)">
         <a class="cell">{{ startYear }}</a>
       </td>
-      <td class="available" :class="{ current: year === startYear + 1 }">
+      <td class="available" :class="getCellStyle(startYear + 1)">
         <a class="cell">{{ startYear + 1 }}</a>
       </td>
-      <td class="available" :class="{ current: year === startYear + 2 }">
+      <td class="available" :class="getCellStyle(startYear + 2)">
         <a class="cell">{{ startYear + 2 }}</a>
       </td>
-      <td class="available" :class="{ current: year === startYear + 3 }">
+      <td class="available" :class="getCellStyle(startYear + 3)">
         <a class="cell">{{ startYear + 3 }}</a>
       </td>
     </tr>
     <tr>
-      <td class="available" :class="{ current: year === startYear + 4 }">
+      <td class="available" :class="getCellStyle(startYear + 4)">
         <a class="cell">{{ startYear + 4 }}</a>
       </td>
-      <td class="available" :class="{ current: year === startYear + 5 }">
+      <td class="available" :class="getCellStyle(startYear + 5)">
         <a class="cell">{{ startYear + 5 }}</a>
       </td>
-      <td class="available" :class="{ current: year === startYear + 6 }">
+      <td class="available" :class="getCellStyle(startYear + 6)">
         <a class="cell">{{ startYear + 6 }}</a>
       </td>
-      <td class="available" :class="{ current: year === startYear + 7 }">
+      <td class="available" :class="getCellStyle(startYear + 7)">
         <a class="cell">{{ startYear + 7 }}</a>
       </td>
     </tr>
     <tr>
-      <td class="available" :class="{ current: year === startYear + 8 }">
+      <td class="available" :class="getCellStyle(startYear + 8)">
         <a class="cell">{{ startYear + 8 }}</a>
       </td>
-      <td class="available" :class="{ current: year === startYear + 9 }">
+      <td class="available" :class="getCellStyle(startYear + 9)">
         <a class="cell">{{ startYear + 9 }}</a>
       </td>
       <td></td>
@@ -43,9 +43,13 @@
   </table>
 </template>
 
-<script type="text/ecmascript-6">
+<script type="text/babel">
+  import { hasClass } from 'wind-dom/src/class';
+
   export default {
     props: {
+      disabledDate: {},
+      date: {},
       year: {
         type: Number
       }
@@ -58,6 +62,18 @@
     },
 
     methods: {
+      getCellStyle(year) {
+        const style = {};
+        const date = new Date(this.date);
+
+        date.setFullYear(year);
+        style.disabled = typeof this.disabledDate === 'function' &&
+          this.disabledDate(date);
+        style.current = this.year === year;
+
+        return style;
+      },
+
       nextTenYear() {
         this.$emit('pick', this.year + 10, false);
       },
@@ -69,6 +85,7 @@
       handleYearTableClick(event) {
         const target = event.target;
         if (target.tagName === 'A') {
+          if (hasClass(target.parentNode, 'disabled')) return;
           const year = parseInt(target.textContent || target.innerText, 10);
           this.$emit('pick', year);
         }

packages/date-picker/src/panel/date.vue

@@ -93,13 +93,17 @@
             <year-table
               ref="yearTable"
               :year="year"
+              :date="date"
               v-show="currentView === 'year'"
-              @pick="handleYearPick">
+              @pick="handleYearPick"
+              :disabled-date="disabledDate">
             </year-table>
             <month-table
               :month="month"
+              :date="date"
               v-show="currentView === 'month'"
-              @pick="handleMonthPick">
+              @pick="handleMonthPick"
+              :disabled-date="disabledDate">
             </month-table>
           </div>
         </div>

packages/theme-default/src/date-picker/date-table.css

@@ -57,7 +57,6 @@
         opacity: 1;
         cursor: not-allowed;
         color: #ccc;
-        text-decoration: line-through;
       }
 
       &.week {

packages/theme-default/src/date-picker/month-table.css

@@ -4,12 +4,19 @@
   @b month-table {
     font-size: 12px;
     margin: -1px;
+    border-collapse: collapse;
 
     td {
       text-align: center;
       padding: 20px 3px;
       cursor: pointer;
 
+      &.disabled .cell {
+        background-color: #f4f4f4;
+        cursor: not-allowed;
+        color: #ccc;
+      }
+
       .cell {
         width: 48px;
         height: 32px;

packages/theme-default/src/date-picker/year-table.css

@@ -14,16 +14,22 @@
       padding: 20px 3px;
       cursor: pointer;
 
+      &.disabled .cell {
+        background-color: #f4f4f4;
+        cursor: not-allowed;
+        color: #ccc;
+      }
+
       .cell {
         width: 48px;
         height: 32px;
         display: block;
         line-height: 32px;
         color: var(--datepicker-color);
-      }
 
-      &.available .cell:hover {
+        &:hover {
-        background-color: var(--datepicker-cell-hover-color);
+          background-color: var(--datepicker-cell-hover-color);
+        }
       }
 
       &.current .cell {