Add disabledDays prop to accept array of dates to disable

README.md

@@ -43,8 +43,9 @@ export default {
 |-----------------|---------------|-------------|---------------------------------------|
 | range           | Boolean       | false       | if true, the type is daterange        |
 | format          | String        | yyyy-MM-dd  | Date formatting string                |
-| lang            | String        | zh          | Translation (en/zh/es)      |
+| lang            | String        | zh          | Translation (en/zh/es)                |
 | placeholder     | String        |             | input placeholder text                |
 | width           | String/Number | 210         | input size                            |
+| disabledDays    | Array         | []          | Days in YYYY-MM-DD format to disable  |
 
 

datepicker/calendar-panel.vue

@@ -40,7 +40,8 @@ export default {
     startAt: null,
     endAt: null,
     value: null,
-    show: Boolean
+    show: Boolean,
+    disabledDays: Array
   },
   data () {
     const translation = this.$parent.translation
@@ -91,12 +92,14 @@ export default {
           const date = new Date(time.getFullYear(), time.getMonth(), day)
           return {
             title: date.toLocaleDateString(),
+            iso: cal.isoDate(date),
             date,
             day,
             classes
           }
         })
       }
+      var cal = this;
       const time = new Date(this.now)
       time.setDate(0) // 把时间切换到上个月最后一天
       const lastMonthLength = time.getDay() + 1  // time.getDay() 0是星期天, 1是星期一 ...
@@ -121,6 +124,15 @@ export default {
       }
       this.dates = result
     },
+    isoDate(date) {
+      function doubleDigits(num) {
+        if ( parseInt(num) < 10 ) {
+          return '0'+num;
+        }
+        return num;
+      }
+      return date.getFullYear()+'-'+doubleDigits((date.getMonth()+1))+'-'+doubleDigits(date.getDate());
+    },
     getClasses (cell) {
       const classes = []
       const cellTime = cell.date.getTime()
@@ -131,6 +143,10 @@ export default {
 
       classes.push(cell.classes)
 
+      if ( typeof this.disabledDays.find(function(disabledDate) { return disabledDate === cell.iso } ) !== 'undefined' ) {
+        classes.push('disabled');
+      }
+
       if (cellTime === today) {
         classes.push('today')
       }

datepicker/index.vue

@@ -20,14 +20,14 @@
          ref="calendar"
          v-show="showPopup">
       <template v-if="!range">
-        <calendar-panel @select="showPopup = false" v-model="currentValue" :show="showPopup"></calendar-panel>
+        <calendar-panel @select="showPopup = false" v-model="currentValue" :show="showPopup" :disabledDays="disabledDays"></calendar-panel>
       </template>
       <template v-else>
         <div class="datepicker-top">
           <span v-for="range in ranges" @click="selectRange(range)">{{range.text}}</span>
         </div>
-        <calendar-panel style="width:50%;box-shadow:1px 0 rgba(0, 0, 0, .1)"  v-model="currentValue[0]" :end-at="currentValue[1]" :show="showPopup"></calendar-panel>
-        <calendar-panel style="width:50%;"  v-model="currentValue[1]" :start-at="currentValue[0]" :show="showPopup"></calendar-panel>
+        <calendar-panel style="width:50%;box-shadow:1px 0 rgba(0, 0, 0, .1)"  v-model="currentValue[0]" :end-at="currentValue[1]" :show="showPopup" :disabledDays="disabledDays"></calendar-panel>
+        <calendar-panel style="width:50%;"  v-model="currentValue[1]" :start-at="currentValue[0]" :show="showPopup" :disabledDays="disabledDays"></calendar-panel>
       </template>
     </div>
   </div>
@@ -57,7 +57,8 @@ export default {
       type: String,
       default: 'zh'
     },
-    value: null
+    value: null,
+    disabledDays: Array
   },
   data () {
     return {