Initiated Calendar component

src/components/calendar/Calendar.vue

@@ -2,51 +2,58 @@
     <span :class="containerClass">
         <CalendarInputText v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue"  />
         <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger p-calendar-button" :disabled="$attrs.disabled" />
-        <div :class="panelStyleClass">
+        <transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
-            <div class="p-datepicker-group" v-for="(month,i) of months" :key="month.month + month.year">
+            <div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible">
-                <div class="p-datepicker-header">
+                <div class="p-datepicker-group" v-for="(month,i) of months" :key="month.month + month.year">
-                    <button class="p-datepicker-prev p-link" v-if="i === 0">
+                    <div class="p-datepicker-header">
-                        <span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
+                        <button class="p-datepicker-prev p-link" v-if="i === 0">
-                    </button>
+                            <span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
-                    <button class="p-datepicker-next p-link" v-if="numberOfMonths === 1 ? true : (i === numberOfMonths -1)">
+                        </button>
-                        <span class="p-datepicker-next-icon pi pi-chevron-right"></span>
+                        <button class="p-datepicker-next p-link" v-if="numberOfMonths === 1 ? true : (i === numberOfMonths -1)">
-                    </button>
+                            <span class="p-datepicker-next-icon pi pi-chevron-right"></span>
-                    <div class="p-datepicker-title">
+                        </button>
-                        <span class="p-datepicker-month" v-if="monthNavigator && (view !== 'month')">{{locale.monthNames[month.month]}}</span>
+                        <div class="p-datepicker-title">
-                        <span class="p-datepicker-year" v-if="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
+                            <span class="p-datepicker-month" v-if="monthNavigator && (view !== 'month')">{{locale.monthNames[month.month]}}</span>
+                            <span class="p-datepicker-year" v-if="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
+                        </div>
+                    </div>
+                    <div class="p-datepicker-calendar-container" v-if="view ==='date'">
+                        <table class="p-datepicker-calendar">
+                            <thead>
+                                <tr>
+                                    <th scope="col" v-for="weekDay of weekDays" :key="weekDay">
+                                        <span>{{weekDay}}</span>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="week of month.dates" :key="week[0].day + week[0].month">
+                                    <td v-for="date of week" :key="date.day" :class="{'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today}">
+                                        <span :class="{'p-highlight': isSelected(date), 'p-disabled': !date.selectable}">{{date.day}}</span>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
                     </div>
                 </div>
-                <div class="p-datepicker-calendar-container" *ngIf="view ==='date'">
-                    <table class="p-datepicker-calendar">
-                        <thead>
-                            <tr>
-                                <th scope="col" *ngFor="let weekDay of weekDays;let begin = first; let end = last">
-                                    <span>{{weekDay}}</span>
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="week of month.dates" :key="week[0].day + week[0].month">
-                                <td v-for="date of week" :key="date.day" :class="{'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today}">
-                                    
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
             </div>
-        </div>
+        </transition>
     </span>
 </template>
 
 <script>
 import InputText from '../inputtext/InputText';
 import Button from '../button/Button';
