Min-Max, Disabled Dates and Navigator support for Calendar

src/components/calendar/Calendar.vue

@@ -14,7 +14,13 @@
                         </button>
                         <div class="p-datepicker-title">
                             <span class="p-datepicker-month" v-if="!monthNavigator && (view !== 'month')">{{locale.monthNames[month.month]}}</span>
+                            <select class="p-datepicker-month" v-if="monthNavigator && (view !== 'month') && numberOfMonths === 1" @change="onMonthDropdownChange($event.target.value)">
+                                <option :value="index" v-for="(monthName, index) of locale.monthNames" :key="monthName" :selected="index === month.month">{{monthName}}</option>
+                            </select>
                             <span class="p-datepicker-year" v-if="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
+                            <select class="p-datepicker-year" v-if="yearNavigator && numberOfMonths === 1" @change="onYearDropdownChange($event.target.value)">
+                                <option :value="year" v-for="year of yearOptions" :key="year" :selected="year === currentYear">{{year}}</option>
+                            </select>
                         </div>
                     </div>
                     <div class="p-datepicker-calendar-container" v-if="view ==='date'">
@@ -90,8 +96,16 @@ export default {
             type: Boolean,
             default: false
         },
-        panelClass: String,
+        yearRange: {
-        panelStyle: null,
+            type: String,
+            default: null
+        },
+        panelClass: {
+            type: String
+        },
+        panelStyle: {
+            type: null
+        },
         minDate: {
             type: Date,
             value: null
@@ -125,7 +139,9 @@ export default {
                 }
             }
         },
-        appendTo: null,
+        appendTo: {
+            type: null
+        },
         showOnFocus: {
             type: Boolean,
             default: true
@@ -412,6 +428,33 @@ export default {
             else {
                 this.overlayVisible = false;
             }
+        },
+        isDateDisabled(day, month, year) {
+            if (this.disabledDates) {
+                for (let disabledDate of this.disabledDates) {
+                    if (disabledDate.getFullYear() === year && disabledDate.getMonth() === month && disabledDate.getDate() === day) {
+                        return true;
+                    }
+                }
+            }
+            
+            return false;
+        },
+        isDayDisabled(day, month, year) {
+            if (this.disabledDays) {
+                let weekday = new Date(year, month, day);
+                let weekdayNumber = weekday.getDay();
+                return this.disabledDays.indexOf(weekdayNumber) !== -1;
+            }
+            return false;
+        },
+        onMonthDropdownChange(value) {
+            this.currentMonth = parseInt(value);
+            this.$emit('month-change', {month: this.currentMonth + 1, year: this.currentYear});
+        },
+        onYearDropdownChange(value) {
+            this.currentYear = parseInt(value);
+            this.$emit('year-change', {month: this.currentMonth + 1, year: this.currentYear});
         }
     },
     computed: {
@@ -541,6 +584,18 @@ export default {
         },
         datePattern() {
             return this.dateFormat || this.locale.dateFormat;
+        },
+        yearOptions() {
+            const years = this.yearRange.split(':');
+            const yearStart = parseInt(years[0]);
+            const yearEnd = parseInt(years[1]);
+            let yearOptions = [];
+
+            for (let i = yearStart; i <= yearEnd; i++) {
+                yearOptions.push(i);
+            }
+
+            return yearOptions;
         }
     },
     components: {

src/views/calendar/CalendarDemo.vue

@@ -21,6 +21,18 @@
                     <h3>Icon</h3>
                     <Calendar v-model="date3" :showIcon="true" />
                 </div>
+                <div class="p-col-12 p-md-4">
+                    <h3>Min-Max</h3>
+                    <Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :readonly="true" />
+                </div>
+                <div class="p-col-12 p-md-4">
+                    <h3>Disable Days</h3>
+                    <Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :readonly="true" />
+                </div>
+                <div class="p-col-12 p-md-4">
+                    <h3>Navigators</h3>
+                    <Calendar v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
+                </div>
             </div>
         </div>
 
@@ -32,11 +44,34 @@
 import CalendarDoc from './CalendarDoc'
 
 export default {
+    created() {
+        console.log(this.es.firstDayOfWeek);
+        let today = new Date();
+        let month = today.getMonth();
+        let year = today.getFullYear();
+        let prevMonth = (month === 0) ? 11 : month -1;
+        let prevYear = (prevMonth === 11) ? year - 1 : year;
+        let nextMonth = (month === 11) ? 0 : month + 1;
+        let nextYear = (nextMonth === 0) ? year + 1 : year;
+        this.minDate = new Date();
+        this.minDate.setMonth(prevMonth);
+        this.minDate.setFullYear(prevYear);
+        this.maxDate = new Date();
+        this.maxDate.setMonth(nextMonth);
+        this.maxDate.setFullYear(nextYear);
+        
+        let invalidDate = new Date();
+        invalidDate.setDate(today.getDate() - 1);
+        this.invalidDates = [today,invalidDate];
+    },
     data() {
         return {
             date1: null,
             date2: null,
             date3: null,
+            date4: null,
+            date5: null,
+            date6: null,
             es: {
                 firstDayOfWeek: 1,
                 dayNames: [ "Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado" ],
@@ -47,7 +82,10 @@ export default {
                 today: 'Hoy',
                 clear: 'Borrar',
                 weekHeader: 'Sm'
-            }
+            },
+            minDate: null,
+            maxDate: null,
+            invalidDates: null
         }
     },
 	components: {