primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-datepicker.mjs

@@ -1,9 +1,8 @@
 export * from 'primeng/types/datepicker';
-import { trigger, state, transition, style as style$2, animate } from '@angular/animations';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, InjectionToken, inject, input, EventEmitter, computed, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, forwardRef, InjectionToken, inject, input, computed, EventEmitter, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { uuid, getOuterWidth, isDate, findSingle, getFocusableElements, hasClass, getIndex, find, isNotEmpty, addStyle, appendChild, absolutePosition, relativePosition, addClass, setAttribute, isTouchDevice } from '@primeuix/utils';
 import * as i1 from 'primeng/api';
@@ -17,18 +16,20 @@ import { Button } from 'primeng/button';
 import { blockBodyScroll, unblockBodyScroll, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon } from 'primeng/icons';
 import { InputText } from 'primeng/inputtext';
+import * as i4 from 'primeng/motion';
+import { MotionModule } from 'primeng/motion';
 import { Ripple } from 'primeng/ripple';
 import { ZIndexUtils } from 'primeng/utils';
 import { style as style$1 } from '@primeuix/styles/datepicker';
 import { BaseStyle } from 'primeng/base';
 
 const style = /*css*/ `
-    ${style$1}
+${style$1}
 
-    /* For PrimeNG */
-    .p-datepicker.ng-invalid.ng-dirty .p-inputtext {
-        border-color: dt('inputtext.invalid.border.color');
-    }
+/* For PrimeNG */
+.p-datepicker.ng-invalid.ng-dirty .p-inputtext {
+    border-color: dt('inputtext.invalid.border.color');
+}
 `;
 const inlineStyles = {
     root: () => ({ position: 'relative' })
@@ -130,10 +131,10 @@ class DatePickerStyle extends BaseStyle {
     style = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatePickerStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatePickerStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DatePickerStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DatePickerStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatePickerStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DatePickerStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -561,11 +562,13 @@ class DatePicker extends BaseInput {
     /**
      * Transition options of the show animation.
      * @group Props
+     * @deprecated since v21.0.0, use `motionOptions` instead.
      */
     showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
     /**
      * Transition options of the hide animation.
      * @group Props
+     * @deprecated since v21.0.0, use `motionOptions` instead.
      */
     hideTransitionOptions = '.1s linear';
     /**
@@ -707,7 +710,18 @@ class DatePicker extends BaseInput {
      * @defaultValue 'self'
      * @group Props
      */
-    appendTo = input(undefined, ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
+    appendTo = input(undefined, { ...(ngDevMode ? { debugName: "appendTo" } : {}) });
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, { ...(ngDevMode ? { debugName: "motionOptions" } : {}) });
+    computedMotionOptions = computed(() => {
+        return {
+            ...this.ptm('motion'),
+            ...this.motionOptions()
+        };
+    }, { ...(ngDevMode ? { debugName: "computedMotionOptions" } : {}) });
     /**
      * Callback to invoke on focus of input field.
      * @param {Event} event - browser event.
@@ -722,7 +736,7 @@ class DatePicker extends BaseInput {
     onBlur = new EventEmitter();
     /**
      * Callback to invoke when date panel closed.
-     * @param {Event} event - Mouse event
+     * @param {HTMLDivElement} element - The element being transitioned/animated.
      * @group Emits
      */
     onClose = new EventEmitter();
@@ -774,13 +788,14 @@ class DatePicker extends BaseInput {
     onClickOutside = new EventEmitter();
     /**
      * Callback to invoke when datepicker panel is shown.
+     * @param {HTMLDivElement} element - The element being transitioned/animated.
      * @group Emits
      */
     onShow = new EventEmitter();
     inputfieldViewChild;
     set content(content) {
         this.contentViewChild = content;
-        if (this.contentViewChild) {
+        if (this.contentViewChild && this.overlay) {
             if (this.isMonthNavigate) {
                 Promise.resolve(null).then(() => this.updateFocus());
                 this.isMonthNavigate = false;
@@ -810,7 +825,8 @@ class DatePicker extends BaseInput {
     overlay;
     responsiveStyleElement;
     overlayVisible;
-    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...(ngDevMode ? [{ debugName: "$appendTo" }] : []));
+    overlayMinWidth;
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), { ...(ngDevMode ? { debugName: "$appendTo" } : {}) });
     calendarElement;
     timePickerTimer;
     documentClickListener;
@@ -831,6 +847,7 @@ class DatePicker extends BaseInput {
     }
     /**
      * Custom template for date cells.
+     * @param {DatePickerDateTemplateContext} context - date template context.
      * @group Templates
      */
     dateTemplate;
@@ -846,11 +863,13 @@ class DatePicker extends BaseInput {
     footerTemplate;
     /**
      * Custom template for disabled date cells.
+     * @param {DatePickerDisabledDateTemplateContext} context - disabled date template context.
      * @group Templates
      */
     disabledDateTemplate;
     /**
      * Custom template for decade view.
+     * @param {DatePickerDecadeTemplateContext} context - decade template context.
      * @group Templates
      */
     decadeTemplate;
@@ -886,11 +905,13 @@ class DatePicker extends BaseInput {
     incrementIconTemplate;
     /**
      * Custom template for input icon.
+     * @param {DatePickerInputIconTemplateContext} context - input icon template context.
      * @group Templates
      */
     inputIconTemplate;
     /**
      * Custom template for button bar.
+     * @param {DatePickerButtonBarTemplateContext} context - button bar template context.
      * @group Templates
      */
     buttonBarTemplate;
@@ -972,7 +993,9 @@ class DatePicker extends BaseInput {
     onAfterViewInit() {
         if (this.inline) {
             this.contentViewChild && this.contentViewChild.nativeElement.setAttribute(this.attributeSelector, '');
-            if (!this.$disabled() && !this.inline) {
+        }
+        else {
+            if (!this.$disabled() && this.overlay) {
                 this.initFocusableCell();
                 if (this.numberOfMonths === 1) {
                     if (this.contentViewChild && this.contentViewChild.nativeElement) {
@@ -2655,6 +2678,7 @@ class DatePicker extends BaseInput {
             if (!this.touchUI) {
                 this.preventFocus = true;
             }
+            this.overlayMinWidth = this.el.nativeElement.offsetWidth;
             this.overlayVisible = true;
         }
     }
@@ -2678,49 +2702,25 @@ class DatePicker extends BaseInput {
             }
         }
     }
-    onOverlayAnimationStart(event) {
-        switch (event.toState) {
-            case 'visible':
-            case 'visibleTouchUI':
-                if (!this.inline) {
-                    this.overlay = event.element;
-                    this.$attrSelector && this.overlay.setAttribute(this.$attrSelector, '');
-                    const styles = !this.inline ? { position: 'absolute', top: '0' } : undefined;
-                    addStyle(this.overlay, styles || {});
-                    this.appendOverlay();
-                    this.updateFocus();
-                    if (this.autoZIndex) {
-                        if (this.touchUI)
-                            ZIndexUtils.set('modal', this.overlay, this.baseZIndex || this.config.zIndex.modal);
-                        else
-                            ZIndexUtils.set('overlay', this.overlay, this.baseZIndex || this.config.zIndex.overlay);
-                    }
-                    this.alignOverlay();
-                    this.onShow.emit(event);
-                }
-                break;
-            case 'void':
-                this.onOverlayHide();
-                this.onClose.emit(event);
-                break;
-        }
+    onOverlayBeforeEnter(event) {
+        this.overlay = event.element;
+        this.$attrSelector && this.overlay.setAttribute(this.$attrSelector, '');
+        const styles = !this.inline ? { position: 'absolute', top: '0', minWidth: `${this.overlayMinWidth}px` } : undefined;
+        addStyle(this.overlay, styles || {});
+        this.appendOverlay();
+        this.alignOverlay();
+        this.setZIndex();
+        this.updateFocus();
+        this.bindListeners();
+        this.onShow.emit(event.element);
     }
-    onOverlayAnimationDone(event) {
-        switch (event.toState) {
-            case 'visible':
-            case 'visibleTouchUI':
-                if (!this.inline) {
-                    this.bindDocumentClickListener();
-                    this.bindDocumentResizeListener();
-                    this.bindScrollListener();
-                }
-                break;
-            case 'void':
-                if (this.autoZIndex) {
-                    ZIndexUtils.clear(event.element);
-                }
-                break;
+    onOverlayAfterLeave(event) {
+        if (this.autoZIndex) {
+            ZIndexUtils.clear(event.element);
         }
+        this.restoreOverlayAppend();
+        this.onOverlayHide();
+        this.onClose.emit(event.element);
     }
     appendOverlay() {
         if (this.$appendTo() && this.$appendTo() !== 'self') {
@@ -2740,19 +2740,6 @@ class DatePicker extends BaseInput {
             this.enableModality(this.overlay);
         }
         else if (this.overlay) {
-            if (this.view === 'date') {
-                if (!this.overlay.style.width) {
-                    this.overlay.style.width = getOuterWidth(this.overlay) + 'px';
-                }
-                if (!this.overlay.style.minWidth) {
-                    this.overlay.style.minWidth = getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px';
-                }
-            }
-            else {
-                if (!this.overlay.style.width) {
-                    this.overlay.style.width = getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px';
-                }
-            }
             if (this.$appendTo() && this.$appendTo() !== 'self') {
                 absolutePosition(this.overlay, this.inputfieldViewChild?.nativeElement);
             }
@@ -2761,11 +2748,24 @@ class DatePicker extends BaseInput {
             }
         }
     }
+    bindListeners() {
+        this.bindDocumentClickListener();
+        this.bindDocumentResizeListener();
+        this.bindScrollListener();
+    }
+    setZIndex() {
+        if (this.autoZIndex) {
+            if (this.touchUI)
+                ZIndexUtils.set('modal', this.overlay, this.baseZIndex || this.config.zIndex.modal);
+            else
+                ZIndexUtils.set('overlay', this.overlay, this.baseZIndex || this.config.zIndex.overlay);
+        }
+    }
     enableModality(element) {
         if (!this.mask && this.touchUI) {
             this.mask = this.renderer.createElement('div');
             this.renderer.setStyle(this.mask, 'zIndex', String(parseInt(element.style.zIndex) - 1));
-            let maskStyleClass = 'p-overlay-mask p-datepicker-mask p-datepicker-mask-scrollblocker p-overlay-mask p-overlay-mask-enter';
+            let maskStyleClass = 'p-overlay-mask p-datepicker-mask p-datepicker-mask-scrollblocker p-overlay-mask p-overlay-mask-enter-active';
             addClass(this.mask, maskStyleClass);
             this.maskClickListener = this.renderer.listen(this.mask, 'click', (event) => {
                 this.disableModality();
@@ -3276,8 +3276,8 @@ class DatePicker extends BaseInput {
         this.restoreOverlayAppend();
         this.onOverlayHide();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatePicker, deps: [{ token: i0.NgZone }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DatePicker, isStandalone: true, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: { iconDisplay: { classPropertyName: "iconDisplay", publicName: "iconDisplay", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, iconAriaLabel: { classPropertyName: "iconAriaLabel", publicName: "iconAriaLabel", isSignal: false, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: false, isRequired: false, transformFunction: null }, multipleSeparator: { classPropertyName: "multipleSeparator", publicName: "multipleSeparator", isSignal: false, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", isSignal: false, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showOtherMonths: { classPropertyName: "showOtherMonths", publicName: "showOtherMonths", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectOtherMonths: { classPropertyName: "selectOtherMonths", publicName: "selectOtherMonths", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, shortYearCutoff: { classPropertyName: "shortYearCutoff", publicName: "shortYearCutoff", isSignal: false, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: false, isRequired: false, transformFunction: null }, timeOnly: { classPropertyName: "timeOnly", publicName: "timeOnly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: false, isRequired: false, transformFunction: numberAttribute }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: false, isRequired: false, transformFunction: numberAttribute }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showOnFocus: { classPropertyName: "showOnFocus", publicName: "showOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showWeek: { classPropertyName: "showWeek", publicName: "showWeek", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, startWeekFromFirstDayOfYear: { classPropertyName: "startWeekFromFirstDayOfYear", publicName: "startWeekFromFirstDayOfYear", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, maxDateCount: { classPropertyName: "maxDateCount", publicName: "maxDateCount", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showButtonBar: { classPropertyName: "showButtonBar", publicName: "showButtonBar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, todayButtonStyleClass: { classPropertyName: "todayButtonStyleClass", publicName: "todayButtonStyleClass", isSignal: false, isRequired: false, transformFunction: null }, clearButtonStyleClass: { classPropertyName: "clearButtonStyleClass", publicName: "clearButtonStyleClass", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: false, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: false, isRequired: false, transformFunction: null }, keepInvalid: { classPropertyName: "keepInvalid", publicName: "keepInvalid", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hideOnDateTimeSelect: { classPropertyName: "hideOnDateTimeSelect", publicName: "hideOnDateTimeSelect", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, touchUI: { classPropertyName: "touchUI", publicName: "touchUI", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, timeSeparator: { classPropertyName: "timeSeparator", publicName: "timeSeparator", isSignal: false, isRequired: false, transformFunction: null }, focusTrap: { classPropertyName: "focusTrap", publicName: "focusTrap", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: false, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: false, isRequired: false, transformFunction: null }, responsiveOptions: { classPropertyName: "responsiveOptions", publicName: "responsiveOptions", isSignal: false, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: false, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, defaultDate: { classPropertyName: "defaultDate", publicName: "defaultDate", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onClear: "onClear", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onShow: "onShow" }, host: { properties: { "class": "cn(cx('root'), styleClass)", "style": "sx('root')" } }, providers: [DATEPICKER_VALUE_ACCESSOR, DatePickerStyle, { provide: DATEPICKER_INSTANCE, useExisting: DatePicker }, { provide: PARENT_INSTANCE, useExisting: DatePicker }], queries: [{ propertyName: "dateTemplate", first: true, predicate: ["date"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "disabledDateTemplate", first: true, predicate: ["disabledDate"] }, { propertyName: "decadeTemplate", first: true, predicate: ["decade"] }, { propertyName: "previousIconTemplate", first: true, predicate: ["previousicon"] }, { propertyName: "nextIconTemplate", first: true, predicate: ["nexticon"] }, { propertyName: "triggerIconTemplate", first: true, predicate: ["triggericon"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "decrementIconTemplate", first: true, predicate: ["decrementicon"] }, { propertyName: "incrementIconTemplate", first: true, predicate: ["incrementicon"] }, { propertyName: "inputIconTemplate", first: true, predicate: ["inputicon"] }, { propertyName: "buttonBarTemplate", first: true, predicate: ["buttonbar"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DatePicker, deps: [{ token: i0.NgZone }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DatePicker, isStandalone: true, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: { iconDisplay: { classPropertyName: "iconDisplay", publicName: "iconDisplay", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, iconAriaLabel: { classPropertyName: "iconAriaLabel", publicName: "iconAriaLabel", isSignal: false, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: false, isRequired: false, transformFunction: null }, multipleSeparator: { classPropertyName: "multipleSeparator", publicName: "multipleSeparator", isSignal: false, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", isSignal: false, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showOtherMonths: { classPropertyName: "showOtherMonths", publicName: "showOtherMonths", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectOtherMonths: { classPropertyName: "selectOtherMonths", publicName: "selectOtherMonths", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, shortYearCutoff: { classPropertyName: "shortYearCutoff", publicName: "shortYearCutoff", isSignal: false, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: false, isRequired: false, transformFunction: null }, timeOnly: { classPropertyName: "timeOnly", publicName: "timeOnly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: false, isRequired: false, transformFunction: numberAttribute }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: false, isRequired: false, transformFunction: numberAttribute }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showOnFocus: { classPropertyName: "showOnFocus", publicName: "showOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showWeek: { classPropertyName: "showWeek", publicName: "showWeek", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, startWeekFromFirstDayOfYear: { classPropertyName: "startWeekFromFirstDayOfYear", publicName: "startWeekFromFirstDayOfYear", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, maxDateCount: { classPropertyName: "maxDateCount", publicName: "maxDateCount", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showButtonBar: { classPropertyName: "showButtonBar", publicName: "showButtonBar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, todayButtonStyleClass: { classPropertyName: "todayButtonStyleClass", publicName: "todayButtonStyleClass", isSignal: false, isRequired: false, transformFunction: null }, clearButtonStyleClass: { classPropertyName: "clearButtonStyleClass", publicName: "clearButtonStyleClass", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: false, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: false, isRequired: false, transformFunction: null }, keepInvalid: { classPropertyName: "keepInvalid", publicName: "keepInvalid", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hideOnDateTimeSelect: { classPropertyName: "hideOnDateTimeSelect", publicName: "hideOnDateTimeSelect", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, touchUI: { classPropertyName: "touchUI", publicName: "touchUI", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, timeSeparator: { classPropertyName: "timeSeparator", publicName: "timeSeparator", isSignal: false, isRequired: false, transformFunction: null }, focusTrap: { classPropertyName: "focusTrap", publicName: "focusTrap", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: false, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: false, isRequired: false, transformFunction: null }, responsiveOptions: { classPropertyName: "responsiveOptions", publicName: "responsiveOptions", isSignal: false, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: false, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, defaultDate: { classPropertyName: "defaultDate", publicName: "defaultDate", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onClear: "onClear", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onShow: "onShow" }, host: { properties: { "class": "cn(cx('root'), styleClass)", "style": "sx('root')" } }, providers: [DATEPICKER_VALUE_ACCESSOR, DatePickerStyle, { provide: DATEPICKER_INSTANCE, useExisting: DatePicker }, { provide: PARENT_INSTANCE, useExisting: DatePicker }], queries: [{ propertyName: "dateTemplate", first: true, predicate: ["date"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "disabledDateTemplate", first: true, predicate: ["disabledDate"] }, { propertyName: "decadeTemplate", first: true, predicate: ["decade"] }, { propertyName: "previousIconTemplate", first: true, predicate: ["previousicon"] }, { propertyName: "nextIconTemplate", first: true, predicate: ["nexticon"] }, { propertyName: "triggerIconTemplate", first: true, predicate: ["triggericon"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "decrementIconTemplate", first: true, predicate: ["decrementicon"] }, { propertyName: "incrementIconTemplate", first: true, predicate: ["incrementicon"] }, { propertyName: "inputIconTemplate", first: true, predicate: ["inputicon"] }, { propertyName: "buttonBarTemplate", first: true, predicate: ["buttonbar"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: `
         <ng-template [ngIf]="!inline">
             <input
                 #inputfield
@@ -3315,6 +3315,7 @@ class DatePicker extends BaseInput {
                 [fluid]="hasFluid"
                 [invalid]="invalid()"
                 [pt]="ptm('pcInputText')"
+                [unstyled]="unstyled()"
             />
             <ng-container *ngIf="showClear && !$disabled() && inputfieldViewChild?.nativeElement?.value">
                 <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" [pBind]="ptm('inputIcon')" (click)="clear()" />
@@ -3342,424 +3343,402 @@ class DatePicker extends BaseInput {
                 </ng-container>
             </button>
             <ng-container *ngIf="iconDisplay === 'input' && showIcon">
-                <span [class]="cx('inputIconContainer')" [pBind]="ptm('inputIconContainer')">
+                <span [class]="cx('inputIconContainer')" [pBind]="ptm('inputIconContainer')" [attr.data-p]="inputIconDataP">
                     <svg data-p-icon="calendar" (click)="onButtonClick($event)" *ngIf="!inputIconTemplate && !_inputIconTemplate" [class]="cx('inputIcon')" [pBind]="ptm('inputIcon')" />
 
                     <ng-container *ngTemplateOutlet="inputIconTemplate || _inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
                 </span>
             </ng-container>
         </ng-template>
-        <div
-            #contentWrapper
-            [attr.id]="panelId"
-            [ngStyle]="panelStyle"
-            [class]="cn(cx('panel'), panelStyleClass)"
-            [@overlayAnimation]="{
-                value: 'visible',
-                params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-            }"
-            [attr.aria-label]="getTranslation('chooseDate')"
-            [attr.role]="inline ? null : 'dialog'"
-            [attr.aria-modal]="inline ? null : 'true'"
-            [@.disabled]="inline === true"
-            (@overlayAnimation.start)="onOverlayAnimationStart($event)"
-            (@overlayAnimation.done)="onOverlayAnimationDone($event)"
-            (click)="onOverlayClick($event)"
-            *ngIf="inline || overlayVisible"
-            [pBind]="ptm('panel')"
-        >
-            <ng-content select="p-header"></ng-content>
-            <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-            <ng-container *ngIf="!timeOnly">
-                <div [class]="cx('calendarContainer')" [pBind]="ptm('calendarContainer')">
-                    <div [class]="cx('calendar')" *ngFor="let month of months; let i = index" [pBind]="ptm('calendar')">
-                        <div [class]="cx('header')" [pBind]="ptm('header')">
-                            <p-button
-                                rounded
-                                variant="text"
-                                severity="secondary"
-                                (keydown)="onContainerButtonKeydown($event)"
-                                [styleClass]="cx('pcPrevButton')"
-                                (onClick)="onPrevButtonClick($event)"
-                                [ngStyle]="{ visibility: i === 0 ? 'visible' : 'hidden' }"
-                                type="button"
-                                [ariaLabel]="prevIconAriaLabel"
-                                [pt]="ptm('pcPrevButton')"
-                                [attr.data-pc-group-section]="'navigator'"
-                            >
-                                <ng-template #icon>
-                                    <svg data-p-icon="chevron-left" *ngIf="!previousIconTemplate && !_previousIconTemplate" />
-                                    <span *ngIf="previousIconTemplate || _previousIconTemplate">
-                                        <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
-                                    </span>
-                                </ng-template>
-                            </p-button>
-                            <div [class]="cx('title')" [pBind]="ptm('title')">
-                                <button
-                                    *ngIf="currentView === 'date'"
-                                    type="button"
-                                    (click)="switchToMonthView($event)"
+        <p-motion [visible]="inline || overlayVisible" name="p-anchored-overlay" [appear]="!inline" [options]="computedMotionOptions()" (onBeforeEnter)="onOverlayBeforeEnter($event)" (onAfterLeave)="onOverlayAfterLeave($event)">
+            <div
+                #contentWrapper
+                [attr.id]="panelId"
+                [ngStyle]="panelStyle"
+                [class]="cn(cx('panel'), panelStyleClass)"
+                [attr.aria-label]="getTranslation('chooseDate')"
+                [attr.role]="inline ? null : 'dialog'"
+                [attr.aria-modal]="inline ? null : 'true'"
+                (click)="onOverlayClick($event)"
+                [pBind]="ptm('panel')"
+            >
+                <ng-content select="p-header"></ng-content>
+                <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
+                <ng-container *ngIf="!timeOnly">
+                    <div [class]="cx('calendarContainer')" [pBind]="ptm('calendarContainer')">
+                        <div [class]="cx('calendar')" *ngFor="let month of months; let i = index" [pBind]="ptm('calendar')">
+                            <div [class]="cx('header')" [pBind]="ptm('header')">
+                                <p-button
+                                    rounded
+                                    variant="text"
+                                    severity="secondary"
                                     (keydown)="onContainerButtonKeydown($event)"
-                                    [class]="cx('selectMonth')"
-                                    [attr.disabled]="switchViewButtonDisabled() ? '' : undefined"
-                                    [attr.aria-label]="this.getTranslation('chooseMonth')"
-                                    pRipple
-                                    [pBind]="ptm('selectMonth')"
+                                    [styleClass]="cx('pcPrevButton')"
+                                    (onClick)="onPrevButtonClick($event)"
+                                    [ngStyle]="{ visibility: i === 0 ? 'visible' : 'hidden' }"
+                                    type="button"
+                                    [ariaLabel]="prevIconAriaLabel"
+                                    [pt]="ptm('pcPrevButton')"
                                     [attr.data-pc-group-section]="'navigator'"
                                 >
-                                    {{ getMonthName(month.month) }}
-                                </button>
-                                <button
-                                    *ngIf="currentView !== 'year'"
-                                    type="button"
-                                    (click)="switchToYearView($event)"
+                                    <ng-template #icon>
+                                        <svg data-p-icon="chevron-left" *ngIf="!previousIconTemplate && !_previousIconTemplate" />
+                                        <span *ngIf="previousIconTemplate || _previousIconTemplate">
+                                            <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
+                                        </span>
+                                    </ng-template>
+                                </p-button>
+                                <div [class]="cx('title')" [pBind]="ptm('title')">
+                                    <button
+                                        *ngIf="currentView === 'date'"
+                                        type="button"
+                                        (click)="switchToMonthView($event)"
+                                        (keydown)="onContainerButtonKeydown($event)"
+                                        [class]="cx('selectMonth')"
+                                        [attr.disabled]="switchViewButtonDisabled() ? '' : undefined"
+                                        [attr.aria-label]="this.getTranslation('chooseMonth')"
+                                        pRipple
+                                        [pBind]="ptm('selectMonth')"
+                                        [attr.data-pc-group-section]="'navigator'"
+                                    >
+                                        {{ getMonthName(month.month) }}
+                                    </button>
+                                    <button
+                                        *ngIf="currentView !== 'year'"
+                                        type="button"
+                                        (click)="switchToYearView($event)"
+                                        (keydown)="onContainerButtonKeydown($event)"
+                                        [class]="cx('selectYear')"
+                                        [attr.disabled]="switchViewButtonDisabled() ? '' : undefined"
+                                        [attr.aria-label]="getTranslation('chooseYear')"
+                                        pRipple
+                                        [pBind]="ptm('selectYear')"
+                                        [attr.data-pc-group-section]="'navigator'"
+                                    >
+                                        {{ getYear(month) }}
+                                    </button>
+                                    <span [class]="cx('decade')" *ngIf="currentView === 'year'" [pBind]="ptm('decade')">
+                                        <ng-container *ngIf="!decadeTemplate && !_decadeTemplate">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
+                                        <ng-container *ngTemplateOutlet="decadeTemplate || _decadeTemplate; context: { $implicit: yearPickerValues }"></ng-container>
+                                    </span>
+                                </div>
+                                <p-button
+                                    rounded
+                                    variant="text"
+                                    severity="secondary"
                                     (keydown)="onContainerButtonKeydown($event)"
-                                    [class]="cx('selectYear')"
-                                    [attr.disabled]="switchViewButtonDisabled() ? '' : undefined"
-                                    [attr.aria-label]="getTranslation('chooseYear')"
-                                    pRipple
-                                    [pBind]="ptm('selectYear')"
+                                    [styleClass]="cx('pcNextButton')"
+                                    (onClick)="onNextButtonClick($event)"
+                                    [ngStyle]="{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }"
+                                    [ariaLabel]="nextIconAriaLabel"
+                                    [pt]="ptm('pcNextButton')"
                                     [attr.data-pc-group-section]="'navigator'"
                                 >
-                                    {{ getYear(month) }}
-                                </button>
-                                <span [class]="cx('decade')" *ngIf="currentView === 'year'" [pBind]="ptm('decade')">
-                                    <ng-container *ngIf="!decadeTemplate && !_decadeTemplate">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
-                                    <ng-container *ngTemplateOutlet="decadeTemplate || _decadeTemplate; context: { $implicit: yearPickerValues }"></ng-container>
-                                </span>
+                                    <ng-template #icon>
+                                        <svg data-p-icon="chevron-right" *ngIf="!nextIconTemplate && !_nextIconTemplate" />
+                                        <ng-container *ngIf="nextIconTemplate || _nextIconTemplate">
+                                            <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
+                                        </ng-container>
+                                    </ng-template>
+                                </p-button>
                             </div>
-                            <p-button
-                                rounded
-                                variant="text"
-                                severity="secondary"
-                                (keydown)="onContainerButtonKeydown($event)"
-                                [styleClass]="cx('pcNextButton')"
-                                (onClick)="onNextButtonClick($event)"
-                                [ngStyle]="{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }"
-                                [ariaLabel]="nextIconAriaLabel"
-                                [pt]="ptm('pcNextButton')"
-                                [attr.data-pc-group-section]="'navigator'"
-                            >
-                                <ng-template #icon>
-                                    <svg data-p-icon="chevron-right" *ngIf="!nextIconTemplate && !_nextIconTemplate" />
-                                    <ng-container *ngIf="nextIconTemplate || _nextIconTemplate">
-                                        <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
-                                    </ng-container>
-                                </ng-template>
-                            </p-button>
-                        </div>
-                        <table [class]="cx('dayView')" role="grid" *ngIf="currentView === 'date'" [pBind]="ptm('table')">
-                            <thead [pBind]="ptm('tableHeader')">
-                                <tr [pBind]="ptm('tableHeaderRow')">
-                                    <th *ngIf="showWeek" [class]="cx('weekHeader')" [pBind]="ptm('weekHeader')">
-                                        <span [pBind]="ptm('weekHeaderLabel')">{{ getTranslation('weekHeader') }}</span>
-                                    </th>
-                                    <th [class]="cx('weekDayCell')" scope="col" *ngFor="let weekDay of weekDays; let begin = first; let end = last" [pBind]="ptm('weekDayCell')">
-                                        <span [class]="cx('weekDay')" [pBind]="ptm('weekDay')">{{ weekDay }}</span>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody [pBind]="ptm('tableBody')">
-                                <tr *ngFor="let week of month.dates; let j = index" [pBind]="ptm('tableBodyRow')">
-                                    <td *ngIf="showWeek" [class]="cx('weekNumber')" [pBind]="ptm('weekNumber')">
-                                        <span [class]="cx('weekLabelContainer')" [pBind]="ptm('weekLabelContainer')">
-                                            {{ month.weekNumbers[j] }}
-                                        </span>
-                                    </td>
-                                    <td *ngFor="let date of week" [attr.aria-label]="date.day" [class]="cx('dayCell', { date })" [pBind]="ptm('dayCell')">
-                                        <ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
-                                            <span
-                                                [ngClass]="dayClass(date)"
-                                                (click)="onDateSelect($event, date)"
-                                                draggable="false"
-                                                [attr.data-date]="formatDateKey(formatDateMetaToDate(date))"
-                                                (keydown)="onDateCellKeydown($event, date, i)"
-                                                pRipple
-                                                [pBind]="ptm('day')"
-                                            >
-                                                <ng-container *ngIf="!dateTemplate && !_dateTemplate && (date.selectable || (!disabledDateTemplate && !_disabledDateTemplate))">{{ date.day }}</ng-container>
-                                                <ng-container *ngIf="date.selectable || (!disabledDateTemplate && !_disabledDateTemplate)">
-                                                    <ng-container *ngTemplateOutlet="dateTemplate || _dateTemplate; context: { $implicit: date }"></ng-container>
-                                                </ng-container>
-                                                <ng-container *ngIf="!date.selectable">
-                                                    <ng-container *ngTemplateOutlet="disabledDateTemplate || _disabledDateTemplate; context: { $implicit: date }"></ng-container>
-                                                </ng-container>
+                            <table [class]="cx('dayView')" role="grid" *ngIf="currentView === 'date'" [pBind]="ptm('table')">
+                                <thead [pBind]="ptm('tableHeader')">
+                                    <tr [pBind]="ptm('tableHeaderRow')">
+                                        <th *ngIf="showWeek" [class]="cx('weekHeader')" [pBind]="ptm('weekHeader')">
+                                            <span [pBind]="ptm('weekHeaderLabel')">{{ getTranslation('weekHeader') }}</span>
+                                        </th>
+                                        <th [class]="cx('weekDayCell')" scope="col" *ngFor="let weekDay of weekDays; let begin = first; let end = last" [pBind]="ptm('weekDayCell')">
+                                            <span [class]="cx('weekDay')" [pBind]="ptm('weekDay')">{{ weekDay }}</span>
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody [pBind]="ptm('tableBody')">
+                                    <tr *ngFor="let week of month.dates; let j = index" [pBind]="ptm('tableBodyRow')">
+                                        <td *ngIf="showWeek" [class]="cx('weekNumber')" [pBind]="ptm('weekNumber')">
+                                            <span [class]="cx('weekLabelContainer')" [pBind]="ptm('weekLabelContainer')">
+                                                {{ month.weekNumbers[j] }}
                                             </span>
-                                            <div *ngIf="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
-                                                {{ date.day }}
-                                            </div>
-                                        </ng-container>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                                        </td>
+                                        <td *ngFor="let date of week" [attr.aria-label]="date.day" [class]="cx('dayCell', { date })" [pBind]="ptm('dayCell')">
+                                            <ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
+                                                <span
+                                                    [ngClass]="dayClass(date)"
+                                                    (click)="onDateSelect($event, date)"
+                                                    draggable="false"
+                                                    [attr.data-date]="formatDateKey(formatDateMetaToDate(date))"
+                                                    (keydown)="onDateCellKeydown($event, date, i)"
+                                                    pRipple
+                                                    [pBind]="ptm('day')"
+                                                >
+                                                    <ng-container *ngIf="!dateTemplate && !_dateTemplate && (date.selectable || (!disabledDateTemplate && !_disabledDateTemplate))">{{ date.day }}</ng-container>
+                                                    <ng-container *ngIf="date.selectable || (!disabledDateTemplate && !_disabledDateTemplate)">
+                                                        <ng-container *ngTemplateOutlet="dateTemplate || _dateTemplate; context: { $implicit: date }"></ng-container>
+                                                    </ng-container>
+                                                    <ng-container *ngIf="!date.selectable">
+                                                        <ng-container *ngTemplateOutlet="disabledDateTemplate || _disabledDateTemplate; context: { $implicit: date }"></ng-container>
+                                                    </ng-container>
+                                                </span>
+                                                <div *ngIf="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
+                                                    {{ date.day }}
+                                                </div>
+                                            </ng-container>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
                     </div>
-                </div>
-                <div [class]="cx('monthView')" *ngIf="currentView === 'month'" [pBind]="ptm('monthView')">
-                    <span *ngFor="let m of monthPickerValues(); let i = index" (click)="onMonthSelect($event, i)" (keydown)="onMonthCellKeydown($event, i)" [class]="cx('month', { month: m, index: i })" pRipple [pBind]="ptm('month')">
-                        {{ m }}
-                        <div *ngIf="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
+                    <div [class]="cx('monthView')" *ngIf="currentView === 'month'" [pBind]="ptm('monthView')">
+                        <span *ngFor="let m of monthPickerValues(); let i = index" (click)="onMonthSelect($event, i)" (keydown)="onMonthCellKeydown($event, i)" [class]="cx('month', { month: m, index: i })" pRipple [pBind]="ptm('month')">
                             {{ m }}
-                        </div>
-                    </span>
-                </div>
-                <div [class]="cx('yearView')" *ngIf="currentView === 'year'" [pBind]="ptm('yearView')">
-                    <span *ngFor="let y of yearPickerValues()" (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event, y)" [class]="cx('year', { year: y })" pRipple [pBind]="ptm('year')">
-                        {{ y }}
-                        <div *ngIf="isYearSelected(y)" class="p-hidden-accessible" aria-live="polite">
+                            <div *ngIf="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
+                                {{ m }}
+                            </div>
+                        </span>
+                    </div>
+                    <div [class]="cx('yearView')" *ngIf="currentView === 'year'" [pBind]="ptm('yearView')">
+                        <span *ngFor="let y of yearPickerValues()" (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event, y)" [class]="cx('year', { year: y })" pRipple [pBind]="ptm('year')">
                             {{ y }}
-                        </div>
-                    </span>
-                </div>
-            </ng-container>
-            <div [class]="cx('timePicker')" *ngIf="(showTime || timeOnly) && currentView === 'date'" [pBind]="ptm('timePicker')">
-                <div [class]="cx('hourPicker')" [pBind]="ptm('hourPicker')">
-                    <p-button
-                        rounded
-                        variant="text"
-                        severity="secondary"
-                        [styleClass]="cx('pcIncrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (keydown.enter)="incrementHour($event)"
-                        (keydown.space)="incrementHour($event)"
-                        (mousedown)="onTimePickerElementMouseDown($event, 0, 1)"
-                        (mouseup)="onTimePickerElementMouseUp($event)"
-                        (keyup.enter)="onTimePickerElementMouseUp($event)"
-                        (keyup.space)="onTimePickerElementMouseUp($event)"
-                        (mouseleave)="onTimePickerElementMouseLeave()"
-                        [attr.aria-label]="getTranslation('nextHour')"
-                        [pt]="ptm('pcIncrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                    <span [pBind]="ptm('hour')"><ng-container *ngIf="currentHour < 10">0</ng-container>{{ currentHour }}</span>
-                    <p-button
-                        rounded
-                        variant="text"
-                        severity="secondary"
-                        [styleClass]="cx('pcDecrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (keydown.enter)="decrementHour($event)"
-                        (keydown.space)="decrementHour($event)"
-                        (mousedown)="onTimePickerElementMouseDown($event, 0, -1)"
-                        (mouseup)="onTimePickerElementMouseUp($event)"
-                        (keyup.enter)="onTimePickerElementMouseUp($event)"
-                        (keyup.space)="onTimePickerElementMouseUp($event)"
-                        (mouseleave)="onTimePickerElementMouseLeave()"
-                        [attr.aria-label]="getTranslation('prevHour')"
-                        [pt]="ptm('pcDecrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                </div>
-                <div class="p-datepicker-separator" [pBind]="ptm('separatorContainer')">
-                    <span [pBind]="ptm('separator')">{{ timeSeparator }}</span>
-                </div>
-                <div [class]="cx('minutePicker')" [pBind]="ptm('minutePicker')">
-                    <p-button
-                        rounded
-                        variant="text"
-                        severity="secondary"
-                        [styleClass]="cx('pcIncrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (keydown.enter)="incrementMinute($event)"
-                        (keydown.space)="incrementMinute($event)"
-                        (mousedown)="onTimePickerElementMouseDown($event, 1, 1)"
-                        (mouseup)="onTimePickerElementMouseUp($event)"
-                        (keyup.enter)="onTimePickerElementMouseUp($event)"
-                        (keyup.space)="onTimePickerElementMouseUp($event)"
-                        (mouseleave)="onTimePickerElementMouseLeave()"
-                        [attr.aria-label]="getTranslation('nextMinute')"
-                        [pt]="ptm('pcIncrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                    <span [pBind]="ptm('minute')"><ng-container *ngIf="currentMinute < 10">0</ng-container>{{ currentMinute }}</span>
-                    <p-button
-                        rounded
-                        variant="text"
-                        severity="secondary"
-                        [styleClass]="cx('pcDecrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (keydown.enter)="decrementMinute($event)"
-                        (keydown.space)="decrementMinute($event)"
-                        (mousedown)="onTimePickerElementMouseDown($event, 1, -1)"
-                        (mouseup)="onTimePickerElementMouseUp($event)"
-                        (keyup.enter)="onTimePickerElementMouseUp($event)"
-                        (keyup.space)="onTimePickerElementMouseUp($event)"
-                        (mouseleave)="onTimePickerElementMouseLeave()"
-                        [attr.aria-label]="getTranslation('prevMinute')"
-                        [pt]="ptm('pcDecrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                </div>
-                <div [class]="cx('separator')" *ngIf="showSeconds" [pBind]="ptm('separatorContainer')">
-                    <span [pBind]="ptm('separator')">{{ timeSeparator }}</span>
-                </div>
-                <div [class]="cx('secondPicker')" *ngIf="showSeconds" [pBind]="ptm('secondPicker')">
-                    <p-button
-                        rounded
-                        variant="text"
-                        severity="secondary"
-                        [styleClass]="cx('pcIncrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (keydown.enter)="incrementSecond($event)"
-                        (keydown.space)="incrementSecond($event)"
-                        (mousedown)="onTimePickerElementMouseDown($event, 2, 1)"
-                        (mouseup)="onTimePickerElementMouseUp($event)"
-                        (keyup.enter)="onTimePickerElementMouseUp($event)"
-                        (keyup.space)="onTimePickerElementMouseUp($event)"
-                        (mouseleave)="onTimePickerElementMouseLeave()"
-                        [attr.aria-label]="getTranslation('nextSecond')"
-                        [pt]="ptm('pcIncrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                    <span [pBind]="ptm('second')"><ng-container *ngIf="currentSecond < 10">0</ng-container>{{ currentSecond }}</span>
-                    <p-button
-                        rounded
-                        variant="text"
-                        severity="secondary"
-                        [styleClass]="cx('pcDecrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (keydown.enter)="decrementSecond($event)"
-                        (keydown.space)="decrementSecond($event)"
-                        (mousedown)="onTimePickerElementMouseDown($event, 2, -1)"
-                        (mouseup)="onTimePickerElementMouseUp($event)"
-                        (keyup.enter)="onTimePickerElementMouseUp($event)"
-                        (keyup.space)="onTimePickerElementMouseUp($event)"
-                        (mouseleave)="onTimePickerElementMouseLeave()"
-                        [attr.aria-label]="getTranslation('prevSecond')"
-                        [pt]="ptm('pcDecrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                </div>
-                <div [class]="cx('separator')" *ngIf="hourFormat == '12'" [pBind]="ptm('separatorContainer')">
-                    <span [pBind]="ptm('separator')">{{ timeSeparator }}</span>
+                            <div *ngIf="isYearSelected(y)" class="p-hidden-accessible" aria-live="polite">
+                                {{ y }}
+                            </div>
+                        </span>
+                    </div>
+                </ng-container>
+                <div [class]="cx('timePicker')" *ngIf="(showTime || timeOnly) && currentView === 'date'" [pBind]="ptm('timePicker')">
+                    <div [class]="cx('hourPicker')" [pBind]="ptm('hourPicker')">
+                        <p-button
+                            rounded
+                            variant="text"
+                            severity="secondary"
+                            [styleClass]="cx('pcIncrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="incrementHour($event)"
+                            (keydown.space)="incrementHour($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 0, 1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('nextHour')"
+                            [pt]="ptm('pcIncrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                        <span [pBind]="ptm('hour')"><ng-container *ngIf="currentHour < 10">0</ng-container>{{ currentHour }}</span>
+                        <p-button
+                            rounded
+                            variant="text"
+                            severity="secondary"
+                            [styleClass]="cx('pcDecrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="decrementHour($event)"
+                            (keydown.space)="decrementHour($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 0, -1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('prevHour')"
+                            [pt]="ptm('pcDecrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                    </div>
+                    <div class="p-datepicker-separator" [pBind]="ptm('separatorContainer')">
+                        <span [pBind]="ptm('separator')">{{ timeSeparator }}</span>
+                    </div>
+                    <div [class]="cx('minutePicker')" [pBind]="ptm('minutePicker')">
+                        <p-button
+                            rounded
+                            variant="text"
+                            severity="secondary"
+                            [styleClass]="cx('pcIncrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="incrementMinute($event)"
+                            (keydown.space)="incrementMinute($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 1, 1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('nextMinute')"
+                            [pt]="ptm('pcIncrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                        <span [pBind]="ptm('minute')"><ng-container *ngIf="currentMinute < 10">0</ng-container>{{ currentMinute }}</span>
+                        <p-button
+                            rounded
+                            variant="text"
+                            severity="secondary"
+                            [styleClass]="cx('pcDecrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="decrementMinute($event)"
+                            (keydown.space)="decrementMinute($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 1, -1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('prevMinute')"
+                            [pt]="ptm('pcDecrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                    </div>
+                    <div [class]="cx('separator')" *ngIf="showSeconds" [pBind]="ptm('separatorContainer')">
+                        <span [pBind]="ptm('separator')">{{ timeSeparator }}</span>
+                    </div>
+                    <div [class]="cx('secondPicker')" *ngIf="showSeconds" [pBind]="ptm('secondPicker')">
+                        <p-button
+                            rounded
+                            variant="text"
+                            severity="secondary"
+                            [styleClass]="cx('pcIncrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="incrementSecond($event)"
+                            (keydown.space)="incrementSecond($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 2, 1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('nextSecond')"
+                            [pt]="ptm('pcIncrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                        <span [pBind]="ptm('second')"><ng-container *ngIf="currentSecond < 10">0</ng-container>{{ currentSecond }}</span>
+                        <p-button
+                            rounded
+                            variant="text"
+                            severity="secondary"
+                            [styleClass]="cx('pcDecrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="decrementSecond($event)"
+                            (keydown.space)="decrementSecond($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 2, -1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('prevSecond')"
+                            [pt]="ptm('pcDecrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                    </div>
+                    <div [class]="cx('separator')" *ngIf="hourFormat == '12'" [pBind]="ptm('separatorContainer')">
+                        <span [pBind]="ptm('separator')">{{ timeSeparator }}</span>
+                    </div>
+                    <div [class]="cx('ampmPicker')" *ngIf="hourFormat == '12'" [pBind]="ptm('ampmPicker')">
+                        <p-button
+                            text
+                            rounded
+                            severity="secondary"
+                            [styleClass]="cx('pcIncrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (onClick)="toggleAMPM($event)"
+                            (keydown.enter)="toggleAMPM($event)"
+                            [attr.aria-label]="getTranslation('am')"
+                            [pt]="ptm('pcIncrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                        <span [pBind]="ptm('ampm')">{{ pm ? 'PM' : 'AM' }}</span>
+                        <p-button
+                            text
+                            rounded
+                            severity="secondary"
+                            [styleClass]="cx('pcDecrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (click)="toggleAMPM($event)"
+                            (keydown.enter)="toggleAMPM($event)"
+                            [attr.aria-label]="getTranslation('pm')"
+                            [pt]="ptm('pcDecrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                    </div>
                 </div>
-                <div [class]="cx('ampmPicker')" *ngIf="hourFormat == '12'" [pBind]="ptm('ampmPicker')">
-                    <p-button
-                        text
-                        rounded
-                        severity="secondary"
-                        [styleClass]="cx('pcIncrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (onClick)="toggleAMPM($event)"
-                        (keydown.enter)="toggleAMPM($event)"
-                        [attr.aria-label]="getTranslation('am')"
-                        [pt]="ptm('pcIncrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                    <span [pBind]="ptm('ampm')">{{ pm ? 'PM' : 'AM' }}</span>
-                    <p-button
-                        text
-                        rounded
-                        severity="secondary"
-                        [styleClass]="cx('pcDecrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (click)="toggleAMPM($event)"
-                        (keydown.enter)="toggleAMPM($event)"
-                        [attr.aria-label]="getTranslation('pm')"
-                        [pt]="ptm('pcDecrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
+                <div [class]="cx('buttonbar')" *ngIf="showButtonBar" [pBind]="ptm('buttonbar')">
+                    @if (buttonBarTemplate || _buttonBarTemplate) {
+                        <ng-container *ngTemplateOutlet="buttonBarTemplate || _buttonBarTemplate; context: { todayCallback: onTodayButtonClick.bind(this), clearCallback: onClearButtonClick.bind(this) }"></ng-container>
+                    } @else {
+                        <p-button
+                            size="small"
+                            [styleClass]="cx('pcTodayButton')"
+                            [label]="getTranslation('today')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (onClick)="onTodayButtonClick($event)"
+                            [ngClass]="todayButtonStyleClass"
+                            severity="secondary"
+                            variant="text"
+                            size="small"
+                            [pt]="ptm('pcTodayButton')"
+                            [attr.data-pc-group-section]="'button'"
+                        />
+                        <p-button
+                            size="small"
+                            [styleClass]="cx('pcClearButton')"
+                            [label]="getTranslation('clear')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (onClick)="onClearButtonClick($event)"
+                            [ngClass]="clearButtonStyleClass"
+                            severity="secondary"
+                            variant="text"
+                            size="small"
+                            [pt]="ptm('pcClearButton')"
+                            [attr.data-pc-group-section]="'button'"
+                        />
+                    }
                 </div>
+                <ng-content select="p-footer"></ng-content>
+                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
             </div>
-            <div [class]="cx('buttonbar')" *ngIf="showButtonBar" [pBind]="ptm('buttonbar')">
-                @if (buttonBarTemplate || _buttonBarTemplate) {
-                    <ng-container *ngTemplateOutlet="buttonBarTemplate || _buttonBarTemplate; context: { todayCallback: onTodayButtonClick.bind(this), clearCallback: onClearButtonClick.bind(this) }"></ng-container>
-                } @else {
-                    <p-button
-                        size="small"
-                        [styleClass]="cx('pcTodayButton')"
-                        [label]="getTranslation('today')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (onClick)="onTodayButtonClick($event)"
-                        [ngClass]="todayButtonStyleClass"
-                        severity="secondary"
-                        variant="text"
-                        size="small"
-                        [pt]="ptm('pcTodayButton')"
-                        [attr.data-pc-group-section]="'button'"
-                    />
-                    <p-button
-                        size="small"
-                        [styleClass]="cx('pcClearButton')"
-                        [label]="getTranslation('clear')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (onClick)="onClearButtonClick($event)"
-                        [ngClass]="clearButtonStyleClass"
-                        severity="secondary"
-                        variant="text"
-                        size="small"
-                        [pt]="ptm('pcClearButton')"
-                        [attr.data-pc-group-section]="'button'"
-                    />
-                }
-            </div>
-            <ng-content select="p-footer"></ng-content>
-            <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: ChevronLeftIcon, selector: "[data-p-icon=\"chevron-left\"]" }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: ChevronUpIcon, selector: "[data-p-icon=\"chevron-up\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: CalendarIcon, selector: "[data-p-icon=\"calendar\"]" }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i2.Bind, selector: "[pBind]", inputs: ["pBind"] }], animations: [
-            trigger('overlayAnimation', [
-                state('visibleTouchUI', style$2({
-                    transform: 'translate(-50%,-50%)',
-                    opacity: 1
-                })),
-                transition('void => visible', [style$2({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}', style$2({ opacity: 1, transform: '*' }))]),
-                transition('visible => void', [animate('{{hideTransitionParams}}', style$2({ opacity: 0 }))]),
-                transition('void => visibleTouchUI', [style$2({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }), animate('{{showTransitionParams}}')]),
-                transition('visibleTouchUI => void', [
-                    animate('{{hideTransitionParams}}', style$2({
-                        opacity: 0,
-                        transform: 'translate3d(-50%, -40%, 0) scale(0.9)'
-                    }))
-                ])
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        </p-motion>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: ChevronLeftIcon, selector: "[data-p-icon=\"chevron-left\"]" }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: ChevronUpIcon, selector: "[data-p-icon=\"chevron-up\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: CalendarIcon, selector: "[data-p-icon=\"calendar\"]" }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i2.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "component", type: i4.Motion, selector: "p-motion", inputs: ["visible", "mountOnEnter", "unmountOnLeave", "name", "type", "safe", "disabled", "appear", "enter", "leave", "duration", "hideStrategy", "enterFromClass", "enterToClass", "enterActiveClass", "leaveFromClass", "leaveToClass", "leaveActiveClass", "options"], outputs: ["onBeforeEnter", "onEnter", "onAfterEnter", "onEnterCancelled", "onBeforeLeave", "onLeave", "onAfterLeave", "onLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DatePicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-datePicker, p-datepicker, p-date-picker',
                     standalone: true,
-                    imports: [CommonModule, Button, Ripple, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon, AutoFocus, InputText, SharedModule, BindModule],
+                    imports: [CommonModule, Button, Ripple, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon, AutoFocus, InputText, SharedModule, BindModule, MotionModule],
                     hostDirectives: [Bind],
                     template: `
         <ng-template [ngIf]="!inline">
@@ -3799,6 +3778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 [fluid]="hasFluid"
                 [invalid]="invalid()"
                 [pt]="ptm('pcInputText')"
+                [unstyled]="unstyled()"
             />
             <ng-container *ngIf="showClear && !$disabled() && inputfieldViewChild?.nativeElement?.value">
                 <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" [pBind]="ptm('inputIcon')" (click)="clear()" />
@@ -3826,418 +3806,395 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 </ng-container>
             </button>
             <ng-container *ngIf="iconDisplay === 'input' && showIcon">
-                <span [class]="cx('inputIconContainer')" [pBind]="ptm('inputIconContainer')">
+                <span [class]="cx('inputIconContainer')" [pBind]="ptm('inputIconContainer')" [attr.data-p]="inputIconDataP">
                     <svg data-p-icon="calendar" (click)="onButtonClick($event)" *ngIf="!inputIconTemplate && !_inputIconTemplate" [class]="cx('inputIcon')" [pBind]="ptm('inputIcon')" />
 
                     <ng-container *ngTemplateOutlet="inputIconTemplate || _inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
                 </span>
             </ng-container>
         </ng-template>
-        <div
-            #contentWrapper
-            [attr.id]="panelId"
-            [ngStyle]="panelStyle"
-            [class]="cn(cx('panel'), panelStyleClass)"
-            [@overlayAnimation]="{
-                value: 'visible',
-                params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-            }"
-            [attr.aria-label]="getTranslation('chooseDate')"
-            [attr.role]="inline ? null : 'dialog'"
-            [attr.aria-modal]="inline ? null : 'true'"
-            [@.disabled]="inline === true"
-            (@overlayAnimation.start)="onOverlayAnimationStart($event)"
-            (@overlayAnimation.done)="onOverlayAnimationDone($event)"
-            (click)="onOverlayClick($event)"
-            *ngIf="inline || overlayVisible"
-            [pBind]="ptm('panel')"
-        >
-            <ng-content select="p-header"></ng-content>
-            <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-            <ng-container *ngIf="!timeOnly">
-                <div [class]="cx('calendarContainer')" [pBind]="ptm('calendarContainer')">
-                    <div [class]="cx('calendar')" *ngFor="let month of months; let i = index" [pBind]="ptm('calendar')">
-                        <div [class]="cx('header')" [pBind]="ptm('header')">
-                            <p-button
-                                rounded
-                                variant="text"
-                                severity="secondary"
-                                (keydown)="onContainerButtonKeydown($event)"
-                                [styleClass]="cx('pcPrevButton')"
-                                (onClick)="onPrevButtonClick($event)"
-                                [ngStyle]="{ visibility: i === 0 ? 'visible' : 'hidden' }"
-                                type="button"
-                                [ariaLabel]="prevIconAriaLabel"
-                                [pt]="ptm('pcPrevButton')"
-                                [attr.data-pc-group-section]="'navigator'"
-                            >
-                                <ng-template #icon>
-                                    <svg data-p-icon="chevron-left" *ngIf="!previousIconTemplate && !_previousIconTemplate" />
-                                    <span *ngIf="previousIconTemplate || _previousIconTemplate">
-                                        <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
-                                    </span>
-                                </ng-template>
-                            </p-button>
-                            <div [class]="cx('title')" [pBind]="ptm('title')">
-                                <button
-                                    *ngIf="currentView === 'date'"
-                                    type="button"
-                                    (click)="switchToMonthView($event)"
+        <p-motion [visible]="inline || overlayVisible" name="p-anchored-overlay" [appear]="!inline" [options]="computedMotionOptions()" (onBeforeEnter)="onOverlayBeforeEnter($event)" (onAfterLeave)="onOverlayAfterLeave($event)">
+            <div
+                #contentWrapper
+                [attr.id]="panelId"
+                [ngStyle]="panelStyle"
+                [class]="cn(cx('panel'), panelStyleClass)"
+                [attr.aria-label]="getTranslation('chooseDate')"
+                [attr.role]="inline ? null : 'dialog'"
+                [attr.aria-modal]="inline ? null : 'true'"
+                (click)="onOverlayClick($event)"
+                [pBind]="ptm('panel')"
+            >
+                <ng-content select="p-header"></ng-content>
+                <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
+                <ng-container *ngIf="!timeOnly">
+                    <div [class]="cx('calendarContainer')" [pBind]="ptm('calendarContainer')">
+                        <div [class]="cx('calendar')" *ngFor="let month of months; let i = index" [pBind]="ptm('calendar')">
+                            <div [class]="cx('header')" [pBind]="ptm('header')">
+                                <p-button
+                                    rounded
+                                    variant="text"
+                                    severity="secondary"
                                     (keydown)="onContainerButtonKeydown($event)"
-                                    [class]="cx('selectMonth')"
-                                    [attr.disabled]="switchViewButtonDisabled() ? '' : undefined"
-                                    [attr.aria-label]="this.getTranslation('chooseMonth')"
-                                    pRipple
-                                    [pBind]="ptm('selectMonth')"
+                                    [styleClass]="cx('pcPrevButton')"
+                                    (onClick)="onPrevButtonClick($event)"
+                                    [ngStyle]="{ visibility: i === 0 ? 'visible' : 'hidden' }"
+                                    type="button"
+                                    [ariaLabel]="prevIconAriaLabel"
+                                    [pt]="ptm('pcPrevButton')"
                                     [attr.data-pc-group-section]="'navigator'"
                                 >
-                                    {{ getMonthName(month.month) }}
-                                </button>
-                                <button
-                                    *ngIf="currentView !== 'year'"
-                                    type="button"
-                                    (click)="switchToYearView($event)"
+                                    <ng-template #icon>
+                                        <svg data-p-icon="chevron-left" *ngIf="!previousIconTemplate && !_previousIconTemplate" />
+                                        <span *ngIf="previousIconTemplate || _previousIconTemplate">
+                                            <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
+                                        </span>
+                                    </ng-template>
+                                </p-button>
+                                <div [class]="cx('title')" [pBind]="ptm('title')">
+                                    <button
+                                        *ngIf="currentView === 'date'"
+                                        type="button"
+                                        (click)="switchToMonthView($event)"
+                                        (keydown)="onContainerButtonKeydown($event)"
+                                        [class]="cx('selectMonth')"
+                                        [attr.disabled]="switchViewButtonDisabled() ? '' : undefined"
+                                        [attr.aria-label]="this.getTranslation('chooseMonth')"
+                                        pRipple
+                                        [pBind]="ptm('selectMonth')"
+                                        [attr.data-pc-group-section]="'navigator'"
+                                    >
+                                        {{ getMonthName(month.month) }}
+                                    </button>
+                                    <button
+                                        *ngIf="currentView !== 'year'"
+                                        type="button"
+                                        (click)="switchToYearView($event)"
+                                        (keydown)="onContainerButtonKeydown($event)"
+                                        [class]="cx('selectYear')"
+                                        [attr.disabled]="switchViewButtonDisabled() ? '' : undefined"
+                                        [attr.aria-label]="getTranslation('chooseYear')"
+                                        pRipple
+                                        [pBind]="ptm('selectYear')"
+                                        [attr.data-pc-group-section]="'navigator'"
+                                    >
+                                        {{ getYear(month) }}
+                                    </button>
+                                    <span [class]="cx('decade')" *ngIf="currentView === 'year'" [pBind]="ptm('decade')">
+                                        <ng-container *ngIf="!decadeTemplate && !_decadeTemplate">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
+                                        <ng-container *ngTemplateOutlet="decadeTemplate || _decadeTemplate; context: { $implicit: yearPickerValues }"></ng-container>
+                                    </span>
+                                </div>
+                                <p-button
+                                    rounded
+                                    variant="text"
+                                    severity="secondary"
                                     (keydown)="onContainerButtonKeydown($event)"
-                                    [class]="cx('selectYear')"
-                                    [attr.disabled]="switchViewButtonDisabled() ? '' : undefined"
-                                    [attr.aria-label]="getTranslation('chooseYear')"
-                                    pRipple
-                                    [pBind]="ptm('selectYear')"
+                                    [styleClass]="cx('pcNextButton')"
+                                    (onClick)="onNextButtonClick($event)"
+                                    [ngStyle]="{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }"
+                                    [ariaLabel]="nextIconAriaLabel"
+                                    [pt]="ptm('pcNextButton')"
                                     [attr.data-pc-group-section]="'navigator'"
                                 >
-                                    {{ getYear(month) }}
-                                </button>
-                                <span [class]="cx('decade')" *ngIf="currentView === 'year'" [pBind]="ptm('decade')">
-                                    <ng-container *ngIf="!decadeTemplate && !_decadeTemplate">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
-                                    <ng-container *ngTemplateOutlet="decadeTemplate || _decadeTemplate; context: { $implicit: yearPickerValues }"></ng-container>
-                                </span>
+                                    <ng-template #icon>
+                                        <svg data-p-icon="chevron-right" *ngIf="!nextIconTemplate && !_nextIconTemplate" />
+                                        <ng-container *ngIf="nextIconTemplate || _nextIconTemplate">
+                                            <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
+                                        </ng-container>
+                                    </ng-template>
+                                </p-button>
                             </div>
-                            <p-button
-                                rounded
-                                variant="text"
-                                severity="secondary"
-                                (keydown)="onContainerButtonKeydown($event)"
-                                [styleClass]="cx('pcNextButton')"
-                                (onClick)="onNextButtonClick($event)"
-                                [ngStyle]="{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }"
-                                [ariaLabel]="nextIconAriaLabel"
-                                [pt]="ptm('pcNextButton')"
-                                [attr.data-pc-group-section]="'navigator'"
-                            >
-                                <ng-template #icon>
-                                    <svg data-p-icon="chevron-right" *ngIf="!nextIconTemplate && !_nextIconTemplate" />
-                                    <ng-container *ngIf="nextIconTemplate || _nextIconTemplate">
-                                        <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
-                                    </ng-container>
-                                </ng-template>
-                            </p-button>
-                        </div>
-                        <table [class]="cx('dayView')" role="grid" *ngIf="currentView === 'date'" [pBind]="ptm('table')">
-                            <thead [pBind]="ptm('tableHeader')">
-                                <tr [pBind]="ptm('tableHeaderRow')">
-                                    <th *ngIf="showWeek" [class]="cx('weekHeader')" [pBind]="ptm('weekHeader')">
-                                        <span [pBind]="ptm('weekHeaderLabel')">{{ getTranslation('weekHeader') }}</span>
-                                    </th>
-                                    <th [class]="cx('weekDayCell')" scope="col" *ngFor="let weekDay of weekDays; let begin = first; let end = last" [pBind]="ptm('weekDayCell')">
-                                        <span [class]="cx('weekDay')" [pBind]="ptm('weekDay')">{{ weekDay }}</span>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody [pBind]="ptm('tableBody')">
-                                <tr *ngFor="let week of month.dates; let j = index" [pBind]="ptm('tableBodyRow')">
-                                    <td *ngIf="showWeek" [class]="cx('weekNumber')" [pBind]="ptm('weekNumber')">
-                                        <span [class]="cx('weekLabelContainer')" [pBind]="ptm('weekLabelContainer')">
-                                            {{ month.weekNumbers[j] }}
-                                        </span>
-                                    </td>
-                                    <td *ngFor="let date of week" [attr.aria-label]="date.day" [class]="cx('dayCell', { date })" [pBind]="ptm('dayCell')">
-                                        <ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
-                                            <span
-                                                [ngClass]="dayClass(date)"
-                                                (click)="onDateSelect($event, date)"
-                                                draggable="false"
-                                                [attr.data-date]="formatDateKey(formatDateMetaToDate(date))"
-                                                (keydown)="onDateCellKeydown($event, date, i)"
-                                                pRipple
-                                                [pBind]="ptm('day')"
-                                            >
-                                                <ng-container *ngIf="!dateTemplate && !_dateTemplate && (date.selectable || (!disabledDateTemplate && !_disabledDateTemplate))">{{ date.day }}</ng-container>
-                                                <ng-container *ngIf="date.selectable || (!disabledDateTemplate && !_disabledDateTemplate)">
-                                                    <ng-container *ngTemplateOutlet="dateTemplate || _dateTemplate; context: { $implicit: date }"></ng-container>
-                                                </ng-container>
-                                                <ng-container *ngIf="!date.selectable">
-                                                    <ng-container *ngTemplateOutlet="disabledDateTemplate || _disabledDateTemplate; context: { $implicit: date }"></ng-container>
-                                                </ng-container>
+                            <table [class]="cx('dayView')" role="grid" *ngIf="currentView === 'date'" [pBind]="ptm('table')">
+                                <thead [pBind]="ptm('tableHeader')">
+                                    <tr [pBind]="ptm('tableHeaderRow')">
+                                        <th *ngIf="showWeek" [class]="cx('weekHeader')" [pBind]="ptm('weekHeader')">
+                                            <span [pBind]="ptm('weekHeaderLabel')">{{ getTranslation('weekHeader') }}</span>
+                                        </th>
+                                        <th [class]="cx('weekDayCell')" scope="col" *ngFor="let weekDay of weekDays; let begin = first; let end = last" [pBind]="ptm('weekDayCell')">
+                                            <span [class]="cx('weekDay')" [pBind]="ptm('weekDay')">{{ weekDay }}</span>
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody [pBind]="ptm('tableBody')">
+                                    <tr *ngFor="let week of month.dates; let j = index" [pBind]="ptm('tableBodyRow')">
+                                        <td *ngIf="showWeek" [class]="cx('weekNumber')" [pBind]="ptm('weekNumber')">
+                                            <span [class]="cx('weekLabelContainer')" [pBind]="ptm('weekLabelContainer')">
+                                                {{ month.weekNumbers[j] }}
                                             </span>
-                                            <div *ngIf="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
-                                                {{ date.day }}
-                                            </div>
-                                        </ng-container>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                                        </td>
+                                        <td *ngFor="let date of week" [attr.aria-label]="date.day" [class]="cx('dayCell', { date })" [pBind]="ptm('dayCell')">
+                                            <ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
+                                                <span
+                                                    [ngClass]="dayClass(date)"
+                                                    (click)="onDateSelect($event, date)"
+                                                    draggable="false"
+                                                    [attr.data-date]="formatDateKey(formatDateMetaToDate(date))"
+                                                    (keydown)="onDateCellKeydown($event, date, i)"
+                                                    pRipple
+                                                    [pBind]="ptm('day')"
+                                                >
+                                                    <ng-container *ngIf="!dateTemplate && !_dateTemplate && (date.selectable || (!disabledDateTemplate && !_disabledDateTemplate))">{{ date.day }}</ng-container>
+                                                    <ng-container *ngIf="date.selectable || (!disabledDateTemplate && !_disabledDateTemplate)">
+                                                        <ng-container *ngTemplateOutlet="dateTemplate || _dateTemplate; context: { $implicit: date }"></ng-container>
+                                                    </ng-container>
+                                                    <ng-container *ngIf="!date.selectable">
+                                                        <ng-container *ngTemplateOutlet="disabledDateTemplate || _disabledDateTemplate; context: { $implicit: date }"></ng-container>
+                                                    </ng-container>
+                                                </span>
+                                                <div *ngIf="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
+                                                    {{ date.day }}
+                                                </div>
+                                            </ng-container>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
                     </div>
-                </div>
-                <div [class]="cx('monthView')" *ngIf="currentView === 'month'" [pBind]="ptm('monthView')">
-                    <span *ngFor="let m of monthPickerValues(); let i = index" (click)="onMonthSelect($event, i)" (keydown)="onMonthCellKeydown($event, i)" [class]="cx('month', { month: m, index: i })" pRipple [pBind]="ptm('month')">
-                        {{ m }}
-                        <div *ngIf="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
+                    <div [class]="cx('monthView')" *ngIf="currentView === 'month'" [pBind]="ptm('monthView')">
+                        <span *ngFor="let m of monthPickerValues(); let i = index" (click)="onMonthSelect($event, i)" (keydown)="onMonthCellKeydown($event, i)" [class]="cx('month', { month: m, index: i })" pRipple [pBind]="ptm('month')">
                             {{ m }}
-                        </div>
-                    </span>
-                </div>
-                <div [class]="cx('yearView')" *ngIf="currentView === 'year'" [pBind]="ptm('yearView')">
-                    <span *ngFor="let y of yearPickerValues()" (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event, y)" [class]="cx('year', { year: y })" pRipple [pBind]="ptm('year')">
-                        {{ y }}
-                        <div *ngIf="isYearSelected(y)" class="p-hidden-accessible" aria-live="polite">
+                            <div *ngIf="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
+                                {{ m }}
+                            </div>
+                        </span>
+                    </div>
+                    <div [class]="cx('yearView')" *ngIf="currentView === 'year'" [pBind]="ptm('yearView')">
+                        <span *ngFor="let y of yearPickerValues()" (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event, y)" [class]="cx('year', { year: y })" pRipple [pBind]="ptm('year')">
                             {{ y }}
-                        </div>
-                    </span>
-                </div>
-            </ng-container>
-            <div [class]="cx('timePicker')" *ngIf="(showTime || timeOnly) && currentView === 'date'" [pBind]="ptm('timePicker')">
-                <div [class]="cx('hourPicker')" [pBind]="ptm('hourPicker')">
-                    <p-button
-                        rounded
-                        variant="text"
-                        severity="secondary"
-                        [styleClass]="cx('pcIncrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (keydown.enter)="incrementHour($event)"
-                        (keydown.space)="incrementHour($event)"
-                        (mousedown)="onTimePickerElementMouseDown($event, 0, 1)"
-                        (mouseup)="onTimePickerElementMouseUp($event)"
-                        (keyup.enter)="onTimePickerElementMouseUp($event)"
-                        (keyup.space)="onTimePickerElementMouseUp($event)"
-                        (mouseleave)="onTimePickerElementMouseLeave()"
-                        [attr.aria-label]="getTranslation('nextHour')"
-                        [pt]="ptm('pcIncrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                    <span [pBind]="ptm('hour')"><ng-container *ngIf="currentHour < 10">0</ng-container>{{ currentHour }}</span>
-                    <p-button
-                        rounded
-                        variant="text"
-                        severity="secondary"
-                        [styleClass]="cx('pcDecrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (keydown.enter)="decrementHour($event)"
-                        (keydown.space)="decrementHour($event)"
-                        (mousedown)="onTimePickerElementMouseDown($event, 0, -1)"
-                        (mouseup)="onTimePickerElementMouseUp($event)"
-                        (keyup.enter)="onTimePickerElementMouseUp($event)"
-                        (keyup.space)="onTimePickerElementMouseUp($event)"
-                        (mouseleave)="onTimePickerElementMouseLeave()"
-                        [attr.aria-label]="getTranslation('prevHour')"
-                        [pt]="ptm('pcDecrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                </div>
-                <div class="p-datepicker-separator" [pBind]="ptm('separatorContainer')">
-                    <span [pBind]="ptm('separator')">{{ timeSeparator }}</span>
-                </div>
-                <div [class]="cx('minutePicker')" [pBind]="ptm('minutePicker')">
-                    <p-button
-                        rounded
-                        variant="text"
-                        severity="secondary"
-                        [styleClass]="cx('pcIncrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (keydown.enter)="incrementMinute($event)"
-                        (keydown.space)="incrementMinute($event)"
-                        (mousedown)="onTimePickerElementMouseDown($event, 1, 1)"
-                        (mouseup)="onTimePickerElementMouseUp($event)"
-                        (keyup.enter)="onTimePickerElementMouseUp($event)"
-                        (keyup.space)="onTimePickerElementMouseUp($event)"
-                        (mouseleave)="onTimePickerElementMouseLeave()"
-                        [attr.aria-label]="getTranslation('nextMinute')"
-                        [pt]="ptm('pcIncrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                    <span [pBind]="ptm('minute')"><ng-container *ngIf="currentMinute < 10">0</ng-container>{{ currentMinute }}</span>
-                    <p-button
-                        rounded
-                        variant="text"
-                        severity="secondary"
-                        [styleClass]="cx('pcDecrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (keydown.enter)="decrementMinute($event)"
-                        (keydown.space)="decrementMinute($event)"
-                        (mousedown)="onTimePickerElementMouseDown($event, 1, -1)"
-                        (mouseup)="onTimePickerElementMouseUp($event)"
-                        (keyup.enter)="onTimePickerElementMouseUp($event)"
-                        (keyup.space)="onTimePickerElementMouseUp($event)"
-                        (mouseleave)="onTimePickerElementMouseLeave()"
-                        [attr.aria-label]="getTranslation('prevMinute')"
-                        [pt]="ptm('pcDecrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                </div>
-                <div [class]="cx('separator')" *ngIf="showSeconds" [pBind]="ptm('separatorContainer')">
-                    <span [pBind]="ptm('separator')">{{ timeSeparator }}</span>
-                </div>
-                <div [class]="cx('secondPicker')" *ngIf="showSeconds" [pBind]="ptm('secondPicker')">
-                    <p-button
-                        rounded
-                        variant="text"
-                        severity="secondary"
-                        [styleClass]="cx('pcIncrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (keydown.enter)="incrementSecond($event)"
-                        (keydown.space)="incrementSecond($event)"
-                        (mousedown)="onTimePickerElementMouseDown($event, 2, 1)"
-                        (mouseup)="onTimePickerElementMouseUp($event)"
-                        (keyup.enter)="onTimePickerElementMouseUp($event)"
-                        (keyup.space)="onTimePickerElementMouseUp($event)"
-                        (mouseleave)="onTimePickerElementMouseLeave()"
-                        [attr.aria-label]="getTranslation('nextSecond')"
-                        [pt]="ptm('pcIncrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                    <span [pBind]="ptm('second')"><ng-container *ngIf="currentSecond < 10">0</ng-container>{{ currentSecond }}</span>
-                    <p-button
-                        rounded
-                        variant="text"
-                        severity="secondary"
-                        [styleClass]="cx('pcDecrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (keydown.enter)="decrementSecond($event)"
-                        (keydown.space)="decrementSecond($event)"
-                        (mousedown)="onTimePickerElementMouseDown($event, 2, -1)"
-                        (mouseup)="onTimePickerElementMouseUp($event)"
-                        (keyup.enter)="onTimePickerElementMouseUp($event)"
-                        (keyup.space)="onTimePickerElementMouseUp($event)"
-                        (mouseleave)="onTimePickerElementMouseLeave()"
-                        [attr.aria-label]="getTranslation('prevSecond')"
-                        [pt]="ptm('pcDecrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                </div>
-                <div [class]="cx('separator')" *ngIf="hourFormat == '12'" [pBind]="ptm('separatorContainer')">
-                    <span [pBind]="ptm('separator')">{{ timeSeparator }}</span>
+                            <div *ngIf="isYearSelected(y)" class="p-hidden-accessible" aria-live="polite">
+                                {{ y }}
+                            </div>
+                        </span>
+                    </div>
+                </ng-container>
+                <div [class]="cx('timePicker')" *ngIf="(showTime || timeOnly) && currentView === 'date'" [pBind]="ptm('timePicker')">
+                    <div [class]="cx('hourPicker')" [pBind]="ptm('hourPicker')">
+                        <p-button
+                            rounded
+                            variant="text"
+                            severity="secondary"
+                            [styleClass]="cx('pcIncrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="incrementHour($event)"
+                            (keydown.space)="incrementHour($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 0, 1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('nextHour')"
+                            [pt]="ptm('pcIncrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                        <span [pBind]="ptm('hour')"><ng-container *ngIf="currentHour < 10">0</ng-container>{{ currentHour }}</span>
+                        <p-button
+                            rounded
+                            variant="text"
+                            severity="secondary"
+                            [styleClass]="cx('pcDecrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="decrementHour($event)"
+                            (keydown.space)="decrementHour($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 0, -1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('prevHour')"
+                            [pt]="ptm('pcDecrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                    </div>
+                    <div class="p-datepicker-separator" [pBind]="ptm('separatorContainer')">
+                        <span [pBind]="ptm('separator')">{{ timeSeparator }}</span>
+                    </div>
+                    <div [class]="cx('minutePicker')" [pBind]="ptm('minutePicker')">
+                        <p-button
+                            rounded
+                            variant="text"
+                            severity="secondary"
+                            [styleClass]="cx('pcIncrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="incrementMinute($event)"
+                            (keydown.space)="incrementMinute($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 1, 1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('nextMinute')"
+                            [pt]="ptm('pcIncrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                        <span [pBind]="ptm('minute')"><ng-container *ngIf="currentMinute < 10">0</ng-container>{{ currentMinute }}</span>
+                        <p-button
+                            rounded
+                            variant="text"
+                            severity="secondary"
+                            [styleClass]="cx('pcDecrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="decrementMinute($event)"
+                            (keydown.space)="decrementMinute($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 1, -1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('prevMinute')"
+                            [pt]="ptm('pcDecrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                    </div>
+                    <div [class]="cx('separator')" *ngIf="showSeconds" [pBind]="ptm('separatorContainer')">
+                        <span [pBind]="ptm('separator')">{{ timeSeparator }}</span>
+                    </div>
+                    <div [class]="cx('secondPicker')" *ngIf="showSeconds" [pBind]="ptm('secondPicker')">
+                        <p-button
+                            rounded
+                            variant="text"
+                            severity="secondary"
+                            [styleClass]="cx('pcIncrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="incrementSecond($event)"
+                            (keydown.space)="incrementSecond($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 2, 1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('nextSecond')"
+                            [pt]="ptm('pcIncrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                        <span [pBind]="ptm('second')"><ng-container *ngIf="currentSecond < 10">0</ng-container>{{ currentSecond }}</span>
+                        <p-button
+                            rounded
+                            variant="text"
+                            severity="secondary"
+                            [styleClass]="cx('pcDecrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="decrementSecond($event)"
+                            (keydown.space)="decrementSecond($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 2, -1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('prevSecond')"
+                            [pt]="ptm('pcDecrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                    </div>
+                    <div [class]="cx('separator')" *ngIf="hourFormat == '12'" [pBind]="ptm('separatorContainer')">
+                        <span [pBind]="ptm('separator')">{{ timeSeparator }}</span>
+                    </div>
+                    <div [class]="cx('ampmPicker')" *ngIf="hourFormat == '12'" [pBind]="ptm('ampmPicker')">
+                        <p-button
+                            text
+                            rounded
+                            severity="secondary"
+                            [styleClass]="cx('pcIncrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (onClick)="toggleAMPM($event)"
+                            (keydown.enter)="toggleAMPM($event)"
+                            [attr.aria-label]="getTranslation('am')"
+                            [pt]="ptm('pcIncrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                        <span [pBind]="ptm('ampm')">{{ pm ? 'PM' : 'AM' }}</span>
+                        <p-button
+                            text
+                            rounded
+                            severity="secondary"
+                            [styleClass]="cx('pcDecrementButton')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (click)="toggleAMPM($event)"
+                            (keydown.enter)="toggleAMPM($event)"
+                            [attr.aria-label]="getTranslation('pm')"
+                            [pt]="ptm('pcDecrementButton')"
+                            [attr.data-pc-group-section]="'timepickerbutton'"
+                        >
+                            <ng-template #icon>
+                                <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
+                                <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                    </div>
                 </div>
-                <div [class]="cx('ampmPicker')" *ngIf="hourFormat == '12'" [pBind]="ptm('ampmPicker')">
-                    <p-button
-                        text
-                        rounded
-                        severity="secondary"
-                        [styleClass]="cx('pcIncrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (onClick)="toggleAMPM($event)"
-                        (keydown.enter)="toggleAMPM($event)"
-                        [attr.aria-label]="getTranslation('am')"
-                        [pt]="ptm('pcIncrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" [pBind]="ptm('pcIncrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                    <span [pBind]="ptm('ampm')">{{ pm ? 'PM' : 'AM' }}</span>
-                    <p-button
-                        text
-                        rounded
-                        severity="secondary"
-                        [styleClass]="cx('pcDecrementButton')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (click)="toggleAMPM($event)"
-                        (keydown.enter)="toggleAMPM($event)"
-                        [attr.aria-label]="getTranslation('pm')"
-                        [pt]="ptm('pcDecrementButton')"
-                        [attr.data-pc-group-section]="'timepickerbutton'"
-                    >
-                        <ng-template #icon>
-                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" [pBind]="ptm('pcDecrementButton')['icon']" />
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
+                <div [class]="cx('buttonbar')" *ngIf="showButtonBar" [pBind]="ptm('buttonbar')">
+                    @if (buttonBarTemplate || _buttonBarTemplate) {
+                        <ng-container *ngTemplateOutlet="buttonBarTemplate || _buttonBarTemplate; context: { todayCallback: onTodayButtonClick.bind(this), clearCallback: onClearButtonClick.bind(this) }"></ng-container>
+                    } @else {
+                        <p-button
+                            size="small"
+                            [styleClass]="cx('pcTodayButton')"
+                            [label]="getTranslation('today')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (onClick)="onTodayButtonClick($event)"
+                            [ngClass]="todayButtonStyleClass"
+                            severity="secondary"
+                            variant="text"
+                            size="small"
+                            [pt]="ptm('pcTodayButton')"
+                            [attr.data-pc-group-section]="'button'"
+                        />
+                        <p-button
+                            size="small"
+                            [styleClass]="cx('pcClearButton')"
+                            [label]="getTranslation('clear')"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (onClick)="onClearButtonClick($event)"
+                            [ngClass]="clearButtonStyleClass"
+                            severity="secondary"
+                            variant="text"
+                            size="small"
+                            [pt]="ptm('pcClearButton')"
+                            [attr.data-pc-group-section]="'button'"
+                        />
+                    }
                 </div>
+                <ng-content select="p-footer"></ng-content>
+                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
             </div>
-            <div [class]="cx('buttonbar')" *ngIf="showButtonBar" [pBind]="ptm('buttonbar')">
-                @if (buttonBarTemplate || _buttonBarTemplate) {
-                    <ng-container *ngTemplateOutlet="buttonBarTemplate || _buttonBarTemplate; context: { todayCallback: onTodayButtonClick.bind(this), clearCallback: onClearButtonClick.bind(this) }"></ng-container>
-                } @else {
-                    <p-button
-                        size="small"
-                        [styleClass]="cx('pcTodayButton')"
-                        [label]="getTranslation('today')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (onClick)="onTodayButtonClick($event)"
-                        [ngClass]="todayButtonStyleClass"
-                        severity="secondary"
-                        variant="text"
-                        size="small"
-                        [pt]="ptm('pcTodayButton')"
-                        [attr.data-pc-group-section]="'button'"
-                    />
-                    <p-button
-                        size="small"
-                        [styleClass]="cx('pcClearButton')"
-                        [label]="getTranslation('clear')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (onClick)="onClearButtonClick($event)"
-                        [ngClass]="clearButtonStyleClass"
-                        severity="secondary"
-                        variant="text"
-                        size="small"
-                        [pt]="ptm('pcClearButton')"
-                        [attr.data-pc-group-section]="'button'"
-                    />
-                }
-            </div>
-            <ng-content select="p-footer"></ng-content>
-            <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
-        </div>
+        </p-motion>
     `,
-                    animations: [
-                        trigger('overlayAnimation', [
-                            state('visibleTouchUI', style$2({
-                                transform: 'translate(-50%,-50%)',
-                                opacity: 1
-                            })),
-                            transition('void => visible', [style$2({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}', style$2({ opacity: 1, transform: '*' }))]),
-                            transition('visible => void', [animate('{{hideTransitionParams}}', style$2({ opacity: 0 }))]),
-                            transition('void => visibleTouchUI', [style$2({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }), animate('{{showTransitionParams}}')]),
-                            transition('visibleTouchUI => void', [
-                                animate('{{hideTransitionParams}}', style$2({
-                                    opacity: 0,
-                                    transform: 'translate3d(-50%, -40%, 0) scale(0.9)'
-                                }))
-                            ])
-                        ])
-                    ],
                     providers: [DATEPICKER_VALUE_ACCESSOR, DatePickerStyle, { provide: DATEPICKER_INSTANCE, useExisting: DatePicker }, { provide: PARENT_INSTANCE, useExisting: DatePicker }],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
@@ -4385,7 +4342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], defaultDate: [{
                 type: Input
-            }], onFocus: [{
+            }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onFocus: [{
                 type: Output
             }], onBlur: [{
                 type: Output
@@ -4459,11 +4416,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class DatePickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: DatePickerModule, imports: [DatePicker, SharedModule], exports: [DatePicker, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatePickerModule, imports: [DatePicker, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: DatePickerModule, imports: [DatePicker, SharedModule], exports: [DatePicker, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DatePickerModule, imports: [DatePicker, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DatePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DatePicker, SharedModule],