primeng/fesm2022/primeng-datepicker.mjs.map

PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,

{"version":3,"file":"primeng-datepicker.mjs","sources":["../../src/datepicker/style/datepickerstyle.ts","../../src/datepicker/datepicker.ts","../../src/datepicker/primeng-datepicker.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { style } from '@primeuix/styles/datepicker';\nimport { BaseStyle } from 'primeng/base';\n\nconst inlineStyles = {\n    root: () => ({ position: 'relative' })\n};\n\nconst classes = {\n    root: ({ instance }) => [\n        'p-datepicker p-component p-inputwrapper',\n        {\n            'p-invalid': instance.invalid(),\n            'p-inputwrapper-filled': instance.$filled(),\n            'p-inputwrapper-focus': instance.focus() || instance.overlayVisible(),\n            'p-focus': instance.focus() || instance.overlayVisible(),\n            'p-datepicker-fluid': instance.hasFluid\n        }\n    ],\n    pcInputText: 'p-datepicker-input',\n    clearIcon: 'p-datepicker-clear-icon',\n    dropdown: 'p-datepicker-dropdown',\n    inputIconContainer: 'p-datepicker-input-icon-container',\n    inputIcon: 'p-datepicker-input-icon',\n    panel: ({ instance }) => [\n        'p-datepicker-panel p-component',\n        {\n            'p-datepicker-panel p-component': true,\n            'p-datepicker-panel-inline': instance.inline(),\n            'p-disabled': instance.$disabled(),\n            'p-datepicker-timeonly': instance.timeOnly()\n        }\n    ],\n    calendarContainer: 'p-datepicker-calendar-container',\n    calendar: 'p-datepicker-calendar',\n    header: 'p-datepicker-header',\n    pcPrevButton: 'p-datepicker-prev-button',\n    title: 'p-datepicker-title',\n    selectMonth: 'p-datepicker-select-month',\n    selectYear: 'p-datepicker-select-year',\n    decade: 'p-datepicker-decade',\n    pcNextButton: 'p-datepicker-next-button',\n    dayView: 'p-datepicker-day-view',\n    weekHeader: 'p-datepicker-weekheader p-disabled',\n    weekNumber: 'p-datepicker-weeknumber',\n    weekLabelContainer: 'p-datepicker-weeklabel-container p-disabled',\n    weekDayCell: 'p-datepicker-weekday-cell',\n    weekDay: 'p-datepicker-weekday',\n    dayCell: ({ date }) => [\n        'p-datepicker-day-cell',\n        {\n            'p-datepicker-other-month': date.otherMonth,\n            'p-datepicker-today': date.today\n        }\n    ],\n    day: ({ instance, date }) => {\n        let selectedDayClass = '';\n\n        if (instance.isRangeSelection() && instance.isSelected(date) && date.selectable) {\n            const startDate = instance.value[0];\n            const endDate = instance.value[1];\n\n            const isStart = startDate && date.year === startDate.getFullYear() && date.month === startDate.getMonth() && date.day === startDate.getDate();\n            const isEnd = endDate && date.year === endDate.getFullYear() && date.month === endDate.getMonth() && date.day === endDate.getDate();\n\n            selectedDayClass = isStart || isEnd ? 'p-datepicker-day-selected' : 'p-datepicker-day-selected-range';\n        }\n\n        return {\n            'p-datepicker-day': true,\n            'p-datepicker-day-selected': !instance.isRangeSelection() && instance.isSelected(date) && date.selectable,\n            'p-disabled': instance.$disabled() || !date.selectable,\n            [selectedDayClass]: true\n        };\n    },\n    monthView: 'p-datepicker-month-view',\n    month: ({ instance, index }) => [\n        'p-datepicker-month',\n        {\n            'p-datepicker-month-selected': instance.isMonthSelected(index),\n            'p-disabled': instance.isMonthDisabled(index)\n        }\n    ],\n    yearView: 'p-datepicker-year-view',\n    year: ({ instance, year }) => [\n        'p-datepicker-year',\n        {\n            'p-datepicker-year-selected': instance.isYearSelected(year),\n            'p-disabled': instance.isYearDisabled(year)\n        }\n    ],\n    timePicker: 'p-datepicker-time-picker',\n    hourPicker: 'p-datepicker-hour-picker',\n    pcIncrementButton: 'p-datepicker-increment-button',\n    pcDecrementButton: 'p-datepicker-decrement-button',\n    separator: 'p-datepicker-separator',\n    minutePicker: 'p-datepicker-minute-picker',\n    secondPicker: 'p-datepicker-second-picker',\n    ampmPicker: 'p-datepicker-ampm-picker',\n    buttonbar: 'p-datepicker-buttonbar',\n    pcTodayButton: 'p-datepicker-today-button',\n    pcClearButton: 'p-datepicker-clear-button'\n};\n\n@Injectable()\nexport class DatePickerStyle extends BaseStyle {\n    name = 'datepicker';\n\n    style = style;\n\n    classes = classes;\n\n    inlineStyles = inlineStyles;\n}\n\n/**\n *\n * DatePicker is a form component to work with dates.\n *\n * [Live Demo](https://www.primeng.org/datepicker/)\n *\n * @module datepickerstyle\n *\n */\nexport enum DatePickerClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-datepicker',\n    /**\n     * Class name of the input element\n     */\n    pcInputText = 'p-datepicker-input',\n    /**\n     * Class name of the dropdown element\n     */\n    dropdown = 'p-datepicker-dropdown',\n    /**\n     * Class name of the input icon container element\n     */\n    inputIconContainer = 'p-datepicker-input-icon-container',\n    /**\n     * Class name of the input icon element\n     */\n    inputIcon = 'p-datepicker-input-icon',\n    /**\n     * Class name of the panel element\n     */\n    panel = 'p-datepicker-panel',\n    /**\n     * Class name of the calendar container element\n     */\n    calendarContainer = 'p-datepicker-calendar-container',\n    /**\n     * Class name of the calendar element\n     */\n    calendar = 'p-datepicker-calendar',\n    /**\n     * Class name of the header element\n     */\n    header = 'p-datepicker-header',\n    /**\n     * Class name of the previous button element\n     */\n    pcPrevButton = 'p-datepicker-prev-button',\n    /**\n     * Class name of the title element\n     */\n    title = 'p-datepicker-title',\n    /**\n     * Class name of the select month element\n     */\n    selectMonth = 'p-datepicker-select-month',\n    /**\n     * Class name of the select year element\n     */\n    selectYear = 'p-datepicker-select-year',\n    /**\n     * Class name of the decade element\n     */\n    decade = 'p-datepicker-decade',\n    /**\n     * Class name of the next button element\n     */\n    pcNextButton = 'p-datepicker-next-button',\n    /**\n     * Class name of the day view element\n     */\n    dayView = 'p-datepicker-day-view',\n    /**\n     * Class name of the week header element\n     */\n    weekHeader = 'p-datepicker-weekheader',\n    /**\n     * Class name of the week number element\n     */\n    weekNumber = 'p-datepicker-weeknumber',\n    /**\n     * Class name of the week label container element\n     */\n    weekLabelContainer = 'p-datepicker-weeklabel-container',\n    /**\n     * Class name of the week day cell element\n     */\n    weekDayCell = 'p-datepicker-weekday-cell',\n    /**\n     * Class name of the week day element\n     */\n    weekDay = 'p-datepicker-weekday',\n    /**\n     * Class name of the day cell element\n     */\n    dayCell = 'p-datepicker-day-cell',\n    /**\n     * Class name of the day element\n     */\n    day = 'p-datepicker-day',\n    /**\n     * Class name of the month view element\n     */\n    monthView = 'p-datepicker-month-view',\n    /**\n     * Class name of the month element\n     */\n    month = 'p-datepicker-month',\n    /**\n     * Class name of the year view element\n     */\n    yearView = 'p-datepicker-year-view',\n    /**\n     * Class name of the year element\n     */\n    year = 'p-datepicker-year',\n    /**\n     * Class name of the time picker element\n     */\n    timePicker = 'p-datepicker-time-picker',\n    /**\n     * Class name of the hour picker element\n     */\n    hourPicker = 'p-datepicker-hour-picker',\n    /**\n     * Class name of the increment button element\n     */\n    pcIncrementButton = 'p-datepicker-increment-button',\n    /**\n     * Class name of the decrement button element\n     */\n    pcDecrementButton = 'p-datepicker-decrement-button',\n    /**\n     * Class name of the separator element\n     */\n    separator = 'p-datepicker-separator',\n    /**\n     * Class name of the minute picker element\n     */\n    minutePicker = 'p-datepicker-minute-picker',\n    /**\n     * Class name of the second picker element\n     */\n    secondPicker = 'p-datepicker-second-picker',\n    /**\n     * Class name of the ampm picker element\n     */\n    ampmPicker = 'p-datepicker-ampm-picker',\n    /**\n     * Class name of the buttonbar element\n     */\n    buttonbar = 'p-datepicker-buttonbar',\n    /**\n     * Class name of the today button element\n     */\n    pcTodayButton = 'p-datepicker-today-button',\n    /**\n     * Class name of the clear button element\n     */\n    pcClearButton = 'p-datepicker-clear-button',\n    /**\n     * Class name of the clear icon\n     */\n    clearIcon = 'p-datepicker-clear-icon'\n}\n\nexport interface DatePickerStyle extends BaseStyle {}\n","import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChild,\n    effect,\n    ElementRef,\n    forwardRef,\n    inject,\n    InjectionToken,\n    input,\n    NgModule,\n    numberAttribute,\n    output,\n    signal,\n    TemplateRef,\n    untracked,\n    viewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { Calendar as CalendarIcon } from '@primeicons/angular/calendar';\nimport { ChevronDown as ChevronDownIcon } from '@primeicons/angular/chevron-down';\nimport { ChevronLeft as ChevronLeftIcon } from '@primeicons/angular/chevron-left';\nimport { ChevronRight as ChevronRightIcon } from '@primeicons/angular/chevron-right';\nimport { ChevronUp as ChevronUpIcon } from '@primeicons/angular/chevron-up';\nimport { Times as TimesIcon } from '@primeicons/angular/times';\nimport { MotionEvent, MotionOptions } from '@primeuix/motion';\nimport { absolutePosition, addClass, addStyle, appendChild, find, findSingle, getFocusableElements, getIndex, getOuterWidth, hasClass, isDate, isNotEmpty, isTouchDevice, relativePosition, setAttribute, uuid } from '@primeuix/utils';\nimport { OverlayService, SharedModule, TranslationKeys } from 'primeng/api';\nimport { AutoFocus } from 'primeng/autofocus';\nimport { PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { BaseInput } from 'primeng/baseinput';\nimport { Bind, BindModule } from 'primeng/bind';\nimport { ButtonDirective } from 'primeng/button';\nimport { blockBodyScroll, ConnectedOverlayScrollHandler, unblockBodyScroll } from 'primeng/dom';\nimport { InputText } from 'primeng/inputtext';\nimport { MotionModule } from 'primeng/motion';\nimport { Ripple } from 'primeng/ripple';\nimport { Nullable, VoidListener } from 'primeng/ts-helpers';\nimport {\n    DatePickerButtonBarTemplateContext,\n    DatePickerDateMeta,\n    DatePickerDateTemplateContext,\n    DatePickerDecadeTemplateContext,\n    DatePickerDisabledDateTemplateContext,\n    DatePickerIconDisplay,\n    DatePickerInputIconTemplateContext,\n    DatePickerMonthChangeEvent,\n    DatePickerPassThrough,\n    DatePickerResponsiveOptions,\n    DatePickerSelectionMode,\n    DatePickerViewType,\n    DatePickerYearChangeEvent,\n    LocaleSettings,\n    Month,\n    NavigationState\n} from 'primeng/types/datepicker';\nimport type { AppendTo, CSSProperties } from 'primeng/types/shared';\nimport { ZIndexUtils } from 'primeng/utils';\nimport { Subscription } from 'rxjs';\nimport { DatePickerStyle } from './style/datepickerstyle';\n\nexport const DATEPICKER_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => DatePicker),\n    multi: true\n};\n\nconst DATEPICKER_INSTANCE = new InjectionToken<DatePicker>('DATEPICKER_INSTANCE');\n\n/**\n * DatePicker is a form component to work with dates.\n * @group Components\n */\n@Component({\n    selector: 'p-datepicker, p-date-picker',\n    standalone: true,\n    imports: [NgTemplateOutlet, ButtonDirective, Ripple, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon, AutoFocus, InputText, SharedModule, BindModule, MotionModule],\n    hostDirectives: [Bind],\n    template: `\n        @if (!inline()) {\n            <input\n                #inputfield\n                pInputText\n                data-p-maskable\n                [pSize]=\"size()\"\n                [attr.size]=\"inputSize()\"\n                type=\"text\"\n                role=\"combobox\"\n                [attr.id]=\"inputId()\"\n                [attr.name]=\"name()\"\n                [attr.aria-required]=\"required()\"\n                aria-autocomplete=\"none\"\n                aria-haspopup=\"dialog\"\n                [attr.aria-expanded]=\"overlayVisible()\"\n                [attr.aria-controls]=\"ariaControlsAttr()\"\n                [attr.aria-labelledby]=\"ariaLabelledBy()\"\n                [attr.aria-label]=\"ariaLabel()\"\n                [value]=\"inputFieldValue()\"\n                (focus)=\"onInputFocus($event)\"\n                (keydown)=\"onInputKeydown($event)\"\n                (click)=\"onInputClick()\"\n                (blur)=\"onInputBlur($event)\"\n                [attr.required]=\"requiredAttr()\"\n                [attr.readonly]=\"readonlyAttr()\"\n                [attr.disabled]=\"disabledAttr()\"\n                (input)=\"onUserInput($event)\"\n                [style]=\"inputStyle()\"\n                [class]=\"cn(cx('pcInputText'), inputStyleClass())\"\n                [attr.placeholder]=\"placeholder()\"\n                [attr.tabindex]=\"tabindex()\"\n                [attr.inputmode]=\"inputModeAttr()\"\n                autocomplete=\"off\"\n                [pAutoFocus]=\"autofocus()\"\n                [variant]=\"$variant()\"\n                [fluid]=\"hasFluid\"\n                [invalid]=\"invalid()\"\n                [pt]=\"ptm('pcInputText')\"\n                [unstyled]=\"unstyled()\"\n            />\n            @if (clearIconEnabled()) {\n                @if (!clearIconTemplate()) {\n                    <svg data-p-icon=\"times\" [class]=\"cx('clearIcon')\" [style.visibility]=\"showClearIcon() ? null : 'hidden'\" [pBind]=\"ptm('inputIcon')\" (click)=\"clear()\" />\n                } @else {\n                    <span [class]=\"cx('clearIcon')\" [style.visibility]=\"showClearIcon() ? null : 'hidden'\" [pBind]=\"ptm('inputIcon')\" (click)=\"clear()\">\n                        <ng-template *ngTemplateOutlet=\"clearIconTemplate()\"></ng-template>\n                    </span>\n                }\n            }\n            @if (showIconButton()) {\n                <button\n                    type=\"button\"\n                    [attr.aria-label]=\"iconButtonAriaLabel\"\n                    aria-haspopup=\"dialog\"\n                    [attr.aria-expanded]=\"overlayVisible()\"\n                    [attr.aria-controls]=\"ariaControlsAttr()\"\n                    (click)=\"onButtonClick($event, inputfield)\"\n                    [class]=\"cx('dropdown')\"\n                    [disabled]=\"$disabled()\"\n                    tabindex=\"0\"\n                    [pBind]=\"ptm('dropdown')\"\n                >\n                    @if (icon()) {\n                        <span [class]=\"icon()\" [pBind]=\"ptm('dropdownIcon')\"></span>\n                    } @else {\n                        @if (!triggerIconTemplate()) {\n                            <svg data-p-icon=\"calendar\" [pBind]=\"ptm('dropdownIcon')\" />\n                        }\n                        <ng-template *ngTemplateOutlet=\"triggerIconTemplate()\"></ng-template>\n                    }\n                </button>\n            }\n            @if (showInputIcon()) {\n                <span [class]=\"cx('inputIconContainer')\" [pBind]=\"ptm('inputIconContainer')\" [attr.data-p]=\"inputIconDataP\">\n                    @if (!inputIconTemplate()) {\n                        <svg data-p-icon=\"calendar\" (click)=\"onButtonClick($event)\" [class]=\"cx('inputIcon')\" [pBind]=\"ptm('inputIcon')\" />\n                    }\n                    <ng-container *ngTemplateOutlet=\"inputIconTemplate(); context: inputIconTemplateContext()\"></ng-container>\n                </span>\n            }\n        }\n        @if (inline() || overlayRendered()) {\n            <div\n                #contentWrapper\n                [attr.id]=\"panelId\"\n                [style]=\"panelStyle()\"\n                [class]=\"cn(cx('panel'), panelStyleClass())\"\n                [attr.aria-label]=\"translate('chooseDate')\"\n                [attr.role]=\"roleAttr()\"\n                [attr.aria-modal]=\"ariaModalAttr()\"\n                (click)=\"onOverlayClick($event)\"\n                [pBind]=\"ptm('panel')\"\n                [pMotion]=\"isOverlayVisible()\"\n                [pMotionName]=\"'p-anchored-overlay'\"\n                [pMotionAppear]=\"!inline()\"\n                [pMotionOptions]=\"computedMotionOptions()\"\n                (pMotionOnBeforeEnter)=\"onOverlayBeforeEnter($event)\"\n                (pMotionOnAfterLeave)=\"onOverlayAfterLeave($event)\"\n            >\n                <ng-content select=\"p-header\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n                @if (!timeOnly()) {\n                    <div [class]=\"cx('calendarContainer')\" [pBind]=\"ptm('calendarContainer')\">\n                        @for (month of months(); track $index; let i = $index) {\n                            <div [class]=\"cx('calendar')\" [pBind]=\"ptm('calendar')\">\n                                <div [class]=\"cx('header')\" [pBind]=\"ptm('header')\">\n                                    <button\n                                        type=\"button\"\n                                        pButton\n                                        iconOnly\n                                        rounded\n                                        variant=\"text\"\n                                        severity=\"secondary\"\n                                        [class]=\"cx('pcPrevButton')\"\n                                        [style]=\"getPrevButtonStyle(i)\"\n                                        [attr.aria-label]=\"prevIconAriaLabel\"\n                                        [pButtonPT]=\"ptm('pcPrevButton')\"\n                                        [attr.data-pc-group-section]=\"'navigator'\"\n                                        (keydown)=\"onContainerButtonKeydown($event)\"\n                                        (click)=\"onPrevButtonClick($event)\"\n                                    >\n                                        @if (!previousIconTemplate()) {\n                                            <svg data-p-icon=\"chevron-left\" />\n                                        } @else {\n                                            <span>\n                                                <ng-template *ngTemplateOutlet=\"previousIconTemplate()\"></ng-template>\n                                            </span>\n                                        }\n                                    </button>\n                                    <div [class]=\"cx('title')\" [pBind]=\"ptm('title')\" [attr.aria-live]=\"'polite'\" [attr.aria-atomic]=\"'true'\">\n                                        @if (currentView() === 'date') {\n                                            <button\n                                                type=\"button\"\n                                                (click)=\"switchToMonthView($event)\"\n                                                (keydown)=\"onContainerButtonKeydown($event)\"\n                                                [class]=\"cx('selectMonth')\"\n                                                [attr.disabled]=\"switchViewButtonDisabledAttr()\"\n                                                [attr.aria-label]=\"getMonthSelectAriaLabel(month)\"\n                                                pRipple\n                                                [pBind]=\"ptm('selectMonth')\"\n                                                [attr.data-pc-group-section]=\"'navigator'\"\n                                            >\n                                                {{ getMonthName(month.month) }}\n                                            </button>\n                                        }\n                                        @if (currentView() !== 'year') {\n                                            <button\n                                                type=\"button\"\n                                                (click)=\"switchToYearView($event)\"\n                                                (keydown)=\"onContainerButtonKeydown($event)\"\n                                                [class]=\"cx('selectYear')\"\n                                                [attr.disabled]=\"switchViewButtonDisabledAttr()\"\n                                                [attr.aria-label]=\"getYearSelectAriaLabel(month)\"\n                                                pRipple\n                                                [pBind]=\"ptm('selectYear')\"\n                                                [attr.data-pc-group-section]=\"'navigator'\"\n                                            >\n                                                {{ getYear(month) }}\n                                            </button>\n                                        }\n                                        @if (currentView() === 'year') {\n                                            <span [class]=\"cx('decade')\" [pBind]=\"ptm('decade')\">\n                                                @if (!decadeTemplate()) {\n                                                    {{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}\n                                                }\n                                                <ng-container *ngTemplateOutlet=\"decadeTemplate(); context: decadeTemplateContext()\"></ng-container>\n                                            </span>\n                                        }\n                                    </div>\n                                    <button\n                                        type=\"button\"\n                                        pButton\n                                        iconOnly\n                                        rounded\n                                        variant=\"text\"\n                                        severity=\"secondary\"\n                                        [class]=\"cx('pcNextButton')\"\n                                        [style]=\"getNextButtonStyle(i)\"\n                                        [attr.aria-label]=\"nextIconAriaLabel\"\n                                        [pButtonPT]=\"ptm('pcNextButton')\"\n                                        [attr.data-pc-group-section]=\"'navigator'\"\n                                        (keydown)=\"onContainerButtonKeydown($event)\"\n                                        (click)=\"onNextButtonClick($event)\"\n                                    >\n                                        @if (!nextIconTemplate()) {\n                                            <svg data-p-icon=\"chevron-right\" />\n                                        } @else {\n                                            <ng-template *ngTemplateOutlet=\"nextIconTemplate()\"></ng-template>\n                                        }\n                                    </button>\n                                </div>\n                                @if (currentView() === 'date') {\n                                    <table [class]=\"cx('dayView')\" role=\"grid\" [pBind]=\"ptm('table')\">\n                                        <thead [pBind]=\"ptm('tableHeader')\">\n                                            <tr [pBind]=\"ptm('tableHeaderRow')\">\n                                                @if (showWeek()) {\n                                                    <th [class]=\"cx('weekHeader')\" [pBind]=\"ptm('weekHeader')\">\n                                                        <span [pBind]=\"ptm('weekHeaderLabel')\">{{ translate('weekHeader') }}</span>\n                                                    </th>\n                                                }\n                                                @for (weekDay of weekDays(); track weekDay; let begin = $first; let end = $last) {\n                                                    <th [class]=\"cx('weekDayCell')\" scope=\"col\" [pBind]=\"ptm('weekDayCell')\">\n                                                        <span [class]=\"cx('weekDay')\" [pBind]=\"ptm('weekDay')\">{{ weekDay }}</span>\n                                                    </th>\n                                                }\n                                            </tr>\n                                        </thead>\n                                        <tbody [pBind]=\"ptm('tableBody')\">\n                                            @for (week of month.dates; track $index; let j = $index) {\n                                                <tr [pBind]=\"ptm('tableBodyRow')\">\n                                                    @if (showWeek()) {\n                                                        <td [class]=\"cx('weekNumber')\" [pBind]=\"ptm('weekNumber')\">\n                                                            <span [class]=\"cx('weekLabelContainer')\" [pBind]=\"ptm('weekLabelContainer')\">\n                                                                {{ month.weekNumbers[j] }}\n                                                            </span>\n                                                        </td>\n                                                    }\n                                                    @for (date of week; track date.day) {\n                                                        <td [attr.aria-label]=\"getDateCellAriaLabel(date)\" [attr.aria-selected]=\"isSelected(date) ? 'true' : null\" [class]=\"cx('dayCell', { date })\" [pBind]=\"ptm('dayCell')\">\n                                                            @if (date.otherMonth ? showOtherMonths() : true) {\n                                                                <span\n                                                                    [class]=\"dayClass(date)\"\n                                                                    (click)=\"onDateSelect($event, date)\"\n                                                                    draggable=\"false\"\n                                                                    [attr.aria-label]=\"getDateCellAriaLabel(date)\"\n                                                                    [attr.aria-selected]=\"isSelected(date) ? 'true' : null\"\n                                                                    [attr.data-date]=\"formatDateKey(formatDateMetaToDate(date))\"\n                                                                    (keydown)=\"onDateCellKeydown($event, date, i)\"\n                                                                    pRipple\n                                                                    [pBind]=\"ptm('day')\"\n                                                                >\n                                                                    @if (!dateTemplate() && (date.selectable || !disabledDateTemplate())) {\n                                                                        {{ date.day }}\n                                                                    }\n                                                                    @if (date.selectable || !disabledDateTemplate()) {\n                                                                        <ng-container *ngTemplateOutlet=\"dateTemplate(); context: getDateTemplateContext(date)\"></ng-container>\n                                                                    }\n                                                                    @if (!date.selectable) {\n                                                                        <ng-container *ngTemplateOutlet=\"disabledDateTemplate(); context: getDateTemplateContext(date)\"></ng-container>\n                                                                    }\n                                                                </span>\n                                                                @if (isSelected(date)) {\n                                                                    <div class=\"p-hidden-accessible\" aria-live=\"polite\">\n                                                                        {{ date.day }}\n                                                                    </div>\n                                                                }\n                                                            }\n                                                        </td>\n                                                    }\n                                                </tr>\n                                            }\n                                        </tbody>\n                                    </table>\n                                }\n                            </div>\n                        }\n                    </div>\n                    @if (currentView() === 'month') {\n                        <div [class]=\"cx('monthView')\" [pBind]=\"ptm('monthView')\">\n                            @for (m of monthPickerValues(); track m; let i = $index) {\n                                <span (click)=\"onMonthSelect($event, i)\" (keydown)=\"onMonthCellKeydown($event, i)\" [class]=\"cx('month', { month: m, index: i })\" pRipple [pBind]=\"ptm('month')\">\n                                    {{ m }}\n                                    @if (isMonthSelected(i)) {\n                                        <div class=\"p-hidden-accessible\" aria-live=\"polite\">\n                                            {{ m }}\n                                        </div>\n                                    }\n                                </span>\n                            }\n                        </div>\n                    }\n                    @if (currentView() === 'year') {\n                        <div [class]=\"cx('yearView')\" [pBind]=\"ptm('yearView')\">\n                            @for (y of yearPickerValues(); track $index) {\n                                <span (click)=\"onYearSelect($event, y)\" (keydown)=\"onYearCellKeydown($event, y)\" [class]=\"cx('year', { year: y })\" pRipple [pBind]=\"ptm('year')\">\n                                    {{ y }}\n                                    @if (isYearSelected(y)) {\n                                        <div class=\"p-hidden-accessible\" aria-live=\"polite\">\n                                            {{ y }}\n                                        </div>\n                                    }\n                                </span>\n                            }\n                        </div>\n                    }\n                }\n                @if (showTimePicker()) {\n                    <div [class]=\"cx('timePicker')\" [pBind]=\"ptm('timePicker')\">\n                        <div [class]=\"cx('hourPicker')\" [pBind]=\"ptm('hourPicker')\">\n                            <button\n                                type=\"button\"\n                                pButton\n                                iconOnly\n                                rounded\n                                variant=\"text\"\n                                severity=\"secondary\"\n                                [class]=\"cx('pcIncrementButton')\"\n                                [attr.aria-label]=\"translate('nextHour')\"\n                                [pButtonPT]=\"ptm('pcIncrementButton')\"\n                                [attr.data-pc-group-section]=\"'timepickerbutton'\"\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                            >\n                                @if (!incrementIconTemplate()) {\n                                    <svg data-p-icon=\"chevron-up\" [pBind]=\"ptm('pcIncrementButton')['icon']\" />\n                                }\n                                <ng-template *ngTemplateOutlet=\"incrementIconTemplate()\"></ng-template>\n                            </button>\n                            <span [pBind]=\"ptm('hour')\">{{ formattedHour() }}</span>\n                            <button\n                                type=\"button\"\n                                pButton\n                                iconOnly\n                                rounded\n                                variant=\"text\"\n                                severity=\"secondary\"\n                                [class]=\"cx('pcDecrementButton')\"\n                                [attr.aria-label]=\"translate('prevHour')\"\n                                [pButtonPT]=\"ptm('pcDecrementButton')\"\n                                [attr.data-pc-group-section]=\"'timepickerbutton'\"\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                            >\n                                @if (!decrementIconTemplate()) {\n                                    <svg data-p-icon=\"chevron-down\" [pBind]=\"ptm('pcDecrementButton')['icon']\" />\n                                }\n                                <ng-template *ngTemplateOutlet=\"decrementIconTemplate()\"></ng-template>\n                            </button>\n                        </div>\n                        <div class=\"p-datepicker-separator\" [pBind]=\"ptm('separatorContainer')\">\n                            <span [pBind]=\"ptm('separator')\">{{ timeSeparator() }}</span>\n                        </div>\n                        <div [class]=\"cx('minutePicker')\" [pBind]=\"ptm('minutePicker')\">\n                            <button\n                                type=\"button\"\n                                pButton\n                                iconOnly\n                                rounded\n                                variant=\"text\"\n                                severity=\"secondary\"\n                                [class]=\"cx('pcIncrementButton')\"\n                                [attr.aria-label]=\"translate('nextMinute')\"\n                                [pButtonPT]=\"ptm('pcIncrementButton')\"\n                                [attr.data-pc-group-section]=\"'timepickerbutton'\"\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                            >\n                                @if (!incrementIconTemplate()) {\n                                    <svg data-p-icon=\"chevron-up\" [pBind]=\"ptm('pcIncrementButton')['icon']\" />\n                                }\n                                <ng-template *ngTemplateOutlet=\"incrementIconTemplate()\"></ng-template>\n                            </button>\n                            <span [pBind]=\"ptm('minute')\">{{ formattedMinute() }}</span>\n                            <button\n                                type=\"button\"\n                                pButton\n                                iconOnly\n                                rounded\n                                variant=\"text\"\n                                severity=\"secondary\"\n                                [class]=\"cx('pcDecrementButton')\"\n                                [attr.aria-label]=\"translate('prevMinute')\"\n                                [pButtonPT]=\"ptm('pcDecrementButton')\"\n                                [attr.data-pc-group-section]=\"'timepickerbutton'\"\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                            >\n                                @if (!decrementIconTemplate()) {\n                                    <svg data-p-icon=\"chevron-down\" [pBind]=\"ptm('pcDecrementButton')['icon']\" />\n                                }\n                                <ng-template *ngTemplateOutlet=\"decrementIconTemplate()\"></ng-template>\n                            </button>\n                        </div>\n                        @if (showSeconds()) {\n                            <div [class]=\"cx('separator')\" [pBind]=\"ptm('separatorContainer')\">\n                                <span [pBind]=\"ptm('separator')\">{{ timeSeparator() }}</span>\n                            </div>\n                        }\n                        @if (showSeconds()) {\n                            <div [class]=\"cx('secondPicker')\" [pBind]=\"ptm('secondPicker')\">\n                                <button\n                                    type=\"button\"\n                                    pButton\n                                    iconOnly\n                                    rounded\n                                    variant=\"text\"\n                                    severity=\"secondary\"\n                                    [class]=\"cx('pcIncrementButton')\"\n                                    [attr.aria-label]=\"translate('nextSecond')\"\n                                    [pButtonPT]=\"ptm('pcIncrementButton')\"\n                                    [attr.data-pc-group-section]=\"'timepickerbutton'\"\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                                >\n                                    @if (!incrementIconTemplate()) {\n                                        <svg data-p-icon=\"chevron-up\" [pBind]=\"ptm('pcIncrementButton')['icon']\" />\n                                    }\n                                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate()\"></ng-template>\n                                </button>\n                                <span [pBind]=\"ptm('second')\">{{ formattedSecond() }}</span>\n                                <button\n                                    type=\"button\"\n                                    pButton\n                                    iconOnly\n                                    rounded\n                                    variant=\"text\"\n                                    severity=\"secondary\"\n                                    [class]=\"cx('pcDecrementButton')\"\n                                    [attr.aria-label]=\"translate('prevSecond')\"\n                                    [pButtonPT]=\"ptm('pcDecrementButton')\"\n                                    [attr.data-pc-group-section]=\"'timepickerbutton'\"\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                                >\n                                    @if (!decrementIconTemplate()) {\n                                        <svg data-p-icon=\"chevron-down\" [pBind]=\"ptm('pcDecrementButton')['icon']\" />\n                                    }\n                                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate()\"></ng-template>\n                                </button>\n                            </div>\n                        }\n                        @if (isHourFormat12()) {\n                            <div [class]=\"cx('separator')\" [pBind]=\"ptm('separatorContainer')\">\n                                <span [pBind]=\"ptm('separator')\">{{ timeSeparator() }}</span>\n                            </div>\n                        }\n                        @if (isHourFormat12()) {\n                            <div [class]=\"cx('ampmPicker')\" [pBind]=\"ptm('ampmPicker')\">\n                                <button\n                                    type=\"button\"\n                                    pButton\n                                    iconOnly\n                                    text\n                                    rounded\n                                    severity=\"secondary\"\n                                    [class]=\"cx('pcIncrementButton')\"\n                                    [attr.aria-label]=\"translate('am')\"\n                                    [pButtonPT]=\"ptm('pcIncrementButton')\"\n                                    [attr.data-pc-group-section]=\"'timepickerbutton'\"\n                                    (keydown)=\"onContainerButtonKeydown($event)\"\n                                    (click)=\"toggleAMPM($event)\"\n                                    (keydown.enter)=\"toggleAMPM($event)\"\n                                >\n                                    @if (!incrementIconTemplate()) {\n                                        <svg data-p-icon=\"chevron-up\" [pBind]=\"ptm('pcIncrementButton')['icon']\" />\n                                    }\n                                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate()\"></ng-template>\n                                </button>\n                                <span [pBind]=\"ptm('ampm')\">{{ ampmLabel() }}</span>\n                                <button\n                                    type=\"button\"\n                                    pButton\n                                    iconOnly\n                                    text\n                                    rounded\n                                    severity=\"secondary\"\n                                    [class]=\"cx('pcDecrementButton')\"\n                                    [attr.aria-label]=\"translate('pm')\"\n                                    [pButtonPT]=\"ptm('pcDecrementButton')\"\n                                    [attr.data-pc-group-section]=\"'timepickerbutton'\"\n                                    (keydown)=\"onContainerButtonKeydown($event)\"\n                                    (click)=\"toggleAMPM($event)\"\n                                    (keydown.enter)=\"toggleAMPM($event)\"\n                                >\n                                    @if (!decrementIconTemplate()) {\n                                        <svg data-p-icon=\"chevron-down\" [pBind]=\"ptm('pcDecrementButton')['icon']\" />\n                                    }\n                                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate()\"></ng-template>\n                                </button>\n                            </div>\n                        }\n                    </div>\n                }\n                @if (showButtonBar()) {\n                    <div [class]=\"cx('buttonbar')\" [pBind]=\"ptm('buttonbar')\">\n                        @if (buttonBarTemplate()) {\n                            <ng-container *ngTemplateOutlet=\"buttonBarTemplate(); context: buttonBarTemplateContext()\"></ng-container>\n                        } @else {\n                            <button\n                                type=\"button\"\n                                pButton\n                                severity=\"secondary\"\n                                variant=\"text\"\n                                size=\"small\"\n                                [class]=\"cn(cx('pcTodayButton'), todayButtonStyleClass())\"\n                                [pButtonPT]=\"ptm('pcTodayButton')\"\n                                [attr.data-pc-group-section]=\"'button'\"\n                                (keydown)=\"onContainerButtonKeydown($event)\"\n                                (click)=\"onTodayButtonClick($event)\"\n                            >\n                                {{ translate('today') }}\n                            </button>\n                            <button\n                                type=\"button\"\n                                pButton\n                                severity=\"secondary\"\n                                variant=\"text\"\n                                size=\"small\"\n                                [class]=\"cn(cx('pcClearButton'), clearButtonStyleClass())\"\n                                [pButtonPT]=\"ptm('pcClearButton')\"\n                                [attr.data-pc-group-section]=\"'button'\"\n                                (keydown)=\"onContainerButtonKeydown($event)\"\n                                (click)=\"onClearButtonClick($event)\"\n                            >\n                                {{ translate('clear') }}\n                            </button>\n                        }\n                    </div>\n                }\n                <ng-content select=\"p-footer\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n            </div>\n        }\n    `,\n    providers: [DATEPICKER_VALUE_ACCESSOR, DatePickerStyle, { provide: DATEPICKER_INSTANCE, useExisting: DatePicker }, { provide: PARENT_INSTANCE, useExisting: DatePicker }],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class]': \"cx('root')\",\n        '[style]': \"sx('root')\"\n    }\n})\nexport class DatePicker extends BaseInput<DatePickerPassThrough> {\n    componentName = 'DatePicker';\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    $pcDatePicker: DatePicker | undefined = inject(DATEPICKER_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;\n\n    /**\n     * Icon display mode.\n     * @group Props\n     */\n    iconDisplay = input<DatePickerIconDisplay>('button');\n    /**\n     * Inline style of the input field.\n     * @group Props\n     */\n    inputStyle = input<CSSProperties>();\n    /**\n     * Identifier of the focus input to match a label defined for the component.\n     * @group Props\n     */\n    inputId = input<string>();\n    /**\n     * Style class of the input field.\n     * @group Props\n     */\n    inputStyleClass = input<string>();\n    /**\n     * Placeholder text for the input.\n     * @group Props\n     */\n    placeholder = input<string>();\n    /**\n     * Establishes relationships between the component and label(s) where its value should be one or more eleme