+import DomHandler from '../utils/DomHandler';
 
 export default {
     inheritAttrs: false,
     props: {
         value: null,
+        defaultDate: {
+            type: Date,
+            default: null
+        },
         timeOnly: {
             type: Boolean,
             default: false
@@ -85,18 +92,247 @@ export default {
         },
         panelClass: String,
         panelStyle: null,
+        minDate: {
+            type: Date,
+            value: null
+        },
+        maxDate: {
+            type: Date,
+            value: null
+        },
+        disabledDates: {
+            type: Array,
+            value: null
+        },
+        disabledDays: {
+            type: Array,
+            value: null
+        },
         locale: {
             type: Object,
-            default: {
+            default: () => {
-                firstDayOfWeek: 0,
+                return {
-                dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+                    firstDayOfWeek: 0,
-                dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+                    dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-                dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
+                    dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-                monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
+                    dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
-                monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
+                    monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
-                today: 'Today',
+                    monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
-                clear: 'Clear',
+                    today: 'Today',
-                dateFormat: 'mm/dd/yy'
+                    clear: 'Clear',
+                    dateFormat: 'mm/dd/yy'
+                }
+            }
+        },
+        appendTo: null,
+        showOnFocus: {
+            type: Boolean,
+            default: true
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        }
+    },
+    created() {
+        let viewDate = null;
+        if (this.defaultDate) {
+            viewDate = this.defaultDate;
+        }
+        else {
+            let propValue = this.value;
+            if (Array.isArray(propValue)) {
+                propValue = propValue[0];
+            }
+
+            viewDate = propValue || new Date();
+        }
+  
+        this.currentMonth = viewDate.getMonth();
+        this.currentYear = viewDate.getFullYear();
+    },
+    data() {
+        return {
+            currentMonth: null,
+            currentYear: null,
+            overlayVisible: false
+        }
+    },
+    outsideClickListener: null,
+    methods: {
+        isSelected(dateMeta) {
+            if(this.value) {
+                if(this.isSingleSelection()) {
+                    return this.isDateEquals(this.props.value, dateMeta);
+                }
+                else if(this.isMultipleSelection()) {
+                    let selected = false;
+                    for(let date of this.props.value) {
+                        selected = this.isDateEquals(date, dateMeta);
+                        if(selected) {
+                            break;
+                        }
+                    }
+                    
+                    return selected;
+                }
+                else if(this.isRangeSelection()) {
+                    if(this.props.value[1])
+                        return this.isDateEquals(this.props.value[0], dateMeta) || this.isDateEquals(this.props.value[1], dateMeta) || this.isDateBetween(this.props.value[0], this.props.value[1], dateMeta);
+                    else {
+                        return this.isDateEquals(this.props.value[0], dateMeta);
+                    }
+                        
+                }
+            }
+            else {
+                return false;
+            }         
+        },
+        getFirstDayOfMonthIndex(month, year) {
+            let day = new Date();
+            day.setDate(1);
+            day.setMonth(month);
+            day.setFullYear(year);
+            
+            let dayIndex = day.getDay() + this.sundayIndex;
+            return dayIndex >= 7 ? dayIndex - 7 : dayIndex;
+        },
+        getDaysCountInMonth(month, year) {
+            return 32 - this.daylightSavingAdjust(new Date(year, month, 32)).getDate();
+        },
+        getDaysCountInPrevMonth(month, year) {
+            let prev = this.getPreviousMonthAndYear(month, year);
+            return this.getDaysCountInMonth(prev.month, prev.year);
+        },
+        getPreviousMonthAndYear(month, year) {
+            let m, y;
+            
+            if (month === 0) {
+                m = 11;
+                y = year - 1;
+            }
+            else {
+                m = month - 1;
+                y = year;
+            }
+            
+            return {'month':m, 'year': y};
+        },
+        getNextMonthAndYear(month, year) {
+            let m, y;
+            
+            if (month === 11) {
+                m = 0;
+                y = year + 1;
+            }
+            else {
+                m = month + 1;
+                y = year;
+            }
+            
+            return {'month':m,'year':y};
+        },
+        daylightSavingAdjust(date) {
+            if (!date) {
+                return null;
+            }
+
+            date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
+            
+            return date;
+        },
+        isToday(today, day, month, year) {
+            return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
+        },
+        isSelectable(day, month, year, otherMonth) {
+            let validMin = true;
+            let validMax = true;
+            let validDate = true;
+            let validDay = true;
+
+            if (otherMonth && !this.selectOtherMonths) {
+                return false;
+            }
+            
+            if (this.minDate) {
+                if (this.minDate.getFullYear() > year) {
+                    validMin = false;
+                }
+                else if (this.minDate.getFullYear() === year) {
+                    if (this.minDate.getMonth() > month) {
+                        validMin = false;
+                    }
+                    else if (this.minDate.getMonth() === month) {
+                        if (this.minDate.getDate() > day) {
+                            validMin = false;
+                        }
+                    }
+                }
+            }
+            
+            if (this.maxDate) {
+                if (this.maxDate.getFullYear() < year) {
+                    validMax = false;
+                }
+                else if (this.maxDate.getFullYear() === year) {
+                    if (this.maxDate.getMonth() < month) {
+                        validMax = false;
+                    }
+                    else if (this.maxDate.getMonth() === month) {
+                        if (this.maxDate.getDate() < day) {
+                            validMax = false;
+                        }
+                    }
+                }
+            }
+            
+            if (this.disabledDates) {
+                validDate = !this.isDateDisabled(day,month,year);
+            }
+        
+            if (this.disabledDays) {
+                validDay = !this.isDayDisabled(day,month,year)
+            }
+            
+            return validMin && validMax && validDate && validDay;
+        },
+        onOverlayEnter() {
+            if (this.autoZIndex) {
+                this.$refs.overlay.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+            }
+            this.alignOverlay();
+            this.bindOutsideClickListener();
+        },
+        onOverlayLeave() {
+            this.unbindOutsideClickListener();
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.overlayVisible && this.$refs.overlay && !this.$el.contains(event.target)) {
+                        this.overlayVisible = false;
+                    }
+                };
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        alignOverlay() {
+            if (this.$refs.overlay) {
+                if (this.appendTo)
+                    DomHandler.absolutePosition(this.$refs.overlay, this.$el);
+                else
+                    DomHandler.relativePosition(this.$refs.overlay, this.$el);
             }        
         }
     },
@@ -106,6 +342,16 @@ export default {
                 ...this.$listeners,
                 input: event => {
                     this.$emit('input', event)
+                },
+                focus: event => {
+                    this.focus = true;
+                    if (this.showOnFocus) {
+                        this.overlayVisible = true;
+                    }
+                    this.$emit('focus', event)
+                },
+                blur: event => {
+                    this.$emit('blur', event);
                 }
             };
         },
@@ -124,7 +370,6 @@ export default {
                 'p-datepicker p-component',
                 {
                     'p-datepicker-inline': this.inline,
-                    'p-input-overlay': !this.inline,
                     'p-shadow': !this.inline,
                     'p-disabled': this.$attrs.disabled,
                     'p-datepicker-timeonly': this.timeOnly,
@@ -136,6 +381,85 @@ export default {
         },
         inputFieldValue() {
             return '';
+        },
+        months() {
+            let months = [];
+            for (let i = 0 ; i < this.numberOfMonths; i++) {
+                let month = this.currentMonth + i;
+                let year = this.currentYear;
+                if (month > 11) {
+                    month = month % 11 - 1;
+                    year = year + 1;
+                }
+
+                let dates = [];
+                let firstDay = this.getFirstDayOfMonthIndex(month, year);
+                let daysLength = this.getDaysCountInMonth(month, year);
+                let prevMonthDaysLength = this.getDaysCountInPrevMonth(month, year);
+                let dayNo = 1;
+                let today = new Date();
+                
+                for (let i = 0; i < 6; i++) {
+                    let week = [];
+                    
+                    if (i == 0) {
+                        for (let j = (prevMonthDaysLength - firstDay + 1); j <= prevMonthDaysLength; j++) {
+                            let prev = this.getPreviousMonthAndYear(month, year);
+                            week.push({day: j, month: prev.month, year: prev.year, otherMonth: true,
+                                    today: this.isToday(today, j, prev.month, prev.year), selectable: this.isSelectable(j, prev.month, prev.year, true)});
+                        }
+                        
+                        let remainingDaysLength = 7 - week.length;
+                        for (let j = 0; j < remainingDaysLength; j++) {
+                            week.push({day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year),
+                                    selectable: this.isSelectable(dayNo, month, year, false)});
+                            dayNo++;
+                        }
+                    }
+                    else {
+                        for (let j = 0; j < 7; j++) {
+                            if (dayNo > daysLength) {
+                                let next = this.getNextMonthAndYear(month, year);
+                                week.push({day: dayNo - daysLength, month: next.month, year: next.year, otherMonth: true,
+                                            today: this.isToday(today, dayNo - daysLength, next.month, next.year),
+                                            selectable: this.isSelectable((dayNo - daysLength), next.month, next.year, true)});
+                            }
+                            else {
+                                week.push({day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year),
+                                    selectable: this.isSelectable(dayNo, month, year, false)});
+                            }
+                            
+                            dayNo++;
+                        }
+                    }
+                    
+                    dates.push(week);
+                }
+
+                months.push({
+                    month: month,
+                    year: year,
+                    dates: dates
+                });
+            }
+
+            return months;
+        },
+        weekDays() {
+            let weekDays = [];
+            let dayIndex = this.locale.firstDayOfWeek;
+            for (let i = 0; i < 7; i++) {
+                weekDays.push(this.locale.dayNamesMin[dayIndex]);
+                dayIndex = (dayIndex == 6) ? 0 : ++dayIndex;
+            }
+
+            return weekDays;
+        },
+        ticksTo1970() {
+            return (((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000);
+        },
+        sundayIndex() {
+            return this.locale.firstDayOfWeek > 0 ? 7 - this.locale.firstDayOfWeek : 0;
         }
     },
     components: {
@@ -190,7 +514,6 @@ export default {
 .p-datepicker {
 	width: auto;
 	padding: .2em;
-	display: none;
     position: absolute;
 }