primeng/fesm2022/primeng-calendar.mjs.map

[](https://badge.fury.io/js/primeng) [](https://www.npmjs.com/package/primeng) [![Actions CI](https://github.com/primefaces/primeng/workflows/No

{"version":3,"file":"primeng-calendar.mjs","sources":["../../src/app/components/calendar/calendar.ts","../../src/app/components/calendar/primeng-calendar.ts"],"sourcesContent":["import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';\nimport { CommonModule, DOCUMENT } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Inject,\n    Input,\n    NgModule,\n    NgZone,\n    OnDestroy,\n    OnInit,\n    Output,\n    QueryList,\n    Renderer2,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { OverlayService, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api';\nimport { ButtonModule } from 'primeng/button';\nimport { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom';\nimport { RippleModule } from 'primeng/ripple';\nimport { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';\nimport { Subscription } from 'rxjs';\nimport { ChevronLeftIcon } from 'primeng/icons/chevronleft';\nimport { ChevronRightIcon } from 'primeng/icons/chevronright';\nimport { ChevronUpIcon } from 'primeng/icons/chevronup';\nimport { ChevronDownIcon } from 'primeng/icons/chevrondown';\nimport { TimesIcon } from 'primeng/icons/times';\nimport { CalendarIcon } from 'primeng/icons/calendar';\nimport { Nullable, VoidListener } from 'primeng/ts-helpers';\nimport { NavigationState, CalendarResponsiveOptions, CalendarTypeView, LocaleSettings, Month, CalendarMonthChangeEvent, CalendarYearChangeEvent } from './calendar.interface';\n\nexport const CALENDAR_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => Calendar),\n    multi: true\n};\n/**\n * Calendar also known as DatePicker, is a form component to work with dates.\n * @group Components\n */\n@Component({\n    selector: 'p-calendar',\n    template: `\n        <span #container [ngClass]=\"{ 'p-calendar': true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-calendar-disabled': disabled, 'p-focus': focus }\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ng-template [ngIf]=\"!inline\">\n                <input\n                    #inputfield\n                    type=\"text\"\n                    [attr.id]=\"inputId\"\n                    [attr.name]=\"name\"\n                    [attr.required]=\"required\"\n                    [attr.aria-required]=\"required\"\n                    [value]=\"inputFieldValue\"\n                    (focus)=\"onInputFocus($event)\"\n                    (keydown)=\"onInputKeydown($event)\"\n                    (click)=\"onInputClick()\"\n                    (blur)=\"onInputBlur($event)\"\n                    [readonly]=\"readonlyInput\"\n                    (input)=\"onUserInput($event)\"\n                    [ngStyle]=\"inputStyle\"\n                    [class]=\"inputStyleClass\"\n                    [placeholder]=\"placeholder || ''\"\n                    [disabled]=\"disabled\"\n                    [attr.tabindex]=\"tabindex\"\n                    [attr.inputmode]=\"touchUI ? 'off' : null\"\n                    [ngClass]=\"'p-inputtext p-component'\"\n                    autocomplete=\"off\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                />\n                <ng-container *ngIf=\"showClear && !disabled && value != null\">\n                    <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'p-calendar-clear-icon'\" (click)=\"clear()\" />\n                    <span *ngIf=\"clearIconTemplate\" class=\"p-calendar-clear-icon\" (click)=\"clear()\">\n                        <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n                    </span>\n                </ng-container>\n                <button type=\"button\" [attr.aria-label]=\"iconAriaLabel\" pButton pRipple *ngIf=\"showIcon\" (click)=\"onButtonClick($event, inputfield)\" class=\"p-datepicker-trigger p-button-icon-only\" [disabled]=\"disabled\" tabindex=\"0\">\n                    <span *ngIf=\"icon\" [ngClass]=\"icon\"></span>\n                    <ng-container *ngIf=\"!icon\">\n                        <CalendarIcon *ngIf=\"!triggerIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\n                    </ng-container>\n                </button>\n            </ng-template>\n            <div\n                #contentWrapper\n                [class]=\"panelStyleClass\"\n                [ngStyle]=\"panelStyle\"\n                [ngClass]=\"{\n                    'p-datepicker p-component': true,\n                    'p-datepicker-inline': inline,\n                    'p-disabled': disabled,\n                    'p-datepicker-timeonly': timeOnly,\n                    'p-datepicker-multiple-month': this.numberOfMonths > 1,\n                    'p-datepicker-monthpicker': view === 'month',\n                    'p-datepicker-touch-ui': touchUI\n                }\"\n                [@overlayAnimation]=\"\n                    touchUI\n                        ? { value: 'visibleTouchUI', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\n                        : { value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\n                \"\n                [@.disabled]=\"inline === true\"\n                (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n                (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\"\n                (click)=\"onOverlayClick($event)\"\n                *ngIf=\"inline || overlayVisible\"\n            >\n                <ng-content select=\"p-header\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                <ng-container *ngIf=\"!timeOnly\">\n                    <div class=\"p-datepicker-group-container\">\n                        <div class=\"p-datepicker-group\" *ngFor=\"let month of months; let i = index\">\n                            <div class=\"p-datepicker-header\">\n                                <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"p-datepicker-prev p-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" pRipple>\n                                    <ChevronLeftIcon [styleClass]=\"'p-datepicker-prev-icon'\" *ngIf=\"!previousIconTemplate\" />\n                                    <span *ngIf=\"previousIconTemplate\" class=\"p-datepicker-prev-icon\">\n                                        <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\n                                    </span>\n                                </button>\n                                <div class=\"p-datepicker-title\">\n                                    <button type=\"button\" (click)=\"switchToMonthView($event)\" (keydown)=\"onContainerButtonKeydown($event)\" *ngIf=\"currentView === 'date'\" class=\"p-datepicker-month p-link\" [disabled]=\"switchViewButtonDisabled()\">\n                                        {{ getMonthName(month.month) }}\n                                    </button>\n                                    <button type=\"button\" (click)=\"switchToYearView($event)\" (keydown)=\"onContainerButtonKeydown($event)\" *ngIf=\"currentView !== 'year'\" class=\"p-datepicker-year p-link\" [disabled]=\"switchViewButtonDisabled()\">\n                                        {{ getYear(month) }}\n                                    </button>\n                                    <span class=\"p-datepicker-decade\" *ngIf=\"currentView === 'year'\">\n                                        <ng-container *ngIf=\"!decadeTemplate\">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>\n                                        <ng-container *ngTemplateOutlet=\"decadeTemplate; context: { $implicit: yearPickerValues }\"></ng-container>\n                                    </span>\n                                </div>\n                                <button\n                                    (keydown)=\"onContainerButtonKeydown($event)\"\n                                    class=\"p-datepicker-next p-link\"\n                                    (click)=\"onNextButtonClick($event)\"\n                                    [style.display]=\"numberOfMonths === 1 ? 'inline-flex' : i === numberOfMonths - 1 ? 'inline-flex' : 'none'\"\n                                    type=\"button\"\n                                    pRipple\n                                >\n                                    <ChevronRightIcon [styleClass]=\"'p-datepicker-next-icon'\" *ngIf=\"!nextIconTemplate\" />\n                                    <span *ngIf=\"nextIconTemplate\" class=\"p-datepicker-next-icon\">\n                                        <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\n                                    </span>\n                                </button>\n                            </div>\n                            <div class=\"p-datepicker-calendar-container\" *ngIf=\"currentView === 'date'\">\n                                <table class=\"p-datepicker-calendar\">\n                                    <thead>\n                                        <tr>\n                                            <th *ngIf=\"showWeek\" class=\"p-datepicker-weekheader p-disabled\">\n                                                <span>{{ getTranslation('weekHeader') }}</span>\n                                            </th>\n                                            <th scope=\"col\" *ngFor=\"let weekDay of weekDays; let begin = first; let end = last\">\n                                                <span>{{ weekDay }}</span>\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        <tr *ngFor=\"let week of month.dates; let j = index\">\n                                            <td *ngIf=\"showWeek\" class=\"p-datepicker-weeknumber\">\n                                                <span class=\"p-disabled\">\n                                                    {{ month.weekNumbers[j] }}\n                                                </span>\n                                            </td>\n                                            <td *ngFor=\"let date of week\" [ngClass]=\"{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }\">\n                                                <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                                    <span\n                                                        [ngClass]=\"{ 'p-highlight': isSelected(date) && date.selectable, 'p-disabled': !date.selectable }\"\n                                                        (click)=\"onDateSelect($event, date)\"\n                                                        draggable=\"false\"\n                                                        (keydown)=\"onDateCellKeydown($event, date, i)\"\n                                                        pRipple\n                                                    >\n                                                        <ng-container *ngIf=\"!dateTemplate && (date.selectable || !disabledDateTemplate)\">{{ date.day }}</ng-container>\n                                                        <ng-container *ngIf=\"date.selectable || !disabledDateTemplate\">\n                                                            <ng-container *ngTemplateOutlet=\"dateTemplate; context: { $implicit: date }\"></ng-container>\n                                                        </ng-container>\n                                                        <ng-container *ngIf=\"!date.selectable\">\n                                                            <ng-container *ngTemplateOutlet=\"disabledDateTemplate; context: { $implicit: date }\"></ng-container>\n                                                        </ng-container>\n                                                    </span>\n                                                </ng-container>\n                                            </td>\n                                        </tr>\n                                    </tbody>\n                                </table>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"p-monthpicker\" *ngIf=\"currentView === 'month'\">\n                        <span\n                            *ngFor=\"let m of monthPickerValues(); let i = index\"\n                            (click)=\"onMonthSelect($event, i)\"\n                            (keydown)=\"onMonthCellKeydown($event, i)\"\n                            class=\"p-monthpicker-month\"\n                            [ngClass]=\"{ 'p-highlight': isMonthSelected(i), 'p-disabled': isMonthDisabled(i) }\"\n                            pRipple\n                        >\n                            {{ m }}\n                        </span>\n                    </div>\n                    <div class=\"p-yearpicker\" *ngIf=\"currentView === 'year'\">\n                        <span\n                            *ngFor=\"let y of yearPickerValues()\"\n                            (click)=\"onYearSelect($event, y)\"\n                            (keydown)=\"onYearCellKeydown($event, y)\"\n                            class=\"p-yearpicker-year\"\n                            [ngClass]=\"{ 'p-highlight': isYearSelected(y), 'p-disabled': isYearDisabled(y) }\"\n                            pRipple\n                        >\n                            {{ y }}\n                        </span>\n                    </div>\n                </ng-container>\n                <div class=\"p-timepicker\" *ngIf=\"(showTime || timeOnly) && currentView === 'date'\">\n                    <div class=\"p-hour-picker\">\n                        <button\n                            class=\"p-link\"\n                            type=\"button\"\n                            (keydown)=\"onContainerButtonKeydown($event)\"\n                            (keydown.enter)=\"incrementHour($event)\"\n                            (keydown.space)=\"incrementHour($event)\"\n                            (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\"\n                            (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                            (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                            (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                            (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                            pRipple\n                        >\n                            <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                        </button>\n                        <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{ currentHour }}</span>\n                        <button\n                            class=\"p-link\"\n                            type=\"button\"\n                            (keydown)=\"onContainerButtonKeydown($event)\"\n                            (keydown.enter)=\"decrementHour($event)\"\n                            (keydown.space)=\"decrementHour($event)\"\n                            (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\"\n                            (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                            (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                            (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                            (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                            pRipple\n                        >\n                            <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                        </button>\n                    </div>\n                    <div class=\"p-separator\">\n                        <span>{{ timeSeparator }}</span>\n                    </div>\n                    <div class=\"p-minute-picker\">\n                        <button\n                            class=\"p-link\"\n                            type=\"button\"\n                            (keydown)=\"onContainerButtonKeydown($event)\"\n                            (keydown.enter)=\"incrementMinute($event)\"\n                            (keydown.space)=\"incrementMinute($event)\"\n                            (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\"\n                            (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                            (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                            (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                            (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                            pRipple\n                        >\n                            <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                        </button>\n                        <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{ currentMinute }}</span>\n                        <button\n                            class=\"p-link\"\n                            type=\"button\"\n                            (keydown)=\"onContainerButtonKeydown($event)\"\n                            (keydown.enter)=\"decrementMinute($event)\"\n                            (keydown.space)=\"decrementMinute($event)\"\n                            (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\"\n                            (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                            (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                            (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                            (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                            pRipple\n                        >\n                            <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                        </button>\n                    </div>\n                    <div class=\"p-separator\" *ngIf=\"showSeconds\">\n                        <span>{{ timeSeparator }}</span>\n                    </div>\n                    <div class=\"p-second-picker\" *ngIf=\"showSeconds\">\n                        <button\n                            class=\"p-link\"\n                            type=\"button\"\n                            (keydown)=\"onContainerButtonKeydown($event)\"\n                            (keydown.enter)=\"incrementSecond($event)\"\n                            (keydown.space)=\"incrementSecond($event)\"\n                            (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\"\n                            (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                            (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                            (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                            (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                            pRipple\n                        >\n                            <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                        </button>\n                        <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{ currentSecond }}</span>\n                        <button\n                            class=\"p-link\"\n                            type=\"button\"\n                            (keydown)=\"onContainerButtonKeydown($event)\"\n                            (keydown.enter)=\"decrementSecond($event)\"\n                            (keydown.space)=\"decrementSecond($event)\"\n                            (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\"\n                            (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                            (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                            (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                            (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                            pRipple\n                        >\n                            <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                        </button>\n                    </div>\n                    <div class=\"p-ampm-picker\" *ngIf=\"hourFormat == '12'\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" pRipple>\n                            <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                        </button>\n                        <span>{{ pm ? 'PM' : 'AM' }}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" pRipple>\n                            <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"p-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\n                    <button type=\"button\" [label]=\"getTranslation('today')\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"onTodayButtonClick($event)\" pButton pRipple [ngClass]=\"[todayButtonStyleClass]\"></button>\n                    <button type=\"button\" [label]=\"getTranslation('clear')\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"onClearButtonClick($event)\" pButton pRipple [ngClass]=\"[clearButtonStyleClass]\"></button>\n                </div>\n                <ng-content select=\"p-footer\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n        </span>\n    `,\n    animations: [\n        trigger('overlayAnimation', [\n            state(\n                'visibleTouchUI',\n                style({\n                    transform: 'translate(-50%,-50%)',\n                    opacity: 1\n                })\n            ),\n            transition('void => visible', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}', style({ opacity: 1, transform: '*' }))]),\n            transition('visible => void', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))]),\n            transition('void => visibleTouchUI', [style({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }), animate('{{showTransitionParams}}')]),\n            transition('visibleTouchUI => void', [\n                animate(\n                    '{{hideTransitionParams}}',\n                    style({\n                        opacity: 0,\n                        transform: 'translate3d(-50%, -40%, 0) scale(0.9)'\n                    })\n                )\n            ])\n        ])\n    ],\n    host: {\n        class: 'p-element p-inputwrapper',\n        '[class.p-inputwrapper-filled]': 'filled',\n        '[class.p-inputwrapper-focus]': 'focus',\n        '[class.p-calendar-clearable]': 'showClear && !disabled'\n    },\n    providers: [CALENDAR_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./calendar.css']\n})\nexport class Calendar implements OnInit, OnDestroy, ControlValueAccessor {\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Inline style of the input field.\n     * @group Props\n     */\n    @Input() inputStyle: { [klass: string]: any } | null | undefined;\n    /**\n     * Identifier of the focus input to match a label defined for the component.\n     * @group Props\n     */\n    @Input() inputId: string | undefined;\n    /**\n     * Name of the input element.\n     * @group Props\n     */\n    @Input() name: string | undefined;\n    /**\n     * Style class of the input field.\n     * @group Props\n     */\n    @Input() inputStyleClass: string | undefined;\n    /**\n     * Placeholder text for the input.\n     * @group Props\n     */\n    @Input() placeholder: string | undefined;\n    /**\n     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.\n     * @group Props\n     */\n    @Input() ariaLabelledBy: string | undefined;\n    /**\n     * Defines a string that labels the icon button for accessibility.\n     * @group Props\n     */\n    @Input() iconAriaLabel: string | undefined;\n    /**\n     * When specified, disables the component.\n     * @group Props\n     */\n    @Input() disabled: boolean | undefined;\n    /**\n     * Format of the date which can also be defined at locale settings.\n     * @group Props\n     */\n    @Input() dateFormat: string | undefined;\n    /**\n     * Separator for multiple selection mode.\n     * @group Props\n     */\n    @Input() multipleSeparator: string = ',';\n    /**\n     * Separator for joining start and end dates on range selection mode.\n     * @group Props\n     */\n    @Input() rangeSeparator: string = '-';\n    /**\n     * When enabled, displays the calendar as inline. Default is false for popup mode.\n     * @group Props\n     */\n    @Input() inline: boolean = false;\n    /**\n     * Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.\n     * @group Props\n     */\n    @Input() showOtherMonths: boolean = true;\n    /**\n     * Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.\n     * @group Props\n     */\n    @Input() selectOtherMonths: boolean | undefined;\n    /**\n     * When enabled, displays a button with icon next to input.\n     * @group Props\n     */\n    @Input() showIcon: boolean | undefined;\n    /**\n     * Icon of the calendar button.\n     * @group Props\n     */\n    @Input() icon: string | undefined;\n    /**\n     * Target element to attach the overlay, valid values are \"body\" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]=\"mydiv\" for a div element having#mydiv as variable name).\n     * @group Props\n     */\n    @Input() appendTo: HTMLElement | ElementRef | TemplateRef<any> | string | null | undefined | any;\n    /**\n     * When specified, prevents entering the date manually with keyboard.\n     * @group Props\n     */\n    @Input() readonlyInput: boolean | undefined;\n    /**\n     * The cutoff year for determining the century for a date.\n     * @group Props\n     */\n    @Input() shortYearCutoff: any = '+10';\n    /**\n     * Whether the month should be rendered as a dropdown instead of text.\n     * @group Props\n     * @deprecated Navigator is always on.\n     */\n    @Input() monthNavigator: boolean | undefined;\n    /**\n     * Whether the year should be rendered as a dropdown instead of text.\n     * @group Props\n     * @deprecated  Navigator is always on.\n     */\n    @Input() yearNavigator: boolean | undefined;\n    /**\n     * Specifies 12 or 24 hour format.\n     * @group Props\n     */\n    @Input() hourFormat: string = '24';\n    /**\n     * Whether to display timepicker only.\n     * @group Props\n     */\n    @Input() timeOnly: boolean | undefined;\n    /**\n     * Hours to change per step.\n     * @group Props\n     */\n    @Input() stepHour: number = 1;\n    /**\n     * Minutes to change per step.\n     * @group Props\n     */\n    @Input() stepMinute: number = 1;\n    /**\n     * Seconds to change per step.\n     * @group Props\n     */\n    @Input() stepSecond: number = 1;\n    /**\n     * Whether to show the seconds in time picker.\n     * @group Props\n     */\n    @Input() showSeconds: boolean = false;\n    /**\n     * When present, it specifies that an input field must be filled out before submitting the form.\n     * @group Props\n     */\n    @Input() required: boolean | undefined;\n    /**\n     * When disabled, datepicker will not be visible with input focus.\n     * @group Props\n     */\n    @Input() showOnFocus: boolean = true;\n    /**\n     * When enabled, calendar will show week numbers.\n     * @group Props\n     */\n    @Input() showWeek: boolean = false;\n    /**\n     * When enabled, a clear icon is displayed to clear the value.\n     * @group Props\n     */\n    @Input() showClear: boolean = false;\n    /**\n     * Type of the value to write back to ngModel, default is date and alternative is string.\n     * @group Props\n     */\n    @Input() dataType: string = 'date';\n    /**\n     * Defines the quantity of the selection, valid values are \"single\", \"multiple\" and \"range\".\n     * @group Props\n     */\n    @Input() selectionMode: 'single' | 'multiple' | 'range' | undefined = 'single';\n    /**\n     * Maximum number of selectable dates in multiple mode.\n     * @group Props\n     */\n    @Input() maxDateCount: number | undefined;\n    /**\n     * Whether to display today and clear buttons at the footer\n     * @group Props\n     */\n    @Input() showButtonBar: boolean | undefined;\n    /**\n     * Style class of the today button.\n     * @group Props\n     */\n    @Input() todayButtonStyleClass: string = 'p-button-text';\n    /**\n     * Style class of the clear button.\n     * @group Props\n     */\n    @Input() clearButtonStyleClass: string = 'p-button-text';\n    /**\n     * Whether to automatically manage layering.\n     * @group Props\n     */\n    @Input() autoZIndex: boolean = true;\n    /**\n     * Base zIndex value to use in layering.\n     * @group Props\n     */\n    @Input() baseZIndex: number = 0;\n    /**\n     * Style class of the datetimepicker container element.\n     * @group Props\n     */\n    @Input() panelStyleClass: string | undefined;\n    /**\n     * Inline style of the datetimepicker container element.\n     * @group Props\n     */\n    @Input() panelStyle: any;\n    /**\n     * Keep invalid value when input blur.\n     * @group Props\n     */\n    @Input() keepInvalid: boolean = false;\n    /**\n     * Whether to hide the overlay on date selection.\n     * @group Props\n     */\n    @Input() hideOnDateTimeSelect: boolean = true;\n    /**\n     * When enabled, calendar overlay is displayed as optimized for touch devices.\n     * @group Props\n     */\n    @Input() touchUI: boolean | undefined;\n    /**\n     * Separator of time selector.\n     * @group Props\n     */\n    @Input() timeSeparator: string = ':';\n    /**\n     * When enabled, can only focus on elements inside the calendar.\n     * @group Props\n     */\n    @Input() focusTrap: boolean = true;\n    /**\n     * Transition options of the show animation.\n     * @group Props\n     */\n    @Input() showTransitionOptions: string = '.12s cubic-bezier(0, 0, 0.2, 1)';\n    /**\n     * Transition options of the hide animation.\n     * @group Props\n     */\n    @Input() hideTransitionOptions: string = '.1s linear';\n    /**\n     * Index of the element in tabbing order.\n     * @group Props\n     */\n    @Input() tabindex: number | undefined;\n    /**\n     * The minimum selectable date.\n     * @group Props\n     */\n    @Input() get minDate(): Date {\n        return this._minDate;\n    }\n    set minDate(date: Date) {\n        this._minDate = date;\n\n        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {\n            this.createMonths(this.currentMonth, this.currentYear);\n        }\n    }\n    /**\n     * The maximum selectable date.\n     * @group Props\n     */\n    @Input() get maxDate(): Date {\n        return this._maxDate;\n    }\n    set maxDate(date: Date) {\n        this._maxDate = date;\n\n        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {\n            this.createMonths(this.currentMonth, this.currentYear);\n        }\n    }\n    /**\n     * Array with dates that should be disabled (not selectable).\n     * @group Props\n     */\n    @Input() get disabledDates(): Date[] {\n        return this._disabledDates;\n    }\n    set disabledDates(disabledDates: Date[]) {\n        this._disabledDates = disabledDates;\n        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {\n            this.createMonths(this.currentMonth, this.currentYear);\n        }\n    }\n    /**\n     * Array with weekday numbers that should be disabled (not selectable).\n     * @group Props\n     */\n    @Input() get disabledDays(): number[] {\n        return this._disabledDays;\n    }\n    set disabledDays(disabledDays: number[]) {\n        this._disabledDays = disabledDays;\n\n        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {\n            this.createMonths(this.currentMonth, this.currentYear);\n        }\n    }\n    /**\n     * The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).\n     * @group Props\n     * @deprecated Years are based on decades by default.\n     */\n    @Input() get yearRange(): string {\n        return this._yearRange;\n    }\n    set yearRange(yearRange: string) {\n        this._yearRange = yearRange;\n\n        if (yearRange) {\n            const years = yearRange.split(':');\n            const yearStart = parseInt(years[0]);\n            const yearEnd = parseInt(years[1]);\n\n            this.populateYearOptions(yearStart, yearEnd);\n        }\n    }\n    /**\n     * Whether to display timepicker.\n     * @group Props\n     */\n    @Input() get showTime(): boolean {\n        return this._showTime;\n    }\n    set showTime(showTime: boolean) {\n        this._showTime = showTime;\n\n        if (this.currentHour === undefined) {\n            this.initTime(this.value || new Date());\n        }\n        this.updateInputfield();\n    }\n    /**\n     * An array of options for responsive design.\n     * @group Props\n     */\n    @Input() get responsiveOptions(): CalendarResponsiveOptions[] {\n        return this._responsiveOptions;\n    }\n    set responsiveOptions(responsiveOptions: CalendarResponsiveOptions[]) {\n        this._responsiveOptions = responsiveOptions;\n\n        this.destroyResponsiveStyleElement();\n        this.createResponsiveStyle();\n    }\n    /**\n     * Number of months to display.\n     * @group Props\n     */\n    @Input() get numberOfMonths(): number {\n        return this._numberOfMonths;\n    }\n    set numberOfMonths(numberOfMonths: number) {\n        this._numberOfMonths = numberOfMonths;\n\n        this.destroyResponsiveStyleElement();\n        this.createResponsiveStyle();\n    }\n    /**\n     * Defines the first of the week for various date calculations.\n     * @group Props\n     */\n    @Input() get firstDayOfWeek(): number {\n        return this._firstDayOfWeek;\n    }\n    set firstDayOfWeek(firstDayOfWeek: number) {\n        this._firstDayOfWeek = firstDayOfWeek;\n\n        this.createWeekDays();\n    }\n    /**\n     * Option to set calendar locale.\n     * @group Props\n     * @deprecated Locale property has no effect, use new i18n API instead.\n     */\n    @Input() set locale(newLocale: LocaleSettings) {\n        console.warn('Locale property has no effect, use new i18n API instead.');\n    }\n    /**\n     * Type of view to display, valid values are \"date\" for datepicker and \"month\" for month picker.\n     * @group Props\n     */\n    @Input() get view(): CalendarTypeView {\n        return this._view;\n    }\n    set view(view: CalendarTypeView) {\n        this._view = view;\n        this.currentView = this._view;\n    }\n    /**\n     * Set the date to highlight on first opening if the field is blank.\n     * @group Props\n     */\n    @Input() get defaultDate(): Date {\n        return this._defaultDate;\n    }\n    set defaultDate(defaultDate: Date) {\n        this._defaultDate = defaultDate;\n\n        if (this.initialized) {\n            const date = defaultDate || new Date();\n            this.currentMonth = date.getMonth();\n            this.currentYear = date.getFullYear();\n            this.initTime(date);\n            this.createMonths(this.currentMonth, this.currentYear);\n        }\n    }\n    /**\n     * Callback to invoke on focus of input field.\n     * @param {Event} event - browser event.\n     * @group Emits\n     */\n    @Output() onFocus: EventEmitter<Event> = new EventEmitter<Event>();\n    /**\n     * Callback to invoke on blur of input field.\n     * @param {Event} event - browser event.\n     * @group Emits\n     */\n    @Output() onBlur: EventEmitter<Event> = new EventEmitter<Event>();\n    /**\n     * Callback to invoke when date panel closed.\n     * @param {Event} event - Mouse event\n     * @group Emits\n     */\n    @Output() onClose: EventEmitter<AnimationEvent> = new EventEmitter<AnimationEvent>();\n    /**\n     * Callback to invoke on date select.\n     * @param {Date} date - date value.\n     * @group Emits\n     */\n    @Output() onSelect: EventEmitter<Date> = new EventEmitter<Date>();\n    /**\n     * Callback to invoke when input field cleared.\n     * @group Emits\n     */\n    @Output() onClear: EventEmitter<any> = new EventEmitter<any>();\n    /**\n     * Callback to invoke when input field is being typed.\n     * @param {Event} event - browser event\n     * @group Emits\n     */\n    @Output() onInput: EventEmitter<any> = new EventEmitter<any>();\n    /**\n     * Callback to invoke when today button is clicked.\n     * @param {Date} date - today as a date instance.\n     * @group Emits\n     */\n    @Output() onTodayClick: EventEmitter<Date> = new EventEmitter<Date>();\n    /**\n     * Callback to invoke when clear button is clicked.\n     * @param {Event} event - browser event.\n     * @group Emits\n     */\n    @Output() onClearClick: EventEmitter<any> = new EventEmitter<any>();\n    /**\n     * Callback to invoke when a month is changed using the navigators.\n     * @param {CalendarMonthChangeEvent} event - custom month change event.\n     * @group Emits\n     */\n    @Output() onMonthChange: EventEmitter<CalendarMonthChangeEvent> = new EventEmitter<CalendarMonthChangeEvent>();\n    /**\n     * Callback to invoke when a year is changed using the navigators.\n     * @param {CalendarYearChangeEvent} event - custom year change event.\n     * @group Emits\n     */\n    @Output() onYearChange: EventEmitter<CalendarYearChangeEvent> = new EventEmitter<CalendarYearChangeEvent>();\n    /**\n     * Callback to invoke when clicked outside of the date panel.\n     * @group Emits\n     */\n    @Output() onClickOutside: EventEmitter<any> = new EventEmitter<any>();\n    /**\n     * Callback to invoke when datepicker panel is shown.\n     * @group Emits\n     */\n    @Output() onShow: EventEmitter<any> = new EventEmitter<any>();\n\n    @ContentChildren(PrimeTemplate) templates!: QueryList<PrimeTemplate>;\n\n    @ViewChild('container', { static: false }) containerViewChild: Nullable<ElementRef>;\n\n    @ViewChild('inputfield', { static: false }) inputfieldViewChild: Nullable<ElementRef>;\n\n    @ViewChild('contentWrapper', { static: false }) set content(content: ElementRef) {\n        this.contentViewChild = content;\n\n        if (this.contentViewChild) {\n            if (this.isMonthNavigate) {\n                Promise.resolve(null).then(() => this.updateFocus());\n                this.isMonthNavigate = false;\n            } else {\n                if (!this.focus) {\n                    this.initFocusableCell();\n                }\n            }\n        }\n    }\n\n    contentViewChild!: ElementRef;\n\n    value: any;\n\n    dates: Nullable<Date[]>;\n\n    months!: Month[];\n\n    weekDays: Nullable<string[]>;\n\n    currentMonth!: number;\n\n    currentYear!: number;\n\n    currentHour: Nullable<number>;\n\n    currentMinute: Nullable<number>;\n\n    currentSecond: Nullable<number>;\n\n    pm: Nullable<boolean>;\n\n    mask: Nullable<HTMLDivElement>;\n\n    maskClickListener: VoidListener;\n\n    overlay: Nullable<HTMLDivElement>;\n\n    responsiveStyleElement: HTMLStyleElement | undefined | null;\n\n    overlayVisible: Nullable<boolean>;\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\n\n    calendarElement: Nullable<HTMLElement | ElementRef>;\n\n    timePickerTimer: any;\n\n    documentClickListener: VoidListener;\n\n    animationEndListener: VoidListener;\n\n    ticksTo1970: Nullable<number>;\n\n    yearOptions: Nullable<number[]>;\n\n    focus: Nullable<boolean>;\n\n    isKeydown: Nullable<boolean>;\n\n    filled: Nullable<boolean>;\n\n    inputFieldValue: Nullable<string> = null;\n\n    _minDate!: Date;\n\n    _maxDate!: Date;\n\n    _showTime!: boolean;\n\n    _yearRange!: string;\n\n    preventDocumentListener: Nullable<boolean>;\n\n    dateTemplate: Nullable<TemplateRef<any>>;\n\n    headerTemplate: Nullable<TemplateRef<any>>;\n\n    footerTemplate: Nullable<TemplateRef<any>>;\n\n    disabledDateTemplate: Nullable<TemplateRef<any>>;\n\n    decadeTemplate: Nullable<TemplateRef<any>>;\n\n    previousIconTemplate: Nullable<TemplateRef<any>>;\n\n    nextIconTemplate: Nullable<TemplateRef<any>>;\n\n    triggerIconTemplate: Nullable<TemplateRef<any>>;\n\n    clearIconTemplate: Nullable<TemplateRef<any>>;\n\n    decrementIconTemplate: Nullable<TemplateRef<any>>;\n\n    incrementIconTemplate: Nullable<TemplateRef<any>>;\n\n    _disabledDates!: Array<Date>;\n\n    _disabledDays!: Array<number>;\n\n    selectElement: Nullable;\n\n    todayElement: Nullable;\n\n    focusElement: Nullable;\n\n    scrollHandler: Nullable<ConnectedOverlayScrollHandler>;\n\n    documentResizeListener: VoidListener;\n\n    navigationState: Nullable<NavigationState> = null;\n\n    isMonthNavigate: Nullable<boolean>;\n\n    initialized: Nullable<boolean>;\n\n    translationSubscription: Nullable<Subscription>;\n\n    _locale!: LocaleSettings;\n\n    _responsiveOptions!: CalendarResponsiveOptions[];\n\n    currentView: Nullable<string>;\n\n    attributeSelector: Nullable<string>;\n\n    _numberOfMonths: number = 1;\n\n    _firstDayOfWeek!: number;\n\n    _view: CalendarTypeView = 'date';\n\n    preventFocus: Nullable<boolean>;\n\n    _defaultDate!: Date;\n\n    private window: Window;\n\n    get locale() {\n        return this._locale;\n    }\n\n    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, private zone: NgZone, private config: PrimeNGConfig, public overlayService: OverlayService) {\n        this.window = this.document.defaultView as Window;\n    }\n\n    ngOnInit() {\n        this.attributeSelector = UniqueComponentId();\n        const date = this.defaultDate || new Date();\n        this.createResponsiveStyle();\n        this.currentMonth = date.getMonth();\n        this.currentYear = date.getFullYear();\n        this.yearOptions = [];\n        this.currentView = this.view;\n\n        if (this.view === 'date') {\n            this.createWeekDays();\n            this.initTime(date);\n            this.createMonths(this.currentMonth, this.currentYear);\n            this.ticksTo1970 = ((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000;\n        }\n\n        this.translationSubscription = this.config.translationObserver.subscribe(() => {\n            this.createWeekDays();\n            this.cd.markForCheck();\n        });\n\n        this.initialized = true;\n    }\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch (item.getType()) {\n                case 'date':\n                    this.dateTemplate = item.template;\n                    break;\n\n                case 'decade':\n                    this.decadeTemplate = item.template;\n                    break;\n\n                case 'disabledDate':\n                    this.disabledDateTemplate = item.template;\n                    break;\n\n                case 'header':\n                    this.headerTemplate = item.template;\n                    break;\n\n                case 'previousicon':\n                    this.previousIconTemplate = item.template;\n                    break;\n\n                case 'nexticon':\n                    this.nextIconTemplate = item.template;\n                    break;\n\n                case 'triggericon':\n                    this.triggerIconTemplate = item.template;\n                    break;\n\n                case 'clearicon':\n                    this.clearIconTemplate = item.template;\n                    break;\n\n                case 'decrementicon':\n                    this.decrementIconTemplate = item.template;\n                    break;\n\n                case 'incrementicon':\n                    this.incrementIconTemplate = item.template;\n                    break;\n\n                case 'footer':\n                    this.footerTemplate = item.template;\n                    break;\n\n                default:\n                    this.dateTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    ngAfterViewInit() {\n        if (this.inline) {\n            this.contentViewChild && this.contentViewChild.nativeElement.setAttribute(this.attributeSelector, '');\n\n            if (!this.disabled) {\n                this.initFocusableCell();\n                if (this.numberOfMonths === 1) {\n                    this.contentViewChild.nativeElement.style.width = DomHandler.getOuterWidth(this.containerViewChild?.nativeElement) + 'px';\n                }\n            }\n        }\n    }\n\n    getTranslation(option: string) {\n        return this.config.getTranslation(option);\n    }\n\n    populateYearOptions(start: number, end: number) {\n        this.yearOptions = [];\n\n        for (let i = start; i <= end; i++) {\n            this.yearOptions.push(i);\n        }\n    }\n\n    createWeekDays() {\n        this.weekDays = [];\n        let dayIndex = this.getFirstDateOfWeek();\n        let dayLabels = this.getTranslation(TranslationKeys.DAY_NAMES_MIN);\n        for (let i = 0; i < 7; i++) {\n            this.weekDays.push(dayLabels[dayIndex]);\n            dayIndex = dayIndex == 6 ? 0 : ++dayIndex;\n        }\n    }\n\n    monthPickerValues() {\n        let monthPickerValues = [];\n        for (let i = 0; i <= 11; i++) {\n            monthPickerValues.push(this.config.getTranslation('monthNamesShort')[i]);\n        }\n\n        return monthPickerValues;\n    }\n\n    yearPickerValues() {\n        let yearPickerValues = [];\n        let base = <number>this.currentYear - (<number>this.currentYear % 10);\n        for (let i = 0; i < 10; i++) {\n            yearPickerValues.push(base + i);\n        }\n\n        return yearPickerValues;\n    }\n\n    createMonths(month: number, year: number) {\n        this.months = this.months = [];\n        for (let i = 0; i < this.numberOfMonths; i++) {\n            let m = month + i;\n            let y = year;\n            if (m > 11) {\n                m = (m % 11) - 1;\n                y = year + 1;\n            }\n\n            this.months.push(this.createMonth(m, y));\n        }\n    }\n\n    getWeekNumber(date: Date) {\n        let checkDate = new Date(date.getTime());\n        checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));\n        let time = checkDate.getTime();\n        checkDate.setMonth(0);\n        checkDate.setDate(1);\n        return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;\n    }\n\n    createMonth(month: number, year: number): Month {\n        let dates = [];\n        let firstDay = this.getFirstDayOfMonthIndex(month, year);\n        let daysLength = this.getDaysCountInMonth(month, year);\n        let prevMonthDaysLength = this.getDaysCountInPrevMonth(month, year);\n        let dayNo = 1;\n        let today = new Date();\n        let weekNumbers = [];\n        let monthRows = Math.ceil((daysLength + firstDay) / 7);\n\n        for (let i = 0; i < monthRows; i++) {\n            let week = [];\n\n            if (i == 0) {\n                for (let j = prevMonthDaysLength - firstDay + 1; j <= prevMonthDaysLength; j++) {\n                    let prev = this.getPreviousMonthAndYear(month, year);\n