primeng 13.0.0-rc.2 → 13.0.0

package/fesm2015/primeng-calendar.mjs

@@ -11,7 +11,7 @@ import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import * as i1 from 'primeng/api';
 import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ZIndexUtils } from 'primeng/utils';
+import { UniqueComponentId, ZIndexUtils } from 'primeng/utils';
 
 const CALENDAR_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -47,8 +47,6 @@ class Calendar {
         this.baseZIndex = 0;
         this.keepInvalid = false;
         this.hideOnDateTimeSelect = true;
-        this.numberOfMonths = 1;
-        this.view = 'date';
         this.timeSeparator = ":";
         this.focusTrap = true;
         this.firstDayOfWeek = 0;
@@ -69,6 +67,8 @@ class Calendar {
         this.onModelTouched = () => { };
         this.inputFieldValue = null;
         this.navigationState = null;
+        this._numberOfMonths = 1;
+        this._view = 'date';
         this.convertTo24Hour = function (hours, pm) {
             if (this.hourFormat == '12') {
                 if (hours === 12) {
@@ -94,6 +94,14 @@ class Calendar {
         }
     }
     ;
+    get view() {
+        return this._view;
+    }
+    ;
+    set view(view) {
+        this._view = view;
+        this.currentView = this._view;
+    }
     get defaultDate() {
         return this._defaultDate;
     }
@@ -169,22 +177,39 @@ class Calendar {
     get locale() {
         return this._locale;
     }
+    get responsiveOptions() {
+        return this._responsiveOptions;
+    }
+    ;
+    set responsiveOptions(responsiveOptions) {
+        this._responsiveOptions = responsiveOptions;
+        this.destroyResponsiveStyleElement();
+        this.createResponsiveStyle();
+    }
+    get numberOfMonths() {
+        return this._numberOfMonths;
+    }
+    set numberOfMonths(numberOfMonths) {
+        this._numberOfMonths = numberOfMonths;
+        this.destroyResponsiveStyleElement();
+        this.createResponsiveStyle();
+    }
     set locale(newLocale) {
         console.warn("Locale property has no effect, use new i18n API instead.");
     }
     ngOnInit() {
+        this.attributeSelector = UniqueComponentId();
         const date = this.defaultDate || new Date();
+        this.createResponsiveStyle();
         this.currentMonth = date.getMonth();
         this.currentYear = date.getFullYear();
+        this.currentView = this.view;
         if (this.view === 'date') {
             this.createWeekDays();
             this.initTime(date);
             this.createMonths(this.currentMonth, this.currentYear);
             this.ticksTo1970 = (((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000);
         }
-        else if (this.view === 'month') {
-            this.createMonthPickerValues();
-        }
         this.translationSubscription = this.config.translationObserver.subscribe(() => {
             this.createWeekDays();
         });
@@ -196,6 +221,9 @@ class Calendar {
                 case 'date':
                     this.dateTemplate = item.template;
                     break;
+                case 'decade':
+                    this.decadeTemplate = item.template;
+                    break;
                 case 'disabledDate':
                     this.disabledDateTemplate = item.template;
                     break;
@@ -211,6 +239,17 @@ class Calendar {
             }
         });
     }
+    ngAfterViewInit() {
+        if (this.inline) {
+            this.contentViewChild && this.contentViewChild.nativeElement.setAttribute(this.attributeSelector, '');
+            if (!this.disabled) {
+                this.initFocusableCell();
+                if (this.numberOfMonths === 1) {
+                    this.contentViewChild.nativeElement.style.width = DomHandler.getOuterWidth(this.containerViewChild.nativeElement) + 'px';
+                }
+            }
+        }
+    }
     getTranslation(option) {
         return this.config.getTranslation(option);
     }
@@ -229,12 +268,20 @@ class Calendar {
             dayIndex = (dayIndex == 6) ? 0 : ++dayIndex;
         }
     }
-    createMonthPickerValues() {
-        this.monthPickerValues = [];
-        let monthLabels = this.getTranslation(TranslationKeys.MONTH_NAMES_SHORT);
+    monthPickerValues() {
+        let monthPickerValues = [];
         for (let i = 0; i <= 11; i++) {
-            this.monthPickerValues.push(monthLabels[i]);
+            monthPickerValues.push(this.config.getTranslation('monthNamesShort')[i]);
+        }
+        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;
     }
     createMonths(month, year) {
         this.months = this.months = [];
@@ -321,18 +368,23 @@ class Calendar {
         }
     }
     navBackward(event) {
-        event.stopPropagation();
         if (this.disabled) {
             event.preventDefault();
             return;
         }
         this.isMonthNavigate = true;
-        if (this.view === 'month') {
+        if (this.currentView === 'month') {
             this.decrementYear();
             setTimeout(() => {
                 this.updateFocus();
             }, 1);
         }
+        else if (this.currentView === 'year') {
+            this.decrementDecade();
+            setTimeout(() => {
+                this.updateFocus();
+            }, 1);
+        }
         else {
             if (this.currentMonth === 0) {
                 this.currentMonth = 11;
@@ -346,18 +398,23 @@ class Calendar {
         }
     }
     navForward(event) {
-        event.stopPropagation();
         if (this.disabled) {
             event.preventDefault();
             return;
         }
         this.isMonthNavigate = true;
-        if (this.view === 'month') {
+        if (this.currentView === 'month') {
             this.incrementYear();
             setTimeout(() => {
                 this.updateFocus();
             }, 1);
         }
+        else if (this.currentView === 'year') {
+            this.incrementDecade();
+            setTimeout(() => {
+                this.updateFocus();
+            }, 1);
+        }
         else {
             if (this.currentMonth === 11) {
                 this.currentMonth = 0;
@@ -377,6 +434,12 @@ class Calendar {
             this.populateYearOptions(this.yearOptions[0] - difference, this.yearOptions[this.yearOptions.length - 1] - difference);
         }
     }
+    decrementDecade() {
+        this.currentYear = this.currentYear - 10;
+    }
+    incrementDecade() {
+        this.currentYear = this.currentYear + 10;
+    }
     incrementYear() {
         this.currentYear++;
         if (this.yearNavigator && this.currentYear > this.yearOptions[this.yearOptions.length - 1]) {
@@ -384,6 +447,14 @@ class Calendar {
             this.populateYearOptions(this.yearOptions[0] + difference, this.yearOptions[this.yearOptions.length - 1] + difference);
         }
     }
+    switchToMonthView(event) {
+        this.currentView = 'month';
+        event.preventDefault();
+    }
+    switchToYearView(event) {
+        this.currentView = 'year';
+        event.preventDefault();
+    }
     onDateSelect(event, dateMeta) {
         if (this.disabled || !dateMeta.selectable) {
             event.preventDefault();
@@ -423,9 +494,26 @@ class Calendar {
             return true;
     }
     onMonthSelect(event, index) {
-        if (!DomHandler.hasClass(event.target, 'p-disabled')) {
+        if (this.view === 'month') {
             this.onDateSelect(event, { year: this.currentYear, month: index, day: 1, selectable: true });
         }
+        else {
+            this.currentMonth = index;
+            this.currentView = 'date';
+            this.createMonths(this.currentMonth, this.currentYear);
+            this.cd.markForCheck();
+            this.onMonthChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
+        }
+    }
+    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.onYearChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
+        }
     }
     updateInputfield() {
         let formattedValue = '';
@@ -626,9 +714,14 @@ class Calendar {
             return false;
         }
     }
+    isComparable() {
+        return this.value != null && typeof this.value !== 'string';
+    }
     isMonthSelected(month) {
-        let day = this.value ? (Array.isArray(this.value) ? this.value[0].getDate() : this.value.getDate()) : 1;
-        return this.isSelected({ year: this.currentYear, month: month, day: day, selectable: true });
+        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)
@@ -755,6 +848,12 @@ class Calendar {
             target: this.el.nativeElement
         });
     }
+    getMonthName(index) {
+        return this.config.getTranslation('monthNames')[index];
+    }
+    switchViewButtonDisabled() {
+        return this.numberOfMonths > 1 || this.disabled;
+    }
     onPrevButtonClick(event) {
         this.navigationState = { backward: true, button: true };
         this.navBackward(event);
@@ -896,7 +995,9 @@ class Calendar {
                 break;
             }
             //enter
-            case 13: {
+            //space
+            case 13:
+            case 32: {
                 this.onDateSelect(event, date);
                 event.preventDefault();
                 break;
@@ -944,6 +1045,10 @@ class Calendar {
                     prevCell.tabIndex = '0';
                     prevCell.focus();
                 }
+                else {
+                    this.navigationState = { backward: true };
+                    this.navBackward(event);
+                }
                 event.preventDefault();
                 break;
             }
@@ -955,6 +1060,10 @@ class Calendar {
                     nextCell.tabIndex = '0';
                     nextCell.focus();
                 }
+                else {
+                    this.navigationState = { backward: false };
+                    this.navForward(event);
+                }
                 event.preventDefault();
                 break;
             }
@@ -964,8 +1073,10 @@ class Calendar {
                 event.preventDefault();
                 break;
             }
-            //escape
-            case 27: {
+            //enter
+            //space
+            case 13:
+            case 32: {
                 this.overlayVisible = false;
                 event.preventDefault();
                 break;
@@ -982,6 +1093,77 @@ class Calendar {
                 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 + 2 : cellIndex - 2];
+                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();
+                }
+                else {
+                    this.navigationState = { backward: true };
+                    this.navBackward(event);
+                }
+                event.preventDefault();
+                break;
+            }
+            //right arrow
+            case 39: {
+                cell.tabIndex = '-1';
+                let nextCell = cell.nextElementSibling;
+                if (nextCell) {
+                    nextCell.tabIndex = '0';
+                    nextCell.focus();
+                }
+                else {
+                    this.navigationState = { backward: false };
+                    this.navForward(event);
+                }
+                event.preventDefault();
+                break;
+            }
+            //enter
+            //space
+            case 13:
+            case 32: {
+                this.onYearSelect(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;
+        }
+    }
     navigateToMonth(prev, groupIndex) {
         if (prev) {
             if (this.numberOfMonths === 1 || (groupIndex === 0)) {
@@ -1021,11 +1203,30 @@ class Calendar {
             }
             else {
                 if (this.navigationState.backward) {
-                    let cells = DomHandler.find(this.contentViewChild.nativeElement, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
-                    cell = cells[cells.length - 1];
+                    let cells;
+                    if (this.currentView === 'month') {
+                        cells = DomHandler.find(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)');
+                    }
+                    else if (this.currentView === 'year') {
+                        cells = DomHandler.find(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
+                    }
+                    else {
+                        cells = DomHandler.find(this.contentViewChild.nativeElement, '.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.contentViewChild.nativeElement, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+                    if (this.currentView === 'month') {
+                        cell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)');
+                    }
+                    else if (this.currentView === 'year') {
+                        cell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
+                    }
+                    else {
+                        cell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+                    }
                 }
                 if (cell) {
                     cell.tabIndex = '0';
@@ -1040,7 +1241,7 @@ class Calendar {
     }
     initFocusableCell() {
         let cell;
-        if (this.view === 'month') {
+        if (this.currentView === 'month') {
             let cells = DomHandler.find(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)');
             let selectedCell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month.p-highlight');
             cells.forEach(cell => cell.tabIndex = -1);
@@ -1050,6 +1251,16 @@ class Calendar {
                 disabledCells.forEach(cell => cell.tabIndex = -1);
             }
         }
+        else if (this.currentView === 'year') {
+            let cells = DomHandler.find(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
+            let selectedCell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year.p-highlight');
+            cells.forEach(cell => cell.tabIndex = -1);
+            cell = selectedCell || cells[0];
+            if (cells.length === 0) {
+                let disabledCells = DomHandler.find(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year.p-disabled[tabindex = "0"]');
+                disabledCells.forEach(cell => cell.tabIndex = -1);
+            }
+        }
         else {
             cell = DomHandler.findSingle(this.contentViewChild.nativeElement, 'span.p-highlight');
             if (!cell) {
@@ -1062,6 +1273,11 @@ class Calendar {
         }
         if (cell) {
             cell.tabIndex = '0';
+            if (!this.navigationState || !this.navigationState.button) {
+                setTimeout(() => {
+                    cell.focus();
+                }, 1);
+            }
         }
     }
     trapFocus(event) {
@@ -1453,6 +1669,7 @@ class Calendar {
             case 'visibleTouchUI':
                 if (!this.inline) {
                     this.overlay = event.element;
+                    this.overlay.setAttribute(this.attributeSelector, '');
                     this.appendOverlay();
                     if (this.autoZIndex) {
                         if (this.touchUI)
@@ -1504,11 +1721,20 @@ class Calendar {
         if (this.touchUI) {
             this.enableModality(this.overlay);
         }
-        else {
-            if (this.appendTo)
+        else if (this.overlay) {
+            if (this.appendTo) {
+                if (this.view === 'date') {
+                    this.overlay.style.width = DomHandler.getOuterWidth(this.overlay) + 'px';
+                    this.overlay.style.minWidth = DomHandler.getOuterWidth(this.inputfieldViewChild.nativeElement) + 'px';
+                }
+                else {
+                    this.overlay.style.width = DomHandler.getOuterWidth(this.inputfieldViewChild.nativeElement) + 'px';
+                }
                 DomHandler.absolutePosition(this.overlay, this.inputfieldViewChild.nativeElement);
-            else
+            }
+            else {
                 DomHandler.relativePosition(this.overlay, this.inputfieldViewChild.nativeElement);
+            }
         }
     }
     enableModality(element) {
@@ -1876,11 +2102,53 @@ class Calendar {
         this.hideOverlay();
         this.onClearClick.emit(event);
     }
+    createResponsiveStyle() {
+        if (this.numberOfMonths > 1 && this.responsiveOptions) {
+            if (!this.responsiveStyleElement) {
+                this.responsiveStyleElement = document.createElement('style');
+                this.responsiveStyleElement.type = 'text/css';
+                document.body.appendChild(this.responsiveStyleElement);
+            }
+            let innerHTML = '';
+            if (this.responsiveOptions) {
+                let responsiveOptions = [...this.responsiveOptions]
+                    .filter(o => !!(o.breakpoint && o.numMonths))
+                    .sort((o1, o2) => -1 * o1.breakpoint.localeCompare(o2.breakpoint, undefined, { numeric: true }));
+                for (let i = 0; i < responsiveOptions.length; i++) {
+                    let { breakpoint, numMonths } = responsiveOptions[i];
+                    let styles = `
+                        .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${numMonths}) .p-datepicker-next {
+                            display: inline-flex !important;
+                        }
+                    `;
+                    for (let j = numMonths; j < this.numberOfMonths; j++) {
+                        styles += `
+                            .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${j + 1}) {
+                                display: none !important;
+                            }
+                        `;
+                    }
+                    innerHTML += `
+                        @media screen and (max-width: ${breakpoint}) {
+                            ${styles}
+                        }
+                    `;
+                }
+            }
+            this.responsiveStyleElement.innerHTML = innerHTML;
+        }
+    }
+    destroyResponsiveStyleElement() {
+        if (this.responsiveStyleElement) {
+            this.responsiveStyleElement.remove();
+            this.responsiveStyleElement = null;
+        }
+    }
     bindDocumentClickListener() {
         if (!this.documentClickListener) {
             this.zone.runOutsideAngular(() => {
                 const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
-                this.documentClickListener = this.renderer.listen(documentTarget, 'click', (event) => {
+                this.documentClickListener = this.renderer.listen(documentTarget, 'mousedown', (event) => {
                     if (this.isOutsideClicked(event) && this.overlayVisible) {
                         this.zone.run(() => {
                             this.hideOverlay();
@@ -1939,6 +2207,7 @@ class Calendar {
         }
     }
     onOverlayHide() {
+        this.currentView = this.view;
         if (this.mask) {
             this.destroyMask();
         }
@@ -1958,13 +2227,14 @@ class Calendar {
         if (this.overlay && this.autoZIndex) {
             ZIndexUtils.clear(this.overlay);
         }
+        this.destroyResponsiveStyleElement();
         this.clearTimePickerTimer();
         this.restoreOverlayAppend();
         this.onOverlayHide();
     }
 }
-Calendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Calendar, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: Calendar, selector: "p-calendar", inputs: { style: "style", styleClass: "styleClass", inputStyle: "inputStyle", inputId: "inputId", name: "name", inputStyleClass: "inputStyleClass", placeholder: "placeholder", ariaLabelledBy: "ariaLabelledBy", iconAriaLabel: "iconAriaLabel", disabled: "disabled", dateFormat: "dateFormat", multipleSeparator: "multipleSeparator", rangeSeparator: "rangeSeparator", inline: "inline", showOtherMonths: "showOtherMonths", selectOtherMonths: "selectOtherMonths", showIcon: "showIcon", icon: "icon", appendTo: "appendTo", readonlyInput: "readonlyInput", shortYearCutoff: "shortYearCutoff", monthNavigator: "monthNavigator", yearNavigator: "yearNavigator", hourFormat: "hourFormat", timeOnly: "timeOnly", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond", showSeconds: "showSeconds", required: "required", showOnFocus: "showOnFocus", showWeek: "showWeek", dataType: "dataType", selectionMode: "selectionMode", maxDateCount: "maxDateCount", showButtonBar: "showButtonBar", todayButtonStyleClass: "todayButtonStyleClass", clearButtonStyleClass: "clearButtonStyleClass", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", keepInvalid: "keepInvalid", hideOnDateTimeSelect: "hideOnDateTimeSelect", numberOfMonths: "numberOfMonths", view: "view", touchUI: "touchUI", timeSeparator: "timeSeparator", focusTrap: "focusTrap", firstDayOfWeek: "firstDayOfWeek", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", tabindex: "tabindex", defaultDate: "defaultDate", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", yearRange: "yearRange", showTime: "showTime", locale: "locale" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onShow: "onShow" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focus" }, classAttribute: "p-element p-inputwrapper" }, providers: [CALENDAR_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: `
+Calendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: Calendar, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: Calendar, selector: "p-calendar", inputs: { style: "style", styleClass: "styleClass", inputStyle: "inputStyle", inputId: "inputId", name: "name", inputStyleClass: "inputStyleClass", placeholder: "placeholder", ariaLabelledBy: "ariaLabelledBy", iconAriaLabel: "iconAriaLabel", disabled: "disabled", dateFormat: "dateFormat", multipleSeparator: "multipleSeparator", rangeSeparator: "rangeSeparator", inline: "inline", showOtherMonths: "showOtherMonths", selectOtherMonths: "selectOtherMonths", showIcon: "showIcon", icon: "icon", appendTo: "appendTo", readonlyInput: "readonlyInput", shortYearCutoff: "shortYearCutoff", monthNavigator: "monthNavigator", yearNavigator: "yearNavigator", hourFormat: "hourFormat", timeOnly: "timeOnly", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond", showSeconds: "showSeconds", required: "required", showOnFocus: "showOnFocus", showWeek: "showWeek", dataType: "dataType", selectionMode: "selectionMode", maxDateCount: "maxDateCount", showButtonBar: "showButtonBar", todayButtonStyleClass: "todayButtonStyleClass", clearButtonStyleClass: "clearButtonStyleClass", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", keepInvalid: "keepInvalid", hideOnDateTimeSelect: "hideOnDateTimeSelect", touchUI: "touchUI", timeSeparator: "timeSeparator", focusTrap: "focusTrap", firstDayOfWeek: "firstDayOfWeek", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", tabindex: "tabindex", view: "view", defaultDate: "defaultDate", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", yearRange: "yearRange", showTime: "showTime", responsiveOptions: "responsiveOptions", numberOfMonths: "numberOfMonths", locale: "locale" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onShow: "onShow" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focus" }, classAttribute: "p-element p-inputwrapper" }, providers: [CALENDAR_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: `
         <span #container [ngClass]="{'p-calendar':true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-calendar-disabled':disabled, 'p-focus': focus}" [ngStyle]="style" [class]="styleClass">
             <ng-template [ngIf]="!inline">
                 <input #inputfield type="text" [attr.id]="inputId" [attr.name]="name" [attr.required]="required" [attr.aria-required]="required" [value]="inputFieldValue" (focus)="onInputFocus($event)" (keydown)="onInputKeydown($event)" (click)="onInputClick()" (blur)="onInputBlur($event)"
@@ -1988,20 +2258,22 @@ Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
                                     <span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
                                 </button>
                                 <div class="p-datepicker-title">
-                                    <span class="p-datepicker-month" *ngIf="!monthNavigator && (view !== 'month')">{{getTranslation('monthNames')[month.month]}}</span>
-                                    <select tabindex="0" class="p-datepicker-month" *ngIf="monthNavigator && (view !== 'month') && numberOfMonths === 1" (change)="onMonthDropdownChange($event.target.value)">
-                                        <option [value]="i" *ngFor="let monthName of getTranslation('monthNames');let i = index" [selected]="i === month.month">{{monthName}}</option>
-                                    </select>
-                                    <select tabindex="0" class="p-datepicker-year" *ngIf="yearNavigator && numberOfMonths === 1" (change)="onYearDropdownChange($event.target.value)">
-                                        <option [value]="year" *ngFor="let year of yearOptions" [selected]="year === currentYear">{{year}}</option>
-                                    </select>
-                                    <span class="p-datepicker-year" *ngIf="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
+                                    <button type="button" (click)="switchToMonthView($event)" *ngIf="currentView === 'date'" class="p-datepicker-month p-link" [disabled]="switchViewButtonDisabled()">
+                                        {{getMonthName(month.month)}}
+                                    </button>
+                                    <button type="button" (click)="switchToYearView($event)" *ngIf="currentView !== 'year'" class="p-datepicker-year p-link" [disabled]="switchViewButtonDisabled()">
+                                        {{currentYear}}
+                                    </button>
+                                    <span class="p-datepicker-decade" *ngIf="currentView === 'year'">
+                                        <ng-container *ngIf="!decadeTemplate">{{yearPickerValues()[0]}} - {{yearPickerValues()[yearPickerValues().length - 1]}}</ng-container>
+                                        <ng-container *ngTemplateOutlet="decadeTemplate; context: {$implicit: yearPickerValues}"></ng-container>
+                                    </span>
                                 </div>
-                                <button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-next p-link" (click)="onNextButtonClick($event)" *ngIf="numberOfMonths === 1 ? true : (i === numberOfMonths -1)" type="button" pRipple>
+                                <button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-next p-link" (click)="onNextButtonClick($event)" [style.display]="numberOfMonths === 1 ? 'inline-flex' : (i === numberOfMonths -1) ? 'inline-flex' : 'none'" type="button" pRipple>
                                     <span class="p-datepicker-next-icon pi pi-chevron-right"></span>
                                 </button>
                             </div>
-                            <div class="p-datepicker-calendar-container" *ngIf="view ==='date'">
+                            <div class="p-datepicker-calendar-container" *ngIf="currentView ==='date'">
                                 <table class="p-datepicker-calendar">
                                     <thead>
                                         <tr>
@@ -2035,19 +2307,24 @@ Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
                             </div>
                         </div>
                     </div>
-                    <div class="p-monthpicker" *ngIf="view === 'month'">
-                        <span *ngFor="let m of monthPickerValues; let i = index" (click)="onMonthSelect($event, i)" (keydown)="onMonthCellKeydown($event,i)" class="p-monthpicker-month" [ngClass]="{'p-highlight': isMonthSelected(i), 'p-disabled':!isSelectable(1, i, this.currentYear, false)}" pRipple>
+                    <div class="p-monthpicker" *ngIf="currentView === 'month'">
+                        <span *ngFor="let m of monthPickerValues(); let i = index" (click)="onMonthSelect($event, i)" (keydown)="onMonthCellKeydown($event,i)" class="p-monthpicker-month" [ngClass]="{'p-highlight': isMonthSelected(i), 'p-disabled':!isSelectable(1, i, this.currentYear, false)}" pRipple>
                             {{m}}
                         </span>
                     </div>
+                    <div class="p-yearpicker" *ngIf="currentView === 'year'">
+                        <span *ngFor="let y of yearPickerValues()" (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event,y)" class="p-yearpicker-year" [ngClass]="{'p-highlight': isYearSelected(y)}" pRipple>
+                            {{y}}
+                        </span>
+                    </div>
                 </ng-container>
                 <div class="p-timepicker" *ngIf="showTime||timeOnly">
                     <div class="p-hour-picker">
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementHour($event)" (keydown.space)="incrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
                             <span class="pi pi-chevron-up"></span>
                         </button>
                         <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{currentHour}}</span>
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementHour($event)" (keydown.space)="decrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
@@ -2055,11 +2332,11 @@ Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
                         <span>{{timeSeparator}}</span>
                     </div>
                     <div class="p-minute-picker">
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementMinute($event)" (keydown.space)="incrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
                             <span class="pi pi-chevron-up"></span>
                         </button>
                         <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{currentMinute}}</span>
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementMinute($event)" (keydown.space)="decrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
@@ -2067,11 +2344,11 @@ Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
                         <span>{{timeSeparator}}</span>
                     </div>
                     <div class="p-second-picker" *ngIf="showSeconds">
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementSecond($event)" (keydown.space)="incrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
                             <span class="pi pi-chevron-up"></span>
                         </button>
                         <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{currentSecond}}</span>
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementSecond($event)" (keydown.space)="decrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
@@ -2093,7 +2370,7 @@ Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
                 <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
             </div>
         </span>
-    `, isInline: true, styles: [".p-calendar{position:relative;display:inline-flex}.p-calendar .p-inputtext{flex:1 1 auto;width:1%}.p-calendar-w-btn .p-inputtext{border-top-right-radius:0;border-bottom-right-radius:0}.p-calendar-w-btn .p-datepicker-trigger{border-top-left-radius:0;border-bottom-left-radius:0}.p-fluid .p-calendar{display:flex}.p-fluid .p-calendar .p-inputtext{width:1%}.p-calendar .p-datepicker{min-width:100%}.p-datepicker{width:auto;position:absolute;top:0;left:0}.p-datepicker-inline{position:static}.p-datepicker-header{display:flex;align-items:center;justify-content:space-between}.p-datepicker-header .p-datepicker-title{margin:0 auto}.p-datepicker-prev,.p-datepicker-next{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-datepicker-multiple-month .p-datepicker-group-container{display:flex}.p-datepicker table{width:100%;border-collapse:collapse}.p-datepicker td>span{display:flex;justify-content:center;align-items:center;cursor:pointer;margin:0 auto;overflow:hidden;position:relative}.p-monthpicker-month{width:33.3%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.p-datepicker-buttonbar{display:flex;justify-content:space-between;align-items:center}.p-timepicker{display:flex;justify-content:center;align-items:center}.p-timepicker button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.p-timepicker>div{display:flex;align-items:center;flex-direction:column}.p-datepicker-touch-ui,.p-calendar .p-datepicker-touch-ui{position:fixed;top:50%;left:50%;min-width:80vw;transform:translate(-50%,-50%)}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i4.Ripple, selector: "[pRipple]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+    `, isInline: true, styles: [".p-calendar{position:relative;display:inline-flex;max-width:100%}.p-calendar .p-inputtext{flex:1 1 auto;width:1%}.p-calendar-w-btn .p-inputtext{border-top-right-radius:0;border-bottom-right-radius:0}.p-calendar-w-btn .p-datepicker-trigger{border-top-left-radius:0;border-bottom-left-radius:0}.p-fluid .p-calendar{display:flex}.p-fluid .p-calendar .p-inputtext{width:1%}.p-calendar .p-datepicker{min-width:100%}.p-datepicker{width:auto;position:absolute;top:0;left:0}.p-datepicker-inline{display:inline-block;position:static;overflow-x:auto}.p-datepicker-header{display:flex;align-items:center;justify-content:space-between}.p-datepicker-header .p-datepicker-title{margin:0 auto}.p-datepicker-prev,.p-datepicker-next{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group{flex:1 1 auto}.p-datepicker-multiple-month .p-datepicker-group-container{display:flex}.p-datepicker table{width:100%;border-collapse:collapse}.p-datepicker td>span{display:flex;justify-content:center;align-items:center;cursor:pointer;margin:0 auto;overflow:hidden;position:relative}.p-monthpicker-month{width:33.3%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.p-datepicker-buttonbar{display:flex;justify-content:space-between;align-items:center}.p-timepicker{display:flex;justify-content:center;align-items:center}.p-timepicker button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.p-timepicker>div{display:flex;align-items:center;flex-direction:column}.p-datepicker-touch-ui,.p-calendar .p-datepicker-touch-ui{position:fixed;top:50%;left:50%;min-width:80vw;transform:translate(-50%,-50%)}.p-yearpicker-year{width:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i4.Ripple, selector: "[pRipple]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
         trigger('overlayAnimation', [
             state('visibleTouchUI', style({
                 transform: 'translate(-50%,-50%)',
@@ -2118,7 +2395,7 @@ Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
             ])
         ])
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Calendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: Calendar, decorators: [{
             type: Component,
             args: [{ selector: 'p-calendar', template: `
         <span #container [ngClass]="{'p-calendar':true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-calendar-disabled':disabled, 'p-focus': focus}" [ngStyle]="style" [class]="styleClass">
@@ -2144,20 +2421,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                                     <span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
                                 </button>
                                 <div class="p-datepicker-title">
-                                    <span class="p-datepicker-month" *ngIf="!monthNavigator && (view !== 'month')">{{getTranslation('monthNames')[month.month]}}</span>
-                                    <select tabindex="0" class="p-datepicker-month" *ngIf="monthNavigator && (view !== 'month') && numberOfMonths === 1" (change)="onMonthDropdownChange($event.target.value)">
-                                        <option [value]="i" *ngFor="let monthName of getTranslation('monthNames');let i = index" [selected]="i === month.month">{{monthName}}</option>
-                                    </select>
-                                    <select tabindex="0" class="p-datepicker-year" *ngIf="yearNavigator && numberOfMonths === 1" (change)="onYearDropdownChange($event.target.value)">
-                                        <option [value]="year" *ngFor="let year of yearOptions" [selected]="year === currentYear">{{year}}</option>
-                                    </select>
-                                    <span class="p-datepicker-year" *ngIf="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
+                                    <button type="button" (click)="switchToMonthView($event)" *ngIf="currentView === 'date'" class="p-datepicker-month p-link" [disabled]="switchViewButtonDisabled()">
+                                        {{getMonthName(month.month)}}
+                                    </button>
+                                    <button type="button" (click)="switchToYearView($event)" *ngIf="currentView !== 'year'" class="p-datepicker-year p-link" [disabled]="switchViewButtonDisabled()">
+                                        {{currentYear}}
+                                    </button>
+                                    <span class="p-datepicker-decade" *ngIf="currentView === 'year'">
+                                        <ng-container *ngIf="!decadeTemplate">{{yearPickerValues()[0]}} - {{yearPickerValues()[yearPickerValues().length - 1]}}</ng-container>
+                                        <ng-container *ngTemplateOutlet="decadeTemplate; context: {$implicit: yearPickerValues}"></ng-container>
+                                    </span>
                                 </div>
-                                <button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-next p-link" (click)="onNextButtonClick($event)" *ngIf="numberOfMonths === 1 ? true : (i === numberOfMonths -1)" type="button" pRipple>
+                                <button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-next p-link" (click)="onNextButtonClick($event)" [style.display]="numberOfMonths === 1 ? 'inline-flex' : (i === numberOfMonths -1) ? 'inline-flex' : 'none'" type="button" pRipple>
                                     <span class="p-datepicker-next-icon pi pi-chevron-right"></span>
                                 </button>
                             </div>
-                            <div class="p-datepicker-calendar-container" *ngIf="view ==='date'">
+                            <div class="p-datepicker-calendar-container" *ngIf="currentView ==='date'">
                                 <table class="p-datepicker-calendar">
                                     <thead>
                                         <tr>
@@ -2191,19 +2470,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                             </div>
                         </div>
                     </div>
-                    <div class="p-monthpicker" *ngIf="view === 'month'">
-                        <span *ngFor="let m of monthPickerValues; let i = index" (click)="onMonthSelect($event, i)" (keydown)="onMonthCellKeydown($event,i)" class="p-monthpicker-month" [ngClass]="{'p-highlight': isMonthSelected(i), 'p-disabled':!isSelectable(1, i, this.currentYear, false)}" pRipple>
+                    <div class="p-monthpicker" *ngIf="currentView === 'month'">
+                        <span *ngFor="let m of monthPickerValues(); let i = index" (click)="onMonthSelect($event, i)" (keydown)="onMonthCellKeydown($event,i)" class="p-monthpicker-month" [ngClass]="{'p-highlight': isMonthSelected(i), 'p-disabled':!isSelectable(1, i, this.currentYear, false)}" pRipple>
                             {{m}}
                         </span>
                     </div>
+                    <div class="p-yearpicker" *ngIf="currentView === 'year'">
+                        <span *ngFor="let y of yearPickerValues()" (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event,y)" class="p-yearpicker-year" [ngClass]="{'p-highlight': isYearSelected(y)}" pRipple>
+                            {{y}}
+                        </span>
+                    </div>
                 </ng-container>
                 <div class="p-timepicker" *ngIf="showTime||timeOnly">
                     <div class="p-hour-picker">
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementHour($event)" (keydown.space)="incrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
                             <span class="pi pi-chevron-up"></span>
                         </button>
                         <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{currentHour}}</span>
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementHour($event)" (keydown.space)="decrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
@@ -2211,11 +2495,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                         <span>{{timeSeparator}}</span>
                     </div>
                     <div class="p-minute-picker">
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementMinute($event)" (keydown.space)="incrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
                             <span class="pi pi-chevron-up"></span>
                         </button>
                         <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{currentMinute}}</span>
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementMinute($event)" (keydown.space)="decrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
@@ -2223,11 +2507,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                         <span>{{timeSeparator}}</span>
                     </div>
                     <div class="p-second-picker" *ngIf="showSeconds">
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementSecond($event)" (keydown.space)="incrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
                             <span class="pi pi-chevron-up"></span>
                         </button>
                         <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{currentSecond}}</span>
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementSecond($event)" (keydown.space)="decrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
@@ -2277,7 +2561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                         'class': 'p-element p-inputwrapper',
                         '[class.p-inputwrapper-filled]': 'filled',
                         '[class.p-inputwrapper-focus]': 'focus'
-                    }, providers: [CALENDAR_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-calendar{position:relative;display:inline-flex}.p-calendar .p-inputtext{flex:1 1 auto;width:1%}.p-calendar-w-btn .p-inputtext{border-top-right-radius:0;border-bottom-right-radius:0}.p-calendar-w-btn .p-datepicker-trigger{border-top-left-radius:0;border-bottom-left-radius:0}.p-fluid .p-calendar{display:flex}.p-fluid .p-calendar .p-inputtext{width:1%}.p-calendar .p-datepicker{min-width:100%}.p-datepicker{width:auto;position:absolute;top:0;left:0}.p-datepicker-inline{position:static}.p-datepicker-header{display:flex;align-items:center;justify-content:space-between}.p-datepicker-header .p-datepicker-title{margin:0 auto}.p-datepicker-prev,.p-datepicker-next{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-datepicker-multiple-month .p-datepicker-group-container{display:flex}.p-datepicker table{width:100%;border-collapse:collapse}.p-datepicker td>span{display:flex;justify-content:center;align-items:center;cursor:pointer;margin:0 auto;overflow:hidden;position:relative}.p-monthpicker-month{width:33.3%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.p-datepicker-buttonbar{display:flex;justify-content:space-between;align-items:center}.p-timepicker{display:flex;justify-content:center;align-items:center}.p-timepicker button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.p-timepicker>div{display:flex;align-items:center;flex-direction:column}.p-datepicker-touch-ui,.p-calendar .p-datepicker-touch-ui{position:fixed;top:50%;left:50%;min-width:80vw;transform:translate(-50%,-50%)}\n"] }]
+                    }, providers: [CALENDAR_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-calendar{position:relative;display:inline-flex;max-width:100%}.p-calendar .p-inputtext{flex:1 1 auto;width:1%}.p-calendar-w-btn .p-inputtext{border-top-right-radius:0;border-bottom-right-radius:0}.p-calendar-w-btn .p-datepicker-trigger{border-top-left-radius:0;border-bottom-left-radius:0}.p-fluid .p-calendar{display:flex}.p-fluid .p-calendar .p-inputtext{width:1%}.p-calendar .p-datepicker{min-width:100%}.p-datepicker{width:auto;position:absolute;top:0;left:0}.p-datepicker-inline{display:inline-block;position:static;overflow-x:auto}.p-datepicker-header{display:flex;align-items:center;justify-content:space-between}.p-datepicker-header .p-datepicker-title{margin:0 auto}.p-datepicker-prev,.p-datepicker-next{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group{flex:1 1 auto}.p-datepicker-multiple-month .p-datepicker-group-container{display:flex}.p-datepicker table{width:100%;border-collapse:collapse}.p-datepicker td>span{display:flex;justify-content:center;align-items:center;cursor:pointer;margin:0 auto;overflow:hidden;position:relative}.p-monthpicker-month{width:33.3%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.p-datepicker-buttonbar{display:flex;justify-content:space-between;align-items:center}.p-timepicker{display:flex;justify-content:center;align-items:center}.p-timepicker button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.p-timepicker>div{display:flex;align-items:center;flex-direction:column}.p-datepicker-touch-ui,.p-calendar .p-datepicker-touch-ui{position:fixed;top:50%;left:50%;min-width:80vw;transform:translate(-50%,-50%)}.p-yearpicker-year{width:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.PrimeNGConfig }, { type: i1.OverlayService }]; }, propDecorators: { style: [{
                 type: Input
             }], styleClass: [{
@@ -2366,10 +2650,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                 type: Input
             }], hideOnDateTimeSelect: [{
                 type: Input
-            }], numberOfMonths: [{
-                type: Input
-            }], view: [{
-                type: Input
             }], touchUI: [{
                 type: Input
             }], timeSeparator: [{
@@ -2418,6 +2698,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
             }], content: [{
                 type: ViewChild,
                 args: ['contentWrapper', { static: false }]
+            }], view: [{
+                type: Input
             }], defaultDate: [{
                 type: Input
             }], minDate: [{
@@ -2432,15 +2714,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                 type: Input
             }], showTime: [{
                 type: Input
+            }], responsiveOptions: [{
+                type: Input
+            }], numberOfMonths: [{
+                type: Input
             }], locale: [{
                 type: Input
             }] } });
 class CalendarModule {
 }
-CalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CalendarModule, declarations: [Calendar], imports: [CommonModule, ButtonModule, SharedModule, RippleModule], exports: [Calendar, ButtonModule, SharedModule] });
-CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CalendarModule, imports: [[CommonModule, ButtonModule, SharedModule, RippleModule], ButtonModule, SharedModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CalendarModule, decorators: [{
+CalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: CalendarModule, declarations: [Calendar], imports: [CommonModule, ButtonModule, SharedModule, RippleModule], exports: [Calendar, ButtonModule, SharedModule] });
+CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: CalendarModule, imports: [[CommonModule, ButtonModule, SharedModule, RippleModule], ButtonModule, SharedModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: CalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ButtonModule, SharedModule, RippleModule],