From 4e1a7d05fa335410efdb984a01d4d3e661712ee0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 22 Nov 2021 13:14:38 +0300
Subject: [PATCH] Fixed #1798, Fixed #1801, Fixed #1802

---
 src/components/calendar/Calendar.vue | 232 +++++++++++++++++++++++----
 src/views/calendar/CalendarDemo.vue  |  41 +++--
 src/views/calendar/CalendarDoc.vue   |  25 +--
 3 files changed, 234 insertions(+), 64 deletions(-)

diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 222bbfef4c..e04078e39e 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -13,21 +13,24 @@
                                     <span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
                                 </button>
                                 <div class="p-datepicker-title">
-                                    <span class="p-datepicker-month" v-if="!monthNavigator && (view !== 'month')">{{getMonthName(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 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>
+                                    <button type="button" @click="switchToMonthView" v-if="currentView === 'date'" class="p-datepicker-month p-link" :disabled="switchViewButtonDisabled">
+                                        {{getMonthName(month.month)}}
+                                    </button>
+                                    <button type="button" @click="switchToYearView" v-if="currentView !== 'year'" class="p-datepicker-year p-link" :disabled="switchViewButtonDisabled">
+                                        {{currentYear}}
+                                    </button>
+                                    <span class="p-datepicker-decade" v-if="currentView === 'year'">
+                                        <slot name="decade" :years="yearPickerValues">
+                                            {{yearPickerValues[0]}} - {{yearPickerValues[yearPickerValues.length - 1]}}
+                                        </slot>
+                                    </span>
                                 </div>
                                 <button class="p-datepicker-next p-link" v-if="numberOfMonths === 1 ? true : (groupIndex === numberOfMonths - 1)"
                                     @click="onNextButtonClick" type="button" @keydown="onContainerButtonKeydown" v-ripple :disabled="$attrs.disabled">
                                     <span class="p-datepicker-next-icon pi pi-chevron-right"></span>
                                 </button>
                             </div>
-                            <div class="p-datepicker-calendar-container" v-if="view ==='date'">
+                            <div class="p-datepicker-calendar-container" v-if="currentView ==='date'">
                                 <table class="p-datepicker-calendar">
                                     <thead>
                                         <tr>
@@ -59,12 +62,18 @@
                             </div>
                         </div>
                     </div>
-                    <div class="p-monthpicker" v-if="view === 'month'">
+                    <div class="p-monthpicker" v-if="currentView === 'month'">
                         <span v-for="(m,i) of monthPickerValues" :key="m" @click="onMonthSelect($event, i)" @keydown="onMonthCellKeydown($event,i)"
                                 class="p-monthpicker-month" :class="{'p-highlight': isMonthSelected(i)}" v-ripple>
                             {{m}}
                         </span>
                     </div>
+                    <div class="p-yearpicker" v-if="currentView === 'year'">
+                        <span v-for="y of yearPickerValues" :key="y" @click="onYearSelect($event, y)" @keydown="onYearCellKeydown($event,y)"
+                                class="p-yearpicker-year" :class="{'p-highlight': isYearSelected(y)}" v-ripple>
+                            {{y}}
+                        </span>
+                    </div>
                 </template>
                 <div class="p-timepicker" v-if="showTime||timeOnly">
                     <div class="p-hour-picker">
@@ -86,7 +95,7 @@
                             @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 1, 1)" @keyup.enter="onTimePickerElementMouseUp($event)" type="button">
                             <span class="pi pi-chevron-up"></span>
                         </button>
-                       <span>{{formattedCurrentMinute}}</span>
+                        <span>{{formattedCurrentMinute}}</span>
                         <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 1, -1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown" v-ripple :disabled="$attrs.disabled"
                             @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 1, -1)" @keyup.enter="onTimePickerElementMouseUp($event)" type="button">
                             <span class="pi pi-chevron-down"></span>
@@ -344,8 +353,9 @@ export default {
             currentMinute: null,
             currentSecond: null,
             pm: null,
-			focused: false,
-            overlayVisible: false
+            focused: false,
+            overlayVisible: false,
+            currentView: this.view
         }
     },
     watch: {
@@ -397,6 +407,9 @@ export default {
         isMonthSelected(month) {
             return this.isComparable() ? (this.value.getMonth() === month && this.value.getFullYear() === this.currentYear) : false;
         },
+        isYearSelected(year) {
+            return this.isComparable() ? (this.value.getFullYear() === year) : false;
+        },
         isDateEquals(value, dateMeta) {
             if (value)
                 return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
@@ -534,6 +547,7 @@ export default {
             this.bindResizeListener();
         },
         onOverlayLeave() {
+            this.currentView = this.view;
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
             this.unbindResizeListener();
@@ -562,9 +576,12 @@ export default {
                 return;
             }
 
-            if (this.view === 'month') {
+            if (this.currentView === 'month') {
                 this.decrementYear();
             }
+            else if (this.currentView === 'year') {
+                this.decrementDecade();
+            }
             else {
                 if (this.currentMonth === 0) {
                     this.currentMonth = 11;
@@ -584,9 +601,12 @@ export default {
                 return;
             }
 
-            if (this.view === 'month') {
+            if (this.currentView === 'month') {
                 this.incrementYear();
             }
+            else if (this.currentView === 'year') {
+                this.incrementDecade();
+            }
             else {
                 if (this.currentMonth === 11) {
                     this.currentMonth = 0;
@@ -602,9 +622,25 @@ export default {
         decrementYear() {
             this.currentYear--;
         },
+        decrementDecade() {
+            this.currentYear = this.currentYear - 10;
+        },
         incrementYear() {
             this.currentYear++;
         },
+        incrementDecade() {
+            this.currentYear = this.currentYear + 10;
+        },
+        switchToMonthView(event) {
+            this.currentView = 'month';
+            setTimeout(this.updateFocus, 0);
+            event.preventDefault();
+        },
+        switchToYearView(event) {
+            this.currentView = 'year';
+            setTimeout(this.updateFocus, 0);
+            event.preventDefault();
+        },
         isEnabled() {
             return !this.$attrs.disabled && !this.$attrs.readonly;
         },
@@ -1127,9 +1163,9 @@ export default {
                         return false;
                     }
                     if (this.maxDate.getMinutes() === minute) {
-                      if (this.maxDate.getSeconds() < second) {
-                          return false;
-                      }
+                        if (this.maxDate.getSeconds() < second) {
+                            return false;
+                        }
                     }
                 }
             }
@@ -1260,8 +1296,29 @@ export default {
                 clearInterval(this.timePickerTimer);
             }
         },
-        onMonthSelect(event, index) {
-            this.onDateSelect(event, {year: this.currentYear, month: index, day: 1, selectable: true});
+        onMonthSelect(event, month) {
+            if (this.view === 'month') {
+                this.onDateSelect(event, {year: this.currentYear, month: month, day: 1, selectable: true});
+            }
+            else {
+                this.currentMonth = month;
+                this.currentView = 'date';
+                this.$emit('month-change', {month: this.currentMonth + 1, year: this.currentYear});
+            }
+
+            setTimeout(this.updateFocus, 0);
+        },
+        onYearSelect(event, year) {
+            if (this.view === 'year') {
+                this.onDateSelect(event, {year: year, month: 0, day: 1, selectable: true});
+            }
+            else {
+                this.currentYear = year;
+                this.currentView = 'month';
+                this.$emit('year-change', {month: this.currentMonth + 1, year: this.currentYear});
+            }
+
+            setTimeout(this.updateFocus, 0);
         },
         enableModality() {
             if (!this.mask) {
@@ -1486,7 +1543,7 @@ export default {
                 iValue++;
             };
 
-            if (this.view === 'month') {
+            if (this.currentView === 'month') {
                 day = 1;
             }
 
@@ -1794,7 +1851,7 @@ export default {
                 //tab
                 case 9: {
                     if (!this.inline) {
-                         this.trapFocus(event);
+                        this.trapFocus(event);
                     }
                     break;
                 }
@@ -1804,12 +1861,72 @@ export default {
                 break;
             }
         },
+        onYearCellKeydown(event, index) {
+            const cell = event.currentTarget;
+            switch (event.which) {
+                //arrows
+                case 38:
+                case 40: {
+                    cell.tabIndex = '-1';
+                    var cells = cell.parentElement.children;
+                    var cellIndex = DomHandler.index(cell);
+                    let nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex -3];
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    }
+                    event.preventDefault();
+                    break;
+                }
+                //left arrow
+                case 37: {
+                    cell.tabIndex = '-1';
+                    let prevCell = cell.previousElementSibling;
+                    if (prevCell) {
+                        prevCell.tabIndex = '0';
+                        prevCell.focus();
+                    }
+                    event.preventDefault();
+                    break;
+                }
+                //right arrow
+                case 39: {
+                    cell.tabIndex = '-1';
+                    let nextCell = cell.nextElementSibling;
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    }
+                    event.preventDefault();
+                    break;
+                }
+                //enter
+                case 13: {
+                    this.onMonthSelect(event, index);
+                    event.preventDefault();
+                    break;
+                }
+                //escape
+                case 27: {
+                    this.overlayVisible = false;
+                    event.preventDefault();
+                    break;
+                }
+                //tab
+                case 9: {
+                    this.trapFocus(event);
+                    break;
+                }
+                default:
+                    //no op
+                break;
+            }
+        },
         updateFocus() {
             let cell;
             if (this.navigationState) {
                 if (this.navigationState.button) {
                     this.initFocusableCell();
-
                     if (this.navigationState.backward)
                         DomHandler.findSingle(this.$refs.overlay, '.p-datepicker-prev').focus();
                     else
@@ -1817,13 +1934,31 @@ export default {
                 }
                 else {
                     if (this.navigationState.backward) {
-                        let cells = DomHandler.find(this.$refs.overlay, '.p-datepicker-calendar td span:not(.p-disabled)');
-                        cell = cells[cells.length - 1];
+                        let cells;
+                        if (this.currentView === 'month') {
+                            cells = DomHandler.find(this.$refs.overlay, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)');
+                        }
+                        else if (this.currentView === 'year') {
+                            cells = DomHandler.find(this.$refs.overlay, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
+                        }
+                        else {
+                            cells = DomHandler.find(this.$refs.overlay, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+                        }
+                        if (cells && cells.length > 0) {
+                            cell = cells[cells.length - 1];
+                        }
                     }
                     else {
-                        cell = DomHandler.findSingle(this.$refs.overlay, '.p-datepicker-calendar td span:not(.p-disabled)');
+                        if (this.currentView === 'month') {
+                            cell = DomHandler.findSingle(this.$refs.overlay, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)');
+                        }
+                        else if (this.currentView === 'year') {
+                            cell = DomHandler.findSingle(this.$refs.overlay, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
+                        }
+                        else {
+                            cell = DomHandler.findSingle(this.$refs.overlay, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+                        }
                     }
-
                     if (cell) {
                         cell.tabIndex = '0';
                         cell.focus();
@@ -1838,12 +1973,18 @@ export default {
         },
         initFocusableCell() {
             let cell;
-            if (this.view === 'month') {
+            if (this.currentView === 'month') {
                 let cells = DomHandler.find(this.$refs.overlay, '.p-monthpicker .p-monthpicker-month');
                 let selectedCell= DomHandler.findSingle(this.$refs.overlay, '.p-monthpicker .p-monthpicker-month.p-highlight');
                 cells.forEach(cell => cell.tabIndex = -1);
                 cell = selectedCell || cells[0];
             }
+            else if (this.currentView === 'year') {
+                let cells = DomHandler.find(this.$refs.overlay, '.p-yearpicker .p-yearpicker-year');
+                let selectedCell= DomHandler.findSingle(this.$refs.overlay, '.p-yearpicker .p-yearpicker-year.p-highlight');
+                cells.forEach(cell => cell.tabIndex = -1);
+                cell = selectedCell || cells[0];
+            }
             else {
                 cell = DomHandler.findSingle(this.$refs.overlay, 'span.p-highlight');
                 if (!cell) {
@@ -1886,7 +2027,7 @@ export default {
             }
         },
         onContainerButtonKeydown(event) {
-             switch (event.which) {
+            switch (event.which) {
                 //tab
                 case 9:
                     if (!this.inline) {
@@ -1903,7 +2044,7 @@ export default {
                 default:
                     //Noop
                 break;
-             }
+            }
         },
         onInput(val) {
             // IE 11 Workaround for input placeholder : https://github.com/primefaces/primeng/issues/2026
@@ -1952,8 +2093,8 @@ export default {
             return {
                 ...$vm.$listeners,
                 input: val => {
-                     this.onInput(val);
-        },
+                    this.onInput(val);
+                },
                 focus: event => {
                     $vm.focus = true;
                     if ($vm.showOnFocus && $vm.isEnabled()) {
@@ -2023,7 +2164,8 @@ export default {
                     'p-disabled': this.$attrs.disabled,
                     'p-datepicker-timeonly': this.timeOnly,
                     'p-datepicker-multiple-month': this.numberOfMonths > 1,
-                    'p-datepicker-monthpicker': (this.view === 'month'),
+                    'p-datepicker-monthpicker': (this.currentView === 'month'),
+                    'p-datepicker-yearpicker': (this.currentView === 'year'),
                     'p-datepicker-touch-ui': this.touchUI
                 }
             ];
@@ -2150,6 +2292,14 @@ export default {
 
             return monthPickerValues;
         },
+        yearPickerValues() {
+            let yearPickerValues = [];
+            let base = this.currentYear -  (this.currentYear % 10);
+            for (let i = 0; i < 10; i++) {
+                yearPickerValues.push(base + i);
+            }
+            return yearPickerValues;
+        },
         formattedCurrentHour() {
             return this.currentHour < 10 ? '0' + this.currentHour : this.currentHour;
         },
@@ -2170,6 +2320,9 @@ export default {
         },
         monthNames() {
             return this.$primevue.config.locale.monthNames;
+        },
+        switchViewButtonDisabled() {
+            return this.numberOfMonths > 1 || this.$attrs.disabled;
         }
     },
     components: {
@@ -2223,7 +2376,7 @@ export default {
 }
 
 .p-datepicker-inline {
-    display: inline-flex;
+    display: inline-block;
     position: static;
 }
 
@@ -2280,6 +2433,17 @@ export default {
     position: relative;
 }
 
+/* Year Picker */
+.p-yearpicker-year {
+    width: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+}
+
 /*  Button Bar */
 .p-datepicker-buttonbar {
     display: flex;
diff --git a/src/views/calendar/CalendarDemo.vue b/src/views/calendar/CalendarDemo.vue
index be52562be1..fe834c781b 100755
--- a/src/views/calendar/CalendarDemo.vue
+++ b/src/views/calendar/CalendarDemo.vue
@@ -32,10 +32,6 @@
                         <label for="disableddays">Disabled Days</label>
                         <Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
-                        <label for="navigators">Navigators</label>
-                        <Calendar id="navigators" v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
-                    </div>
                     <div class="p-field p-col-12 p-md-4">
                         <label for="multiple">Multiple</label>
                         <Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
@@ -46,23 +42,27 @@
                     </div>
                     <div class="p-field p-col-12 p-md-4">
                         <label for="buttonbar">Button Bar</label>
-                        <Calendar id="buttonbar" v-model="date7" :showButtonBar="true" />
+                        <Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
                     </div>
                     <div class="p-field p-col-12 p-md-4">
                         <label for="time24">Time / 24h</label>
-                        <Calendar id="time24" v-model="date8" :showTime="true" :showSeconds="true" />
+                        <Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
                     </div>
                     <div class="p-field p-col-12 p-md-4">
                         <label for="time12">Time / 12h</label>
-                        <Calendar id="time12" v-model="date9" :timeOnly="true" hourFormat="12" />
+                        <Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
                     </div>
                     <div class="p-field p-col-12 p-md-4">
                         <label for="monthpicker">Month Picker</label>
-                        <Calendar id="monthpicker" v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
+                        <Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <label for="yearpicker">Year Picker</label>
+                        <Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
                     </div>
                     <div class="p-field p-col-12 p-md-4">
                         <label for="multiplemonths">Multiple Months</label>
-                        <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
+                        <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
                     </div>
                     <div class="p-field p-col-12 p-md-4">
                         <label for="datetemplate">Date Template</label>
@@ -129,20 +129,19 @@ export default {
             date14: null,
             dates1: null,
             dates2: null,
-            es: {
-                firstDayOfWeek: 1,
-                dayNames: [ "Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado" ],
-                dayNamesShort: [ "Dom","Lun","Mar","Mié","Jue","Vie","Sáb" ],
-                dayNamesMin: [ "D","L","M","X","J","V","S" ],
-                monthNames: [ "Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre" ],
-                monthNamesShort: [ "Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic" ],
-                today: 'Hoy',
-                clear: 'Borrar',
-                weekHeader: 'Sm'
-            },
             minDate: null,
             maxDate: null,
-            invalidDates: null
+            invalidDates: null,
+            responsiveOptions: [
+                {
+					breakpoint: '1400px',
+					numMonths: 2
+				},
+				{
+					breakpoint: '1200px',
+					numMonths: 1
+				}
+			]
         }
     },
 	components: {
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index b5dc967af7..9a6616ef7c 100755
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -161,9 +161,15 @@ export default {
 </CodeHighlight>
 
                 <h5>Month Picker</h5>
-                <p>Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.</p>
+                <p>Month picker is used to select month and year only without the date, set <i>view</i>i> mode as "month" to activate month picker.</p>
 <CodeHighlight>
-&lt;Calendar v-model="value" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" /&gt;
+&lt;Calendar v-model="value" view="month" dateFormat="mm/yy" /&gt;
+</CodeHighlight>
+
+                <h5>Year Picker</h5>
+                <p>Similar to the month picker, year picker can be used to select years only. Set <i>view</i> to "year" to display the year picker.</p>
+<CodeHighlight>
+&lt;Calendar v-model="value" view="year" dateFormat="yy" /&gt;
 </CodeHighlight>
 
                 <h5>Touch UI</h5>
@@ -243,7 +249,7 @@ export default {
                                 <td>view</td>
                                 <td>string</td>
                                 <td>date</td>
-                                <td>Type of view to display, valid values are "date" for datepicker and "month" for month picker.</td>
+                                <td>Type of view to display, valid values are "date", "month" and "year".</td>
                             </tr>
                             <tr>
                                 <td>touchUI</td>
@@ -252,22 +258,23 @@ export default {
                                 <td>When enabled, calendar overlay is displayed as optimized for touch devices.</td>
                             </tr>
                             <tr>
-                                <td>monthNavigator</td>
+                                <td style="text-decoration: line-through">monthNavigator</td>
                                 <td>boolean</td>
                                 <td>false</td>
-                                <td>Whether the month should be rendered as a dropdown instead of text.</td>
+                                <td>Whether the month should be rendered as a dropdown instead of text. <br /> <br />  <b> Deprecated: </b> Navigator is always on</td>
                             </tr>
                             <tr>
-                                <td>yearNavigator</td>
+                                <td style="text-decoration: line-through">yearNavigator</td>
                                 <td>boolean</td>
                                 <td>false</td>
-                                <td>Whether the year should be rendered as a dropdown instead of text.</td>
+                                <td>Whether the year should be rendered as a dropdown instead of text. <br /> <br /> <b> Deprecated: </b> Navigator is always on.</td>
                             </tr>
                             <tr>
-                                <td>yearRange</td>
+                                <td style="text-decoration: line-through">yearRange</td>
                                 <td>string</td>
                                 <td>null</td>
-                                <td>The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).</td>
+                                <td>The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020). <br><br>
+                                <b> Deprecated: </b> Years are based on decades by default.</td>
                             </tr>
                             <tr>
                                 <td>panelClass</td>