Prevent selecting disabled dates

Sergio Crisostomo
1 parent e9d7ff50
Showing 4 changed files with 13 additions and 4 deletions Show diff stats
src/components/date-picker/base/date-table.vue
src/components/date-picker/base/mixin.js
src/components/date-picker/picker.vue
src/styles/components/date-picker.less
@@ -7,7 +7,7 @@
         </div>
         <span
                 :class="getCellCls(cell)"
-                v-for="(cell, i) in readCells"
+                v-for="(cell, i) in cells"
                 :key="String(cell.date) + i"
                 @click="handleClick(cell, $event)"
                 @mouseenter="handleMouseMove(cell)"
@@ -61,7 +61,7 @@
                 const weekDays = translatedDays.splice(weekStartDay, 7 - weekStartDay).concat(translatedDays.splice(0, weekStartDay));
                 return this.showWeekNumbers ? [''].concat(weekDays) : weekDays;
             },
-            readCells () {
+            cells () {
                 const tableYear = this.tableDate.getFullYear();
                 const tableMonth = this.tableDate.getMonth();
                 const today = clearHours(new Date());    // timestamp of today
@@ -2,6 +2,7 @@
 import {clearHours} from '../util';
  
 export default {
+    name: 'PanelTable',
     props: {
         tableDate: {
             type: Date,
@@ -385,7 +385,15 @@
                     if (this.type.match(/range/)){
                         this.$refs.pickerPanel.handleRangePick(this.focusedDate, 'date');
                     } else {
-                        this.onPick(this.focusedDate, false, 'date');
+                        const panels = findComponentsDownward(this, 'PanelTable');
+                        const compareDate = (d) => {
+                            const sliceIndex = ['year', 'month', 'date'].indexOf((this.type)) + 1;
+                            return [d.getFullYear(), d.getMonth(), d.getDate()].slice(0, sliceIndex).join('-');
+                        };
+                        const dateIsValid = panels.find(({cells}) => {
+                            return cells.find(({date, disabled}) => compareDate(date) === compareDate(this.focusedDate) && !disabled);
+                        });
+                        if (dateIsValid) this.onPick(this.focusedDate, false, 'date');
                     }
                 }
  
@@ -46,7 +46,7 @@
         }
         &-cell:hover, &-focused{
             em{
-                background: @date-picker-cell-hover-bg;
+                background: @date-picker-cell-hover-bg !important;
             }
         }