fix disable hidden date

Author: annisa prida rachmadianty

src/RangedatePicker.vue

@@ -17,7 +17,8 @@
             </ul>
             <ul v-for="r in 6" :class="[s.days]" :key="r">
               <li :class="[{[s.daysSelected]: isDateSelected(r, i, 'first', startMonthDay, endMonthDate),
-              [s.daysInRange]: isDateInRange(r, i, 'first', startMonthDay, endMonthDate)}]" v-for="i in numOfDays" :key="i" v-html="getDayCell(r, i, startMonthDay, endMonthDate)"
+              [s.daysInRange]: isDateInRange(r, i, 'first', startMonthDay, endMonthDate),
+              [s.dateDisabled]: isDateDisabled(r, i, startMonthDay, endMonthDate)}]" v-for="i in numOfDays" :key="i" v-html="getDayCell(r, i, startMonthDay, endMonthDate)"
                 @click="selectFirstItem(r, i)"></li>
             </ul>
         </div>
@@ -31,7 +32,9 @@
           </ul>
           <ul v-for="r in 6" :class="[s.days]" :key="r">
             <li :class="[{[s.daysSelected]: isDateSelected(r, i, 'second', startNextMonthDay, endNextMonthDate),
-            [s.daysInRange]: isDateInRange(r, i, 'second', startNextMonthDay, endNextMonthDate)}]" v-for="i in numOfDays" :key="i" v-html="getDayCell(r, i, startNextMonthDay, endNextMonthDate)"
+            [s.daysInRange]: isDateInRange(r, i, 'second', startNextMonthDay, endNextMonthDate),
+            [s.dateDisabled]: isDateDisabled(r, i, startNextMonthDay, endNextMonthDate)}]"
+                v-for="i in numOfDays" :key="i" v-html="getDayCell(r, i, startNextMonthDay, endNextMonthDate)"
                   @click="selectSecondItem(r, i)"></li>
           </ul>
         </div>
@@ -204,6 +207,9 @@
   background: #eee;
   color: #000;
 }
+li.calendar_days--disabled{
+   pointer-events: none;
+}
 
 li.calendar_days_selected {
   background: #005a82;

src/js/rangedate-picker.js

@@ -43,7 +43,8 @@ const defaultStyle = {
   daysInRange: 'calendar_days_in-range',
   firstDate: 'calendar_month_left',
   secondDate: 'calendar_month_right',
-  presetRanges: 'calendar_preset-ranges'
+  presetRanges: 'calendar_preset-ranges',
+  dateDisabled: 'calendar_days--disabled'
 }
 
 const defaultPresets = function (i18n = defaultI18n) {
@@ -331,6 +332,11 @@ export default {
       return (this.dateRange.start && this.dateRange.start.getTime() < currDate.getTime()) &&
         (this.dateRange.end && this.dateRange.end.getTime() > currDate.getTime())
     },
+    isDateDisabled (r, i, startMonthDay, endMonthDate) {
+      const result = this.getDayIndexInMonth(r, i, startMonthDay)
+      // bound by > 0 and < last day of month
+      return !(result > 0 && result <= endMonthDate)
+    },
     goPrevMonth () {
       const prevMonth = new Date(this.activeYearStart, this.activeMonthStart, 0)
       this.activeMonthStart = prevMonth.getMonth()