primevue/datepicker/index.mjs.map

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc

{"version":3,"file":"index.mjs","sources":["../../src/datepicker/BaseDatePicker.vue","../../src/datepicker/DatePicker.vue","../../src/datepicker/DatePicker.vue?vue&type=template&id=1359a1d0&lang.js"],"sourcesContent":["<script>\nimport BaseInput from '@primevue/core/baseinput';\nimport DatePickerStyle from 'primevue/datepicker/style';\n\nexport default {\n    name: 'BaseDatePicker',\n    extends: BaseInput,\n    props: {\n        selectionMode: {\n            type: String,\n            default: 'single'\n        },\n        dateFormat: {\n            type: String,\n            default: null\n        },\n        inline: {\n            type: Boolean,\n            default: false\n        },\n        showOtherMonths: {\n            type: Boolean,\n            default: true\n        },\n        selectOtherMonths: {\n            type: Boolean,\n            default: false\n        },\n        showIcon: {\n            type: Boolean,\n            default: false\n        },\n        iconDisplay: {\n            type: String,\n            default: 'button'\n        },\n        icon: {\n            type: String,\n            default: undefined\n        },\n        prevIcon: {\n            type: String,\n            default: undefined\n        },\n        nextIcon: {\n            type: String,\n            default: undefined\n        },\n        incrementIcon: {\n            type: String,\n            default: undefined\n        },\n        decrementIcon: {\n            type: String,\n            default: undefined\n        },\n        numberOfMonths: {\n            type: Number,\n            default: 1\n        },\n        responsiveOptions: Array,\n        breakpoint: {\n            type: String,\n            default: '769px'\n        },\n        view: {\n            type: String,\n            default: 'date'\n        },\n        minDate: {\n            type: Date,\n            value: null\n        },\n        maxDate: {\n            type: Date,\n            value: null\n        },\n        disabledDates: {\n            type: Array,\n            value: null\n        },\n        disabledDays: {\n            type: Array,\n            value: null\n        },\n        maxDateCount: {\n            type: Number,\n            value: null\n        },\n        showOnFocus: {\n            type: Boolean,\n            default: true\n        },\n        autoZIndex: {\n            type: Boolean,\n            default: true\n        },\n        baseZIndex: {\n            type: Number,\n            default: 0\n        },\n        showButtonBar: {\n            type: Boolean,\n            default: false\n        },\n        shortYearCutoff: {\n            type: String,\n            default: '+10'\n        },\n        showTime: {\n            type: Boolean,\n            default: false\n        },\n        timeOnly: {\n            type: Boolean,\n            default: false\n        },\n        hourFormat: {\n            type: String,\n            default: '24'\n        },\n        stepHour: {\n            type: Number,\n            default: 1\n        },\n        stepMinute: {\n            type: Number,\n            default: 1\n        },\n        stepSecond: {\n            type: Number,\n            default: 1\n        },\n        showSeconds: {\n            type: Boolean,\n            default: false\n        },\n        hideOnDateTimeSelect: {\n            type: Boolean,\n            default: false\n        },\n        hideOnRangeSelection: {\n            type: Boolean,\n            default: false\n        },\n        timeSeparator: {\n            type: String,\n            default: ':'\n        },\n        showWeek: {\n            type: Boolean,\n            default: false\n        },\n        manualInput: {\n            type: Boolean,\n            default: true\n        },\n        appendTo: {\n            type: [String, Object],\n            default: 'body'\n        },\n        readonly: {\n            type: Boolean,\n            default: false\n        },\n        placeholder: {\n            type: String,\n            default: null\n        },\n        inputId: {\n            type: String,\n            default: null\n        },\n        inputClass: {\n            type: [String, Object],\n            default: null\n        },\n        inputStyle: {\n            type: Object,\n            default: null\n        },\n        panelClass: {\n            type: [String, Object],\n            default: null\n        },\n        panelStyle: {\n            type: Object,\n            default: null\n        },\n        todayButtonProps: {\n            type: Object,\n            default() {\n                return { severity: 'secondary', text: true, size: 'small' };\n            }\n        },\n        clearButtonProps: {\n            type: Object,\n            default() {\n                return { severity: 'secondary', text: true, size: 'small' };\n            }\n        },\n        navigatorButtonProps: {\n            type: Object,\n            default() {\n                return { severity: 'secondary', text: true, rounded: true };\n            }\n        },\n        timepickerButtonProps: {\n            type: Object,\n            default() {\n                return { severity: 'secondary', text: true, rounded: true };\n            }\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        }\n    },\n    style: DatePickerStyle,\n    provide() {\n        return {\n            $pcDatePicker: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <span ref=\"container\" :id=\"$id\" :class=\"cx('root')\" :style=\"sx('root')\" :data-p=\"containerDataP\" v-bind=\"ptmi('root')\">\n        <InputText\n            v-if=\"!inline\"\n            :ref=\"inputRef\"\n            :id=\"inputId\"\n            role=\"combobox\"\n            :class=\"[inputClass, cx('pcInputText')]\"\n            :style=\"inputStyle\"\n            :defaultValue=\"inputFieldValue\"\n            :placeholder=\"placeholder\"\n            :name=\"name\"\n            :size=\"size\"\n            :invalid=\"invalid\"\n            :variant=\"variant\"\n            :fluid=\"fluid\"\n            :unstyled=\"unstyled\"\n            autocomplete=\"off\"\n            aria-autocomplete=\"none\"\n            aria-haspopup=\"dialog\"\n            :aria-expanded=\"overlayVisible\"\n            :aria-controls=\"panelId\"\n            :aria-labelledby=\"ariaLabelledby\"\n            :aria-label=\"ariaLabel\"\n            inputmode=\"none\"\n            :disabled=\"disabled\"\n            :readonly=\"!manualInput || readonly\"\n            :tabindex=\"0\"\n            @input=\"onInput\"\n            @click=\"onInputClick\"\n            @focus=\"onFocus\"\n            @blur=\"onBlur\"\n            @keydown=\"onKeyDown\"\n            :data-p-has-dropdown=\"showIcon && iconDisplay === 'button' && !inline\"\n            :data-p-has-e-icon=\"showIcon && iconDisplay === 'input' && !inline\"\n            :pt=\"ptm('pcInputText')\"\n        />\n        <slot v-if=\"showIcon && iconDisplay === 'button' && !inline\" name=\"dropdownbutton\" :toggleCallback=\"onButtonClick\">\n            <button\n                :class=\"cx('dropdown')\"\n                :disabled=\"disabled\"\n                @click=\"onButtonClick\"\n                type=\"button\"\n                :aria-label=\"$primevue.config.locale.chooseDate\"\n                aria-haspopup=\"dialog\"\n                :aria-expanded=\"overlayVisible\"\n                :aria-controls=\"panelId\"\n                v-bind=\"ptm('dropdown')\"\n            >\n                <slot name=\"dropdownicon\" :class=\"icon\">\n                    <component :is=\"icon ? 'span' : 'CalendarIcon'\" :class=\"icon\" v-bind=\"ptm('dropdownIcon')\" />\n                </slot>\n            </button>\n        </slot>\n        <template v-else-if=\"showIcon && iconDisplay === 'input' && !inline\">\n            <span v-if=\"$slots.inputicon || showIcon\" :class=\"cx('inputIconContainer')\" :data-p=\"inputIconDataP\" v-bind=\"ptm('inputIconContainer')\">\n                <slot name=\"inputicon\" :class=\"cx('inputIcon')\" :clickCallback=\"onButtonClick\">\n                    <component :is=\"icon ? 'i' : 'CalendarIcon'\" :class=\"[icon, cx('inputIcon')]\" @click=\"onButtonClick\" v-bind=\"ptm('inputicon')\" />\n                </slot>\n            </span>\n        </template>\n        <Portal :appendTo=\"appendTo\" :disabled=\"inline\">\n            <transition name=\"p-connected-overlay\" @enter=\"onOverlayEnter($event)\" @after-enter=\"onOverlayEnterComplete\" @after-leave=\"onOverlayAfterLeave\" @leave=\"onOverlayLeave\" v-bind=\"ptm('transition')\">\n                <div\n                    v-if=\"inline || overlayVisible\"\n                    :ref=\"overlayRef\"\n                    :id=\"panelId\"\n                    :class=\"[cx('panel'), panelClass]\"\n                    :style=\"panelStyle\"\n                    :role=\"inline ? null : 'dialog'\"\n                    :aria-modal=\"inline ? null : 'true'\"\n                    :aria-label=\"$primevue.config.locale.chooseDate\"\n                    @click=\"onOverlayClick\"\n                    @keydown=\"onOverlayKeyDown\"\n                    @mouseup=\"onOverlayMouseUp\"\n                    :data-p=\"panelDataP\"\n                    v-bind=\"ptm('panel')\"\n                >\n                    <template v-if=\"!timeOnly\">\n                        <div :class=\"cx('calendarContainer')\" v-bind=\"ptm('calendarContainer')\">\n                            <div v-for=\"(month, groupIndex) of months\" :key=\"month.month + month.year\" :class=\"cx('calendar')\" v-bind=\"ptm('calendar')\">\n                                <div :class=\"cx('header')\" v-bind=\"ptm('header')\">\n                                    <slot name=\"header\"></slot>\n                                    <slot name=\"prevbutton\" :actionCallback=\"(event) => onPrevButtonClick(event)\" :keydownCallback=\"(event) => onContainerButtonKeydown(event)\">\n                                        <Button\n                                            v-show=\"groupIndex === 0\"\n                                            :ref=\"previousButtonRef\"\n                                            :class=\"cx('pcPrevButton')\"\n                                            :disabled=\"disabled\"\n                                            :aria-label=\"currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth\"\n                                            :unstyled=\"unstyled\"\n                                            @click=\"onPrevButtonClick\"\n                                            @keydown=\"onContainerButtonKeydown\"\n                                            v-bind=\"navigatorButtonProps\"\n                                            :pt=\"ptm('pcPrevButton')\"\n                                            data-pc-group-section=\"navigator\"\n                                        >\n                                            <template #icon=\"slotProps\">\n                                                <slot name=\"previcon\">\n                                                    <component :is=\"prevIcon ? 'span' : 'ChevronLeftIcon'\" :class=\"[prevIcon, slotProps.class]\" v-bind=\"ptm('pcPrevButton')['icon']\" />\n                                                </slot>\n                                            </template>\n                                        </Button>\n                                    </slot>\n                                    <div :class=\"cx('title')\" v-bind=\"ptm('title')\">\n                                        <template v-if=\"$primevue.config.locale.showMonthAfterYear\">\n                                            <button\n                                                v-if=\"currentView !== 'year'\"\n                                                type=\"button\"\n                                                @click=\"switchToYearView\"\n                                                @keydown=\"onContainerButtonKeydown\"\n                                                :class=\"cx('selectYear')\"\n                                                :disabled=\"switchViewButtonDisabled\"\n                                                :aria-label=\"$primevue.config.locale.chooseYear\"\n                                                v-bind=\"ptm('selectYear')\"\n                                                data-pc-group-section=\"view\"\n                                            >\n                                                {{ getYear(month) }}\n                                            </button>\n                                            <button\n                                                v-if=\"currentView === 'date'\"\n                                                type=\"button\"\n                                                @click=\"switchToMonthView\"\n                                                @keydown=\"onContainerButtonKeydown\"\n                                                :class=\"cx('selectMonth')\"\n                                                :disabled=\"switchViewButtonDisabled\"\n                                                :aria-label=\"$primevue.config.locale.chooseMonth\"\n                                                v-bind=\"ptm('selectMonth')\"\n                                                data-pc-group-section=\"view\"\n                                            >\n                                                {{ getMonthName(month.month) }}\n                                            </button>\n                                        </template>\n                                        <template v-else>\n                                            <button\n                                                v-if=\"currentView === 'date'\"\n                                                type=\"button\"\n                                                @click=\"switchToMonthView\"\n                                                @keydown=\"onContainerButtonKeydown\"\n                                                :class=\"cx('selectMonth')\"\n                                                :disabled=\"switchViewButtonDisabled\"\n                                                :aria-label=\"$primevue.config.locale.chooseMonth\"\n                                                v-bind=\"ptm('selectMonth')\"\n                                                data-pc-group-section=\"view\"\n                                            >\n                                                {{ getMonthName(month.month) }}\n                                            </button>\n                                            <button\n                                                v-if=\"currentView !== 'year'\"\n                                                type=\"button\"\n                                                @click=\"switchToYearView\"\n                                                @keydown=\"onContainerButtonKeydown\"\n                                                :class=\"cx('selectYear')\"\n                                                :disabled=\"switchViewButtonDisabled\"\n                                                :aria-label=\"$primevue.config.locale.chooseYear\"\n                                                v-bind=\"ptm('selectYear')\"\n                                                data-pc-group-section=\"view\"\n                                            >\n                                                {{ getYear(month) }}\n                                            </button>\n                                        </template>\n                                        <span v-if=\"currentView === 'year'\" :class=\"cx('decade')\" v-bind=\"ptm('decade')\">\n                                            <slot name=\"decade\" :years=\"yearPickerValues\"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot>\n                                        </span>\n                                    </div>\n                                    <slot name=\"nextbutton\" :actionCallback=\"(event) => onNextButtonClick(event)\" :keydownCallback=\"(event) => onContainerButtonKeydown(event)\">\n                                        <Button\n                                            v-show=\"numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1\"\n                                            :ref=\"nextButtonRef\"\n                                            :class=\"cx('pcNextButton')\"\n                                            :disabled=\"disabled\"\n                                            :aria-label=\"currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth\"\n                                            :unstyled=\"unstyled\"\n                                            @click=\"onNextButtonClick\"\n                                            @keydown=\"onContainerButtonKeydown\"\n                                            v-bind=\"navigatorButtonProps\"\n                                            :pt=\"ptm('pcNextButton')\"\n                                            data-pc-group-section=\"navigator\"\n                                        >\n                                            <template #icon=\"slotProps\">\n                                                <slot name=\"nexticon\">\n                                                    <component :is=\"nextIcon ? 'span' : 'ChevronRightIcon'\" :class=\"[nextIcon, slotProps.class]\" v-bind=\"ptm('pcNextButton')['icon']\" />\n                                                </slot>\n                                            </template>\n                                        </Button>\n                                    </slot>\n                                </div>\n                                <table v-if=\"currentView === 'date'\" :class=\"cx('dayView')\" role=\"grid\" v-bind=\"ptm('dayView')\">\n                                    <thead v-bind=\"ptm('tableHeader')\">\n                                        <tr v-bind=\"ptm('tableHeaderRow')\">\n                                            <th v-if=\"showWeek\" scope=\"col\" :class=\"cx('weekHeader')\" v-bind=\"ptm('weekHeader', { context: { disabled: showWeek } })\" :data-p-disabled=\"showWeek\" data-pc-group-section=\"tableheadercell\">\n                                                <slot name=\"weekheaderlabel\">\n                                                    <span v-bind=\"ptm('weekHeaderLabel', { context: { disabled: showWeek } })\" data-pc-group-section=\"tableheadercelllabel\">\n                                                        {{ weekHeaderLabel }}\n                                                    </span>\n                                                </slot>\n                                            </th>\n                                            <th v-for=\"weekDay of weekDays\" :key=\"weekDay\" scope=\"col\" :abbr=\"weekDay\" v-bind=\"ptm('tableHeaderCell')\" data-pc-group-section=\"tableheadercell\" :class=\"cx('weekDayCell')\">\n                                                <span :class=\"cx('weekDay')\" v-bind=\"ptm('weekDay')\" data-pc-group-section=\"tableheadercelllabel\">{{ weekDay }}</span>\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                    <tbody v-bind=\"ptm('tableBody')\">\n                                        <tr v-for=\"(week, i) of month.dates\" :key=\"week[0].day + '' + week[0].month\" v-bind=\"ptm('tableBodyRow')\">\n                                            <td v-if=\"showWeek\" :class=\"cx('weekNumber')\" v-bind=\"ptm('weekNumber')\" data-pc-group-section=\"tablebodycell\">\n                                                <span :class=\"cx('weekLabelContainer')\" v-bind=\"ptm('weekLabelContainer', { context: { disabled: showWeek } })\" :data-p-disabled=\"showWeek\" data-pc-group-section=\"tablebodycelllabel\">\n                                                    <slot name=\"weeklabel\" :weekNumber=\"month.weekNumbers[i]\">\n                                                        <span v-if=\"month.weekNumbers[i] < 10\" style=\"visibility: hidden\" v-bind=\"ptm('weekLabel')\">0</span>\n                                                        {{ month.weekNumbers[i] }}\n                                                    </slot>\n                                                </span>\n                                            </td>\n                                            <td\n                                                v-for=\"date of week\"\n                                                :key=\"date.day + '' + date.month\"\n                                                :aria-label=\"date.day\"\n                                                :class=\"cx('dayCell', { date })\"\n                                                v-bind=\"\n                                                    ptm('dayCell', {\n                                                        context: {\n                                                            date,\n                                                            today: date.today,\n                                                            otherMonth: date.otherMonth,\n                                                            selected: isSelected(date),\n                                                            disabled: !date.selectable\n                                                        }\n                                                    })\n                                                \"\n                                                :data-p-today=\"date.today\"\n                                                :data-p-other-month=\"date.otherMonth\"\n                                                data-pc-group-section=\"tablebodycell\"\n                                            >\n                                                <span\n                                                    v-if=\"showOtherMonths || !date.otherMonth\"\n                                                    v-ripple\n                                                    :class=\"cx('day', { date })\"\n                                                    @click=\"onDateSelect($event, date)\"\n                                                    draggable=\"false\"\n                                                    @keydown=\"onDateCellKeydown($event, date, groupIndex)\"\n                                                    :aria-selected=\"isSelected(date)\"\n                                                    :aria-disabled=\"!date.selectable\"\n                                                    v-bind=\"\n                                                        ptm('day', {\n                                                            context: {\n                                                                date,\n                                                                today: date.today,\n                                                                otherMonth: date.otherMonth,\n                                                                selected: isSelected(date),\n                                                                disabled: !date.selectable\n                                                            }\n                                                        })\n                                                    \"\n                                                    :data-p=\"dayDataP(date)\"\n                                                    data-pc-group-section=\"tablebodycelllabel\"\n                                                >\n                                                    <slot name=\"date\" :date=\"date\">{{ date.day }}</slot>\n                                                </span>\n                                                <div v-if=\"isSelected(date)\" class=\"p-hidden-accessible\" aria-live=\"polite\" v-bind=\"ptm('hiddenSelectedDay')\" :data-p-hidden-accessible=\"true\">\n                                                    {{ date.day }}\n                                                </div>\n                                            </td>\n                                        </tr>\n                                    </tbody>\n                                </table>\n                            </div>\n                        </div>\n                        <div v-if=\"currentView === 'month'\" :class=\"cx('monthView')\" v-bind=\"ptm('monthView')\">\n                            <span\n                                v-for=\"(m, i) of monthPickerValues\"\n                                :key=\"m\"\n                                v-ripple\n                                @click=\"onMonthSelect($event, { month: m, index: i })\"\n                                @keydown=\"onMonthCellKeydown($event, { month: m, index: i })\"\n                                :class=\"cx('month', { month: m, index: i })\"\n                                v-bind=\"\n                                    ptm('month', {\n                                        context: {\n                                            month: m,\n                                            monthIndex: i,\n                                            selected: isMonthSelected(i),\n                                            disabled: !m.selectable\n                                        }\n                                    })\n                                \"\n                                :data-p-disabled=\"!m.selectable\"\n                                :data-p-selected=\"isMonthSelected(i)\"\n                            >\n                                {{ m.value }}\n                                <div v-if=\"isMonthSelected(i)\" class=\"p-hidden-accessible\" aria-live=\"polite\" v-bind=\"ptm('hiddenMonth')\" :data-p-hidden-accessible=\"true\">\n                                    {{ m.value }}\n                                </div>\n                            </span>\n                        </div>\n                        <div v-if=\"currentView === 'year'\" :class=\"cx('yearView')\" v-bind=\"ptm('yearView')\">\n                            <span\n                                v-for=\"y of yearPickerValues\"\n                                :key=\"y.value\"\n                                v-ripple\n                                @click=\"onYearSelect($event, y)\"\n                                @keydown=\"onYearCellKeydown($event, y)\"\n                                :class=\"cx('year', { year: y })\"\n                                v-bind=\"\n                                    ptm('year', {\n                                        context: {\n                                            year: y,\n                                            selected: isYearSelected(y.value),\n                                            disabled: !y.selectable\n                                        }\n                                    })\n                                \"\n                                :data-p-disabled=\"!y.selectable\"\n                                :data-p-selected=\"isYearSelected(y.value)\"\n                            >\n                                {{ y.value }}\n                                <div v-if=\"isYearSelected(y.value)\" class=\"p-hidden-accessible\" aria-live=\"polite\" v-bind=\"ptm('hiddenYear')\" :data-p-hidden-accessible=\"true\">\n                                    {{ y.value }}\n                                </div>\n                            </span>\n                        </div>\n                    </template>\n                    <div v-if=\"(showTime || timeOnly) && currentView === 'date'\" :class=\"cx('timePicker')\" :data-p=\"timePickerDataP\" v-bind=\"ptm('timePicker')\">\n                        <div :class=\"cx('hourPicker')\" v-bind=\"ptm('hourPicker')\" data-pc-group-section=\"timepickerContainer\">\n                            <slot name=\"hourincrementbutton\" :callbacks=\"hourIncrementCallbacks\">\n                                <Button\n                                    :class=\"cx('pcIncrementButton')\"\n                                    :aria-label=\"$primevue.config.locale.nextHour\"\n                                    :unstyled=\"unstyled\"\n                                    @mousedown=\"onTimePickerElementMouseDown($event, 0, 1)\"\n                                    @mouseup=\"onTimePickerElementMouseUp($event)\"\n                                    @keydown=\"onContainerButtonKeydown\"\n                                    @mouseleave=\"onTimePickerElementMouseLeave()\"\n                                    @keydown.enter=\"onTimePickerElementMouseDown($event, 0, 1)\"\n                                    @keydown.space=\"onTimePickerElementMouseDown($event, 0, 1)\"\n                                    @keyup.enter=\"onTimePickerElementMouseUp($event)\"\n                                    @keyup.space=\"onTimePickerElementMouseUp($event)\"\n                                    v-bind=\"timepickerButtonProps\"\n                                    :pt=\"ptm('pcIncrementButton')\"\n                                    data-pc-group-section=\"timepickerbutton\"\n                                >\n                                    <template #icon=\"slotProps\">\n                                        <slot name=\"incrementicon\">\n                                            <component :is=\"incrementIcon ? 'span' : 'ChevronUpIcon'\" :class=\"[incrementIcon, slotProps.class]\" v-bind=\"ptm('pcIncrementButton')['icon']\" data-pc-group-section=\"timepickerlabel\" />\n                                        </slot>\n                                    </template>\n                                </Button>\n                            </slot>\n                            <span v-bind=\"ptm('hour')\" data-pc-group-section=\"timepickerlabel\">{{ formattedCurrentHour }}</span>\n                            <slot name=\"hourdecrementbutton\" :callbacks=\"hourDecrementCallbacks\">\n                                <Button\n                                    :class=\"cx('pcDecrementButton')\"\n                                    :aria-label=\"$primevue.config.locale.prevHour\"\n                                    :unstyled=\"unstyled\"\n                                    @mousedown=\"onTimePickerElementMouseDown($event, 0, -1)\"\n                                    @mouseup=\"onTimePickerElementMouseUp($event)\"\n                                    @keydown=\"onContainerButtonKeydown\"\n                                    @mouseleave=\"onTimePickerElementMouseLeave()\"\n                                    @keydown.enter=\"onTimePickerElementMouseDown($event, 0, -1)\"\n                                    @keydown.space=\"onTimePickerElementMouseDown($event, 0, -1)\"\n                                    @keyup.enter=\"onTimePickerElementMouseUp($event)\"\n                                    @keyup.space=\"onTimePickerElementMouseUp($event)\"\n                                    v-bind=\"timepickerButtonProps\"\n                                    :pt=\"ptm('pcDecrementButton')\"\n                                    data-pc-group-section=\"timepickerbutton\"\n                                >\n                                    <template #icon=\"slotProps\">\n                                        <slot name=\"decrementicon\">\n                                            <component :is=\"decrementIcon ? 'span' : 'ChevronDownIcon'\" :class=\"[decrementIcon, slotProps.class]\" v-bind=\"ptm('pcDecrementButton')['icon']\" data-pc-group-section=\"timepickerlabel\" />\n                                        </slot>\n                                    </template>\n                                </Button>\n                            </slot>\n                        </div>\n                        <div v-bind=\"ptm('separatorContainer')\" data-pc-group-section=\"timepickerContainer\">\n                            <span v-bind=\"ptm('separator')\" data-pc-group-section=\"timepickerlabel\">{{ timeSeparator }}</span>\n                        </div>\n                        <div :class=\"cx('minutePicker')\" v-bind=\"ptm('minutePicker')\" data-pc-group-section=\"timepickerContainer\">\n                            <slot name=\"minuteincrementbutton\" :callbacks=\"minuteIncrementCallbacks\">\n                                <Button\n                                    :class=\"cx('pcIncrementButton')\"\n                                    :aria-label=\"$primevue.config.locale.nextMinute\"\n                                    :disabled=\"disabled\"\n                                    :unstyled=\"unstyled\"\n                                    @mousedown=\"onTimePickerElementMouseDown($event, 1, 1)\"\n                                    @mouseup=\"onTimePickerElementMouseUp($event)\"\n                                    @keydown=\"onContainerButtonKeydown\"\n                                    @mouseleave=\"onTimePickerElementMouseLeave()\"\n                                    @keydown.enter=\"onTimePickerElementMouseDown($event, 1, 1)\"\n                                    @keydown.space=\"onTimePickerElementMouseDown($event, 1, 1)\"\n                                    @keyup.enter=\"onTimePickerElementMouseUp($event)\"\n                                    @keyup.space=\"onTimePickerElementMouseUp($event)\"\n                                    v-bind=\"timepickerButtonProps\"\n                                    :pt=\"ptm('pcIncrementButton')\"\n                                    data-pc-group-section=\"timepickerbutton\"\n                                >\n                                    <template #icon=\"slotProps\">\n                                        <slot name=\"incrementicon\">\n                                            <component :is=\"incrementIcon ? 'span' : 'ChevronUpIcon'\" :class=\"[incrementIcon, slotProps.class]\" v-bind=\"ptm('pcIncrementButton')['icon']\" data-pc-group-section=\"timepickerlabel\" />\n                                        </slot>\n                                    </template>\n                                </Button>\n                            </slot>\n                            <span v-bind=\"ptm('minute')\" data-pc-group-section=\"timepickerlabel\">{{ formattedCurrentMinute }}</span>\n                            <slot name=\"minutedecrementbutton\" :callbacks=\"minuteDecrementCallbacks\">\n                                <Button\n                                    :class=\"cx('pcDecrementButton')\"\n                                    :aria-label=\"$primevue.config.locale.prevMinute\"\n                                    :disabled=\"disabled\"\n                                    :unstyled=\"unstyled\"\n                                    @mousedown=\"onTimePickerElementMouseDown($event, 1, -1)\"\n                                    @mouseup=\"onTimePickerElementMouseUp($event)\"\n                                    @keydown=\"onContainerButtonKeydown\"\n                                    @mouseleave=\"onTimePickerElementMouseLeave()\"\n                                    @keydown.enter=\"onTimePickerElementMouseDown($event, 1, -1)\"\n                                    @keydown.space=\"onTimePickerElementMouseDown($event, 1, -1)\"\n                                    @keyup.enter=\"onTimePickerElementMouseUp($event)\"\n                                    @keyup.space=\"onTimePickerElementMouseUp($event)\"\n                                    v-bind=\"timepickerButtonProps\"\n                                    :pt=\"ptm('pcDecrementButton')\"\n                                    data-pc-group-section=\"timepickerbutton\"\n                                >\n                                    <template #icon=\"slotProps\">\n                                        <slot name=\"decrementicon\">\n                                            <component :is=\"decrementIcon ? 'span' : 'ChevronDownIcon'\" :class=\"[decrementIcon, slotProps.class]\" v-bind=\"ptm('pcDecrementButton')['icon']\" data-pc-group-section=\"timepickerlabel\" />\n                                        </slot>\n                                    </template>\n                                </Button>\n                            </slot>\n                        </div>\n                        <div v-if=\"showSeconds\" :class=\"cx('separatorContainer')\" v-bind=\"ptm('separatorContainer')\" data-pc-group-section=\"timepickerContainer\">\n                            <span v-bind=\"ptm('separator')\" data-pc-group-section=\"timepickerlabel\">{{ timeSeparator }}</span>\n                        </div>\n                        <div v-if=\"showSeconds\" :class=\"cx('secondPicker')\" v-bind=\"ptm('secondPicker')\" data-pc-group-section=\"timepickerContainer\">\n                            <slot name=\"secondincrementbutton\" :callbacks=\"secondIncrementCallbacks\">\n                                <Button\n                                    :class=\"cx('pcIncrementButton')\"\n                                    :aria-label=\"$primevue.config.locale.nextSecond\"\n                                    :disabled=\"disabled\"\n                                    :unstyled=\"unstyled\"\n                                    @mousedown=\"onTimePickerElementMouseDown($event, 2, 1)\"\n                                    @mouseup=\"onTimePickerElementMouseUp($event)\"\n                                    @keydown=\"onContainerButtonKeydown\"\n                                    @mouseleave=\"onTimePickerElementMouseLeave()\"\n                                    @keydown.enter=\"onTimePickerElementMouseDown($event, 2, 1)\"\n                                    @keydown.space=\"onTimePickerElementMouseDown($event, 2, 1)\"\n                                    @keyup.enter=\"onTimePickerElementMouseUp($event)\"\n                                    @keyup.space=\"onTimePickerElementMouseUp($event)\"\n                                    v-bind=\"timepickerButtonProps\"\n                                    :pt=\"ptm('pcIncrementButton')\"\n                                    data-pc-group-section=\"timepickerbutton\"\n                                >\n                                    <template #icon=\"slotProps\">\n                                        <slot name=\"incrementicon\">\n                                            <component :is=\"incrementIcon ? 'span' : 'ChevronUpIcon'\" :class=\"[incrementIcon, slotProps.class]\" v-bind=\"ptm('pcIncrementButton')['icon']\" data-pc-group-section=\"timepickerlabel\" />\n                                        </slot>\n                                    </template>\n                                </Button>\n                            </slot>\n                            <span v-bind=\"ptm('second')\" data-pc-group-section=\"timepickerlabel\">{{ formattedCurrentSecond }}</span>\n                            <slot name=\"seconddecrementbutton\" :callbacks=\"secondDecrementCallbacks\">\n                                <Button\n                                    :class=\"cx('pcDecrementButton')\"\n                                    :aria-label=\"$primevue.config.locale.prevSecond\"\n                                    :disabled=\"disabled\"\n                                    :unstyled=\"unstyled\"\n                                    @mousedown=\"onTimePickerElementMouseDown($event, 2, -1)\"\n                                    @mouseup=\"onTimePickerElementMouseUp($event)\"\n                                    @keydown=\"onContainerButtonKeydown\"\n                                    @mouseleave=\"onTimePickerElementMouseLeave()\"\n                                    @keydown.enter=\"onTimePickerElementMouseDown($event, 2, -1)\"\n                                    @keydown.space=\"onTimePickerElementMouseDown($event, 2, -1)\"\n                                    @keyup.enter=\"onTimePickerElementMouseUp($event)\"\n                                    @keyup.space=\"onTimePickerElementMouseUp($event)\"\n                                    v-bind=\"timepickerButtonProps\"\n                                    :pt=\"ptm('pcDecrementButton')\"\n                                    data-pc-group-section=\"timepickerbutton\"\n                                >\n                                    <template #icon=\"slotProps\">\n                                        <slot name=\"decrementicon\">\n                                            <component :is=\"decrementIcon ? 'span' : 'ChevronDownIcon'\" :class=\"[decrementIcon, slotProps.class]\" v-bind=\"ptm('pcDecrementButton')['icon']\" data-pc-group-section=\"timepickerlabel\" />\n                                        </slot>\n                                    </template>\n                                </Button>\n                            </slot>\n                        </div>\n                        <div v-if=\"hourFormat == '12'\" :class=\"cx('separatorContainer')\" v-bind=\"ptm('separatorContainer')\" data-pc-group-section=\"timepickerContainer\">\n                            <span v-bind=\"ptm('separator')\" data-pc-group-section=\"timepickerlabel\">{{ timeSeparator }}</span>\n                        </div>\n                        <div v-if=\"hourFormat == '12'\" :class=\"cx('ampmPicker')\" v-bind=\"ptm('ampmPicker')\">\n                            <slot name=\"ampmincrementbutton\" :toggleCallback=\"(event) => toggleAMPM(event)\" :keydownCallback=\"(event) => onContainerButtonKeydown(event)\">\n                                <Button\n                                    :class=\"cx('pcIncrementButton')\"\n                                    :aria-label=\"$primevue.config.locale.am\"\n                                    :disabled=\"disabled\"\n                                    :unstyled=\"unstyled\"\n                                    @click=\"toggleAMPM($event)\"\n                                    @keydown=\"onContainerButtonKeydown\"\n                                    v-bind=\"timepickerButtonProps\"\n                                    :pt=\"ptm('pcIncrementButton')\"\n                                    data-pc-group-section=\"timepickerbutton\"\n                                >\n                                    <template #icon=\"slotProps\">\n                                        <slot name=\"incrementicon\" :class=\"cx('incrementIcon')\">\n                                            <component :is=\"incrementIcon ? 'span' : 'ChevronUpIcon'\" :class=\"[cx('incrementIcon'), slotProps.class]\" v-bind=\"ptm('pcIncrementButton')['icon']\" data-pc-group-section=\"timepickerlabel\" />\n                                        </slot>\n                                    </template>\n                                </Button>\n                            </slot>\n                            <span v-bind=\"ptm('ampm')\" data-pc-group-section=\"timepickerlabel\">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>\n                            <slot name=\"ampmdecrementbutton\" :toggleCallback=\"(event) => toggleAMPM(event)\" :keydownCallback=\"(event) => onContainerButtonKeydown(event)\">\n                                <Button\n                                    :class=\"cx('pcDecrementButton')\"\n                                    :aria-label=\"$primevue.config.locale.pm\"\n                                    :disabled=\"disabled\"\n                                    @click=\"toggleAMPM($event)\"\n                                    @keydown=\"onContainerButtonKeydown\"\n                                    v-bind=\"timepickerButtonProps\"\n                                    :pt=\"ptm('pcDecrementButton')\"\n                                    data-pc-group-section=\"timepickerbutton\"\n                                >\n                                    <template #icon=\"slotProps\">\n                                        <slot name=\"decrementicon\" :class=\"cx('decrementIcon')\">\n                                            <component :is=\"decrementIcon ? 'span' : 'ChevronDownIcon'\" :class=\"[cx('decrementIcon'), slotProps.class]\" v-bind=\"ptm('pcDecrementButton')['icon']\" data-pc-group-section=\"timepickerlabel\" />\n                                        </slot>\n                                    </template>\n                                </Button>\n                            </slot>\n                        </div>\n                    </div>\n                    <div v-if=\"showButtonBar\" :class=\"cx('buttonbar')\" v-bind=\"ptm('buttonbar')\">\n                        <slot name=\"todaybutton\" :actionCallback=\"(event) => onTodayButtonClick(event)\" :keydownCallback=\"(event) => onContainerButtonKeydown(event)\">\n                            <Button\n                                :label=\"todayLabel\"\n                                @click=\"onTodayButtonClick($event)\"\n                                :class=\"cx('pcTodayButton')\"\n                                :unstyled=\"unstyled\"\n                                @keydown=\"onContainerButtonKeydown\"\n                                v-bind=\"todayButtonProps\"\n                                :pt=\"ptm('pcTodayButton')\"\n                                data-pc-group-section=\"button\"\n                            />\n                        </slot>\n                        <slot name=\"clearbutton\" :actionCallback=\"(event) => onClearButtonClick(event)\" :keydownCallback=\"(event) => onContainerButtonKeydown(event)\">\n                            <Button\n                                :label=\"clearLabel\"\n                                @click=\"onClearButtonClick($event)\"\n                                :class=\"cx('pcClearButton')\"\n                                :unstyled=\"unstyled\"\n                                @keydown=\"onContainerButtonKeydown\"\n                                v-bind=\"clearButtonProps\"\n                                :pt=\"ptm('pcClearButton')\"\n                                data-pc-group-section=\"button\"\n                            />\n                        </slot>\n                    </div>\n                    <slot name=\"footer\"></slot>\n                </div>\n            </transition>\n        </Portal>\n    </span>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport { absolutePosition, addStyle, find, findSingle, getAttribute, getFocusableElements, getIndex, getOuterWidth, isTouchDevice, relativePosition, setAttribute } from '@primeuix/utils/dom';\nimport { localeComparator } from '@primeuix/utils/object';\nimport { ZIndex } from '@primeuix/utils/zindex';\nimport { ConnectedOverlayScrollHandler } from '@primevue/core/utils';\nimport CalendarIcon from '@primevue/icons/calendar';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport ChevronLeftIcon from '@primevue/icons/chevronleft';\nimport ChevronRightIcon from '@primevue/icons/chevronright';\nimport ChevronUpIcon from '@primevue/icons/chevronup';\nimport Button from 'primevue/button';\nimport InputText from 'primevue/inputtext';\nimport OverlayEventBus from 'primevue/overlayeventbus';\nimport Portal from 'primevue/portal';\nimport Ripple from 'primevue/ripple';\nimport BaseDatePicker from './BaseDatePicker.vue';\n\nexport default {\n    name: 'DatePicker',\n    extends: BaseDatePicker,\n    inheritAttrs: false,\n    emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],\n    inject: {\n        $pcFluid: { default: null }\n    },\n    navigationState: null,\n    timePickerChange: false,\n    scrollHandler: null,\n    outsideClickListener: null,\n    resizeListener: null,\n    matchMediaListener: null,\n    matchMediaOrientationListener: null,\n    overlay: null,\n    input: null,\n    previousButton: null,\n    nextButton: null,\n    timePickerTimer: null,\n    preventFocus: false,\n    typeUpdate: false,\n    data() {\n        return {\n            currentMonth: null,\n            currentYear: null,\n            currentHour: null,\n            currentMinute: null,\n            currentSecond: null,\n            pm: null,\n            focused: false,\n            overlayVisible: false,\n            currentView: this.view,\n            query: null,\n            queryMatches: false,\n            queryOrientation: null\n        };\n    },\n    watch: {\n        modelValue(newValue) {\n            this.updateCurrentMetaData();\n\n            if (!this.typeUpdate && !this.inline && this.input) {\n                this.input.value = this.inputFieldValue;\n            }\n\n            this.typeUpdate = false;\n        },\n        showTime() {\n            this.updateCurrentMetaData();\n        },\n        minDate() {\n            this.updateCurrentMetaData();\n        },\n        maxDate() {\n            this.updateCurrentMetaData();\n        },\n        months() {\n            if (this.overlay) {\n                if (!this.focused) {\n                    if (this.inline) {\n                        this.preventFocus = true;\n                    }\n\n                    setTimeout(this.updateFocus, 0);\n                }\n            }\n