diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts
index e3c699b5d..0ce427fdc 100755
--- a/components/lib/calendar/Calendar.d.ts
+++ b/components/lib/calendar/Calendar.d.ts
@@ -2,1032 +2,112 @@
  *
  * Calendar also known as DatePicker, is a form component to work with dates.
  *
- * [Live Demo](https://www.primevue.org/calendar/)
+ * [Live Demo](https://www.primevue.org/datepicker/)
  *
  * @module calendar
  *
  */
-import { TransitionProps, VNode } from 'vue';
-import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptions, ButtonProps } from '../button';
-import { InputTextPassThroughOptions } from '../inputtext';
-import { PassThroughOptions } from '../passthrough';
-import { ClassComponent, DesignToken, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
-
-export declare type CalendarPassThroughOptionType = CalendarPassThroughAttributes | ((options: CalendarPassThroughMethodOptions) => CalendarPassThroughAttributes | string) | string | null | undefined;
-
-export declare type CalendarPassThroughTransitionType = TransitionProps | ((options: CalendarPassThroughMethodOptions) => TransitionProps) | undefined;
+import 'vue';
+import * as DatePicker from '../datepicker';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface CalendarPassThroughMethodOptions {
-    /**
-     * Defines instance.
-     */
-    instance: any;
-    /**
-     * Defines valid properties.
-     */
-    props: CalendarProps;
-    /**
-     * Defines current inline state.
-     */
-    state: CalendarState;
-    /**
-     * Defines current options.
-     */
-    context: CalendarContext;
-    /**
-     * Defines valid attributes.
-     */
-    attrs: any;
-    /**
-     * Defines parent options.
-     */
-    parent: any;
-    /**
-     * Defines passthrough(pt) options in global config.
-     */
-    global: object | undefined;
-}
+export interface CalendarPassThroughMethodOptions extends DatePicker.DatePickerPassThroughMethodOptions {}
 
 /**
  * Custom shared passthrough(pt) option method.
  */
-export interface CalendarSharedPassThroughMethodOptions {
-    /**
-     * Defines valid properties.
-     */
-    props: CalendarProps;
-    /**
-     * Defines current inline state.
-     */
-    state: CalendarState;
-}
+export interface CalendarSharedPassThroughMethodOptions extends DatePicker.DatePickerSharedPassThroughMethodOptions {}
 
 /**
  * Custom Calendar responsive options metadata.
  */
-export interface CalendarResponsiveOptions {
-    /**
-     * Breakpoint for responsive mode. Exp; \@media screen and (max-width: ${breakpoint}) {...}
-     */
-    breakpoint: string;
-    /**
-     * The number of visible months on breakpoint.
-     */
-    numMonths: number;
-}
+export interface CalendarResponsiveOptions extends DatePicker.DatePickerResponsiveOptions {}
 
 /**
  * Custom Calendar month change event.
  * @see {@link CalendarEmits['month-change']]}
  */
-export interface CalendarMonthChangeEvent {
-    /**
-     * New month.
-     */
-    month: number;
-    /**
-     * New year.
-     */
-    year: number;
-}
+export interface CalendarMonthChangeEvent extends DatePicker.DatePickerMonthChangeEvent {}
 
 /**
  * Custom Calendar year change event.
  * @see {@link CalendarEmits['year-change']]}
  */
-export interface CalendarYearChangeEvent {
-    /**
-     * New month.
-     */
-    month: number;
-    /**
-     * New year.
-     */
-    year: number;
-}
+export interface CalendarYearChangeEvent extends DatePicker.DatePickerYearChangeEvent {}
 
 /**
  * Custom Calendar blur event.
  * @see {@link CalendarEmits.blur}
  */
-export interface CalendarBlurEvent {
-    /**
-     * Browser event
-     */
-    originalEvent: Event;
-    /**
-     * Input value
-     */
-    value: string;
-}
+export interface CalendarBlurEvent extends DatePicker.DatePickerBlurEvent {}
 
 /**
  * Custom passthrough(pt) options.
  * @see {@link CalendarProps.pt}
  */
-export interface CalendarPassThroughOptions {
-    /**
-     * Used to pass attributes to the root's DOM element.
-     */
-    root?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the InputText component.
-     * @see {@link InputTextPassThroughOptions}
-     */
-    input?: InputTextPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the dropdown button's DOM element.
-     */
-    dropdownButton?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the panel's DOM element.
-     */
-    panel?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the group container's DOM element.
-     */
-    groupContainer?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the group's DOM element.
-     */
-    group?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the header's DOM element.
-     */
-    header?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the previous button's DOM element.
-     * @see {@link ButtonPassThroughOptions}
-     */
-    previousButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the title's DOM element.
-     */
-    title?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the month title's DOM element.
-     */
-    monthTitle?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the year title's DOM element.
-     */
-    yearTitle?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the decade title's DOM element.
-     */
-    decadeTitle?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the next button's DOM element.
-     * @see {@link ButtonPassThroughOptions}
-     */
-    nextButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the container's DOM element.
-     */
-    container?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the table's DOM element.
-     */
-    table?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the table header's DOM element.
-     */
-    tableHeader?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the table header row's DOM element.
-     */
-    tableHeaderRow?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the week header's DOM element.
-     */
-    weekHeader?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the week header label's DOM element.
-     */
-    weekHeaderLabel?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the table header cell's DOM element.
-     */
-    tableHeaderCell?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the week label's DOM element.
-     */
-    weekLabel?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the week day's DOM element.
-     */
-    weekDay?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the table body's DOM element.
-     */
-    tableBody?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the table body row's DOM element.
-     */
-    tableBodyRow?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the week number's DOM element.
-     */
-    weekNumber?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the week label container's DOM element.
-     */
-    weekLabelContainer?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the day's DOM element.
-     */
-    day?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the day label's DOM element.
-     */
-    dayLabel?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the month picker's DOM element.
-     */
-    monthPicker?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the month's DOM element.
-     */
-    month?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the year picker's DOM element.
-     */
-    yearPicker?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the year's DOM element.
-     */
-    year?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the time picker's DOM element.
-     */
-    timePicker?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the hour picker's DOM element.
-     */
-    hourPicker?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the hour's DOM element.
-     */
-    hour?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the separator container's DOM element.
-     */
-    separatorContainer?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the separator's DOM element.
-     */
-    separator?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the minute picker's DOM element.
-     */
-    minutePicker?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the minute's DOM element.
-     */
-    minute?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the second picker's DOM element.
-     */
-    secondPicker?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the second's DOM element.
-     */
-    second?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the ampm picker's DOM element.
-     */
-    ampmPicker?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the ampm's DOM element.
-     */
-    ampm?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the buttonbar's DOM element.
-     */
-    buttonbar?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the today button's DOM element.
-     * @see {@link ButtonPassThroughOptions}
-     */
-    todayButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the clear button's DOM element.
-     * @see {@link ButtonPassThroughOptions}
-     */
-    clearButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the aria selected day's DOM element.
-     */
-    hiddenSelectedDay?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the aria month's DOM element.
-     */
-    hiddenMonth?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the aria year's DOM element.
-     */
-    hiddenYear?: CalendarPassThroughOptionType;
-    /**
-     * Used to pass attributes to the datepicker mask's DOM element.
-     */
-    datepickerMask?: CalendarPassThroughOptionType;
-    /**
-     * Used to manage all lifecycle hooks.
-     * @see {@link BaseComponent.ComponentHooks}
-     */
-    hooks?: ComponentHooks;
-    /**
-     * Used to control Vue Transition API.
-     */
-    transition?: CalendarPassThroughTransitionType;
-}
+export interface CalendarPassThroughOptions extends DatePicker.DatePickerPassThroughOptions {}
 
 /**
  * Custom passthrough attributes for each DOM elements
  */
-export interface CalendarPassThroughAttributes {
-    [key: string]: any;
-}
+export interface CalendarPassThroughAttributes extends DatePicker.DatePickerPassThroughAttributes {}
 
 /**
  * Defines current inline state in Calendar component.
  */
-export interface CalendarState {
-    /**
-     * Current month as a number.
-     */
-    currentMonth: number;
-    /**
-     * Current year as a number.
-     */
-    currentYear: number;
-    /**
-     * Current hour as a number.
-     */
-    currentHour: number;
-    /**
-     * Current minute as a number.
-     */
-    currentMinute: number;
-    /**
-     * Current second as a number.
-     */
-    currentSecond: number;
-    /**
-     * Current pm state as a boolean.
-     * @defaultValue false
-     */
-    pm: boolean;
-    /**
-     * Current focused state as a boolean.
-     * @defaultValue false
-     */
-    focused: boolean;
-    /**
-     * Current overlay visible state as a boolean.
-     * @defaultValue false
-     */
-    overlayVisible: boolean;
-    /**
-     * Current view state as a string.
-     * @defaultValue 'date'
-     */
-    currentView: string;
-}
+export interface CalendarState extends DatePicker.DatePickerState {}
 
 /**
  * Defines current date options in Calendar component.
  */
-export interface CalendarDateContext {
-    /**
-     * Current date.
-     */
-    day: number;
-    /**
-     * Current month state.
-     */
-    month: number;
-    /**
-     * Current year state.
-     */
-    year: number;
-    /**
-     * Current today state of the calendar's day.
-     */
-    today: boolean;
-    /**
-     * Selectable state of the day.
-     */
-    selectable: boolean;
-}
+export interface CalendarDateContext extends DatePicker.DatePickerDateContext {}
 
 /**
  * Defines current options in Calendar component.
  */
-export interface CalendarContext {
-    /**
-     * Current date.
-     */
-    date: CalendarDateContext;
-    /**
-     * Current today state of the calendar's day.
-     * @defaultValue false
-     */
-    today: boolean;
-    /**
-     * Current other month state of the calendar's day.
-     */
-    otherMonth: boolean;
-    /**
-     * Current selected state of the calendar's day or month or year.
-     * @defaultValue false
-     */
-    selected: boolean;
-    /**
-     * Current disabled state of the calendar's day or month or year.
-     * @defaultValue false
-     */
-    disabled: boolean;
-    /**
-     * Current month state.
-     */
-    month: CalendarMonthOptions;
-    /**
-     * Current month index state.
-     */
-    monthIndex: number;
-    /**
-     * Current year state.
-     */
-    year: CalendarYearOptions;
-}
+export interface CalendarContext extends DatePicker.DatePickerContext {}
 
 /**
  * Defines current month options.
  */
-export interface CalendarMonthOptions {
-    /**
-     * Month value.
-     */
-    value: string;
-    /**
-     * Selectable state of the month.
-     */
-    selectable: boolean;
-}
+export interface CalendarMonthOptions extends DatePicker.DatePickerMonthOptions {}
 
 /**
  * Defines current year options.
  */
-export interface CalendarYearOptions {
-    /**
-     * Year value.
-     */
-    value: number;
-    /**
-     * Selectable state of the month.
-     */
-    selectable: boolean;
-}
+export interface CalendarYearOptions extends DatePicker.DatePickerYearOptions {}
 
 /**
  * Defines valid properties in Calendar component.
  */
-export interface CalendarProps {
-    /**
-     * Value of the component.
-     * @defaultValue null
-     */
-    modelValue?: Date | Array<Date> | Array<Date | null> | undefined | null;
-    /**
-     * Defines the quantity of the selection.
-     * @defaultValue single
-     */
-    selectionMode?: 'single' | 'multiple' | 'range' | undefined;
-    /**
-     * Format of the date. Defaults to PrimeVue Locale configuration.
-     */
-    dateFormat?: string | undefined;
-    /**
-     * When enabled, displays the calendar as inline instead of an overlay.
-     * @defaultValue false
-     */
-    inline?: boolean | undefined;
-    /**
-     * Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.
-     * @defaultValue true
-     */
-    showOtherMonths?: boolean | undefined;
-    /**
-     * Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
-     * @defaultValue false
-     */
-    selectOtherMonths?: boolean | undefined;
-    /**
-     * When enabled, displays a button with icon next to input.
-     * @defaultValue false
-     */
-    showIcon?: boolean | undefined;
-    /**
-     * Icon position of the component. This only applies if the showIcon option is set to true.
-     * @defaultValue 'button'
-     */
-    iconDisplay?: 'button' | 'input' | undefined;
-    /**
-     * Icon of the calendar button.
-     * @deprecated since v3.27.0. Use 'dropdownicon' slot.
-     */
-    icon?: string | undefined;
-    /**
-     * Icon to show in the previous button.
-     * @deprecated since v3.27.0. Use 'previousicon' slot.
-     */
-    previousIcon?: string | undefined;
-    /**
-     * Icon to show in the next button.
-     * @deprecated since v3.27.0. Use 'nexticon' slot.
-     */
-    nextIcon?: string | undefined;
-    /**
-     * Icon to show in each of the increment buttons.
-     * @deprecated since v3.27.0. Use 'incrementicon' slot.
-     */
-    incrementIcon?: string | undefined;
-    /**
-     * Icon to show in each of the decrement buttons.
-     * @deprecated since v3.27.0. Use 'decrementicon' slot.
-     */
-    decrementIcon?: string | undefined;
-    /**
-     * Number of months to display.
-     * @defaultValue 1
-     */
-    numberOfMonths?: number | undefined;
-    /**
-     * An array of options for responsive design.
-     */
-    responsiveOptions?: CalendarResponsiveOptions[];
-    /**
-     * The breakpoint to define the maximum width boundary for datepicker panel.
-     * @defaultValue 769px
-     */
-    breakpoint?: string | undefined;
-    /**
-     * Type of view to display.
-     * @defaultValue date
-     */
-    view?: 'date' | 'month' | 'year' | undefined;
-    /**
-     * Whether the month should be rendered as a dropdown instead of text.
-     *
-     * @deprecated since version 3.9.0, Navigator is always on.
-     * @defaultValue false
-     */
-    monthNavigator?: boolean | undefined;
-    /**
-     * Whether the year should be rendered as a dropdown instead of text.
-     *
-     * @deprecated since version 3.9.0, Navigator is always on.
-     * @defaultValue false
-     */
-    yearNavigator?: boolean | undefined;
-    /**
-     * The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).
-     *
-     * @deprecated since version 3.9.0, Years are based on decades by default.
-     * @defaultValue false
-     */
-    yearRange?: string | undefined;
-    /**
-     * The minimum selectable date.
-     */
-    minDate?: Date | undefined;
-    /**
-     * The maximum selectable date.
-     */
-    maxDate?: Date | undefined;
-    /**
-     * Array with dates to disable.
-     */
-    disabledDates?: Date[] | undefined;
-    /**
-     * Array with disabled weekday numbers.
-     */
-    disabledDays?: number[] | undefined;
-    /**
-     * Maximum number of selectable dates in multiple mode.
-     */
-    maxDateCount?: number | undefined;
-    /**
-     * When disabled, datepicker will not be visible with input focus.
-     * @defaultValue true
-     */
-    showOnFocus?: boolean | undefined;
-    /**
-     * Whether to automatically manage layering.
-     * @defaultValue true
-     */
-    autoZIndex?: boolean | undefined;
-    /**
-     * Base zIndex value to use in layering.
-     * @defaultValue 0
-     */
-    baseZIndex?: number | undefined;
-    /**
-     * Whether to display today and clear buttons at the footer.
-     * @defaultValue false
-     */
-    showButtonBar?: boolean | undefined;
-    /**
-     * The cutoff year for determining the century for a date.
-     * @defaultValue +10
-     */
-    shortYearCutoff?: string | undefined;
-    /**
-     * Whether to display timepicker.
-     * @defaultValue false
-     */
-    showTime?: boolean | undefined;
-    /**
-     * Whether to display timepicker only.
-     * @defaultValue false
-     */
-    timeOnly?: boolean | undefined;
-    /**
-     * Specifies hour format.
-     * @defaultValue 24
-     */
-    hourFormat?: '12' | '24' | undefined;
-    /**
-     * Hours to change per step.
-     * @defaultValue 1
-     */
-    stepHour?: number | undefined;
-    /**
-     * Minutes to change per step.
-     * @defaultValue 1
-     */
-    stepMinute?: number | undefined;
-    /**
-     * Seconds to change per step.
-     * @defaultValue 1
-     */
-    stepSecond?: number | undefined;
-    /**
-     * Whether to show the seconds in time picker.
-     * @defaultValue false
-     */
-    showSeconds?: boolean | undefined;
-    /**
-     * Whether to hide the overlay on date selection when showTime is enabled.
-     * @defaultValue false
-     */
-    hideOnDateTimeSelect?: boolean | undefined;
-    /**
-     * Whether to hide the overlay on date selection is completed when selectionMode is range.
-     * @defaultValue false
-     */
-    hideOnRangeSelection?: boolean | undefined;
-    /**
-     * Separator of time selector.
-     * @defaultValue :
-     */
-    timeSeparator?: string | undefined;
-    /**
-     * When enabled, calendar will show week numbers.
-     * @defaultValue false
-     */
-    showWeek?: boolean | undefined;
-    /**
-     * Whether to allow entering the date manually via typing.
-     * @defaultValue true
-     */
-    manualInput?: boolean | undefined;
-    /**
-     * When present, it specifies that the component should have invalid state style.
-     * @defaultValue false
-     */
-    invalid?: boolean | undefined;
-    /**
-     * When present, it specifies that the component should be disabled.
-     * @defaultValue false
-     */
-    disabled?: boolean | undefined;
-    /**
-     * Specifies the input variant of the component.
-     * @defaultValue outlined
-     */
-    variant?: 'outlined' | 'filled' | undefined;
-    /**
-     * When present, it specifies that an input field is read-only.
-     * @defaultValue false
-     */
-    readonly?: boolean | undefined;
-    /**
-     * Placeholder text for the input.
-     */
-    placeholder?: string | undefined;
-    /**
-     * A valid query selector or an HTMLElement to specify where the overlay gets attached.
-     * @defaultValue body
-     */
-    appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
-    /**
-     * Identifier of the element.
-     */
-    id?: string | undefined;
-    /**
-     * Identifier of the underlying input element.
-     */
-    inputId?: string | undefined;
-    /**
-     * Inline style of the input field.
-     */
-    inputStyle?: object | undefined;
-    /**
-     * Style class of the input field.
-     */
-    inputClass?: string | object | undefined;
-    /**
-     * Inline style of the overlay panel.
-     */
-    panelStyle?: object | undefined;
-    /**
-     * Style class of the overlay panel.
-     */
-    panelClass?: string | object | undefined;
-    /**
-     * Used to pass all properties of the ButtonProps to the today button component.
-     * @type {ButtonProps}
-     * @defaultValue { severity: 'secondary', text: true, size: 'small' }
-     */
-    todayButtonProps?: object | undefined;
-    /**
-     * Used to pass all properties of the ButtonProps to the clear button component.
-     * @type {ButtonProps}
-     * @defaultValue { severity: 'secondary', text: true, size: 'small' }
-     */
-    clearButtonProps?: object | undefined;
-    /**
-     * Used to pass all properties of the ButtonProps to the navigator button component.
-     * @type {ButtonProps}
-     * @defaultValue { severity: 'secondary', text: true }
-     */
-    navigatorButtonProps?: object | undefined;
-    /**
-     * Used to pass all properties of the ButtonProps to the timepicker button component.
-     * @type {ButtonProps}
-     * @defaultValue { severity: 'secondary', text: true }
-     */
-    timepickerButtonProps?: object | undefined;
-    /**
-     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
-     */
-    ariaLabelledby?: string | undefined;
-    /**
-     * Establishes a string value that labels the component.
-     */
-    ariaLabel?: string | undefined;
-    /**
-     * It generates scoped CSS variables using design tokens for the component.
-     */
-    dt?: DesignToken<any>;
-    /**
-     * Used to pass attributes to DOM elements inside the component.
-     * @type {CalendarPassThroughOptions}
-     */
-    pt?: PassThrough<CalendarPassThroughOptions>;
-    /**
-     * Used to configure passthrough(pt) options of the component.
-     * @type {PassThroughOptions}
-     */
-    ptOptions?: PassThroughOptions;
-    /**
-     * When enabled, it removes component related styles in the core.
-     * @defaultValue false
-     */
-    unstyled?: boolean;
-}
+export interface CalendarProps extends DatePicker.DatePickerProps {}
 
 /**
  * Defines valid options of the date slot in Calendar component.
  */
-export interface CalendarDateSlotOptions {
-    /**
-     * Current date.
-     */
-    day: number;
-    /**
-     * Current month state.
-     */
-    month: number;
-    /**
-     * Current year state.
-     */
-    year: number;
-    /**
-     * Current today state of the calendar's day.
-     */
-    today: boolean;
-    /**
-     * Selectable state of the day.
-     */
-    selectable: boolean;
-}
+export interface CalendarDateSlotOptions extends DatePicker.DatePickerDateSlotOptions {}
 
 /**
  * Defines valid slots in Calendar component.
  */
-export interface CalendarSlots {
-    /**
-     * Custom header template of panel.
-     */
-    header(): VNode[];
-    /**
-     * Custom footer template of panel.
-     */
-    footer(): VNode[];
-    /**
-     * Custom date template.
-     */
-    date(scope: {
-        /**
-         * Value of the component.
-         */
-        date: CalendarDateSlotOptions;
-    }): VNode[];
-    /**
-     * Custom decade template.
-     */
-    decade(scope: {
-        /**
-         * An array containing the start and and year of a decade to display at header of the year picker.
-         */
-        years: string[] | undefined;
-    }): VNode[];
-    /**
-     * Custom week header label template.
-     */
-    weekheaderlabel(): VNode[];
-    /**
-     * Custom week label template.
-     * @param {Object} scope - weeklabel slot's params.
-     */
-    weeklabel(scope: {
-        /**
-         * Number of the week
-         */
-        weekNumber: number;
-    }): VNode[];
-    /**
-     * Custom dropdown icon template.
-     * @param {Object} scope - dropdown icon slot's params.
-     */
-    dropdownicon(scope: {
-        /**
-         * Style class of the dropdown icon
-         */
-        class: any;
-    }): VNode[];
-    /**
-     * Custom input icon template.
-     * @param {Object} scope - input icon slot's params.
-     */
-    inputicon(scope: {
-        /**
-         * Style class of the input icon
-         */
-        class: any;
-        /**
-         * Click callback
-         */
-        clickCallback: () => void;
-    }): VNode[];
-    /**
-     * Custom previous icon template.
-     * @param {Object} scope - previous icon slot's params.
-     */
-    previousicon(scope: {
-        /**
-         * Style class of the previous icon
-         */
-        class: any;
-    }): VNode[];
-    /**
-     * Custom next icon template.
-     * @param {Object} scope - next icon slot's params.
-     */
-    nexticon(scope: {
-        /**
-         * Style class of the next icon
-         */
-        class: any;
-    }): VNode[];
-    /**
-     * Custom increment icon template.
-     * @param {Object} scope - increment icon slot's params.
-     */
-    incrementicon(scope: {
-        /**
-         * Style class of the increment icon
-         */
-        class: any;
-    }): VNode[];
-    /**
-     * Custom decrement icon template.
-     * @param {Object} scope - decrement icon slot's params.
-     */
-    decrementicon(scope: {
-        /**
-         * Style class of the decrement icon
-         */
-        class: any;
-    }): VNode[];
-    /**
-     * Custom dropdown button template.
-     */
-    dropdownbutton(scope: {
-        /**
-         * Toggle function.
-         * @param {Event} event - Browser event
-         */
-        toggleCallback: (event: Event) => void;
-    }): VNode[];
-}
+export interface CalendarSlots extends DatePicker.DatePickerSlots {}
 
 /**
  * Defines valid emits in Calendar component.
  */
-export interface CalendarEmits {
-    /**
-     * Emitted when the value changes.
-     * @param {string | Date | string[] | Date[] | undefined} value - New value.
-     */
-    'update:modelValue'(value: Date | Array<Date> | Array<Date | null> | undefined | null): void;
-    /**
-     * Callback to invoke when input field is being typed.
-     * @param {Event} event - Browser event
-     */
-    input(event: Event): void;
-    /**
-     * Callback to invoke when a date is selected.
-     * @param {Date} value - Selected value.
-     */
-    'date-select'(value: Date): void;
-    /**
-     * Callback to invoke when datepicker panel is shown.
-     */
-    show(): void;
-    /**
-     * Callback to invoke when datepicker panel is hidden.
-     */
-    hide(): void;
-    /**
-     * Callback to invoke when today button is clicked.
-     * @param {Date} date - Today as a date instance.
-     */
-    'today-click'(date: Date): void;
-    /**
-     * Callback to invoke when clear button is clicked.
-     * @param {Event} event - Browser event.
-     */
-    'clear-click'(event: Event): void;
-    /**
-     * Callback to invoke when a month is changed using the navigators.
-     * @param {CalendarMonthChangeEvent} event - Custom month change event.
-     */
-    'month-change'(event: CalendarMonthChangeEvent): void;
-    /**
-     * Callback to invoke when a year is changed using the navigators.
-     * @param {CalendarYearChangeEvent} event - Custom year change event.
-     */
-    'year-change'(event: CalendarYearChangeEvent): void;
-    /**
-     * Callback to invoke on focus of input field.
-     * @param {Event} event - Focus event
-     */
-    focus(event: Event): void;
-    /**
-     * Callback to invoke on blur of input field.
-     * @param {CalendarBlurEvent} event - Blur event
-     */
-    blur(event: CalendarBlurEvent): void;
-    /**
-     * Callback to invoke when a key is pressed.
-     */
-    keydown(event: Event): void;
-}
+export interface CalendarEmits extends DatePicker.DatePickerEmits {}
 
 /**
+ * @deprecated Deprecated since v4. Use DatePicker component instead.
+ *
  * **PrimeVue - Calendar**
  *
  * _Calendar also known as DatePicker, is a form component to work with dates._
  *
- * [Live Demo](https://www.primevue.org/calendar/)
+ * [Live Demo](https://www.primevue.org/datepicker/)
  * --- ---
  * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
  *
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index 95ef4ff2f..cac23e68d 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -1,2980 +1,11 @@
-<template>
-    <span ref="container" :id="d_id" :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
-        <InputText
-            v-if="!inline"
-            :ref="inputRef"
-            :id="inputId"
-            role="combobox"
-            :class="[inputClass, cx('input')]"
-            :style="inputStyle"
-            :value="inputFieldValue"
-            :placeholder="placeholder"
-            :invalid="invalid"
-            :variant="variant"
-            :unstyled="unstyled"
-            autocomplete="off"
-            aria-autocomplete="none"
-            aria-haspopup="dialog"
-            :aria-expanded="overlayVisible"
-            :aria-controls="panelId"
-            :aria-labelledby="ariaLabelledby"
-            :aria-label="ariaLabel"
-            inputmode="none"
-            :disabled="disabled"
-            :readonly="!manualInput || readonly"
-            :tabindex="0"
-            @input="onInput"
-            @click="onInputClick"
-            @focus="onFocus"
-            @blur="onBlur"
-            @keydown="onKeyDown"
-            :pt="ptm('input')"
-        />
-        <slot v-if="showIcon && iconDisplay === 'button'" name="dropdownbutton">
-            <button
-                :class="cx('dropdownButton')"
-                :disabled="disabled"
-                @click="onButtonClick"
-                type="button"
-                :aria-label="$primevue.config.locale.chooseDate"
-                aria-haspopup="dialog"
-                :aria-expanded="overlayVisible"
-                :aria-controls="panelId"
-                v-bind="ptm('dropdownButton')"
-            >
-                <slot name="dropdownicon" :class="icon">
-                    <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButtonIcon')" />
-                </slot>
-            </button>
-        </slot>
-        <template v-else-if="showIcon && iconDisplay === 'input'">
-            <span :class="cx('inputIconContainer')">
-                <slot name="inputicon" :class="cx('inputIcon')" :clickCallback="onButtonClick">
-                    <component :is="icon ? 'i' : 'CalendarIcon'" :class="[icon, cx('inputIcon')]" @click="onButtonClick" v-bind="ptm('inputicon')" />
-                </slot>
-            </span>
-        </template>
-        <Portal :appendTo="appendTo" :disabled="inline">
-            <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave" v-bind="ptm('transition')">
-                <div
-                    v-if="inline || overlayVisible"
-                    :ref="overlayRef"
-                    :id="panelId"
-                    :class="[cx('panel'), panelClass]"
-                    :style="panelStyle"
-                    :role="inline ? null : 'dialog'"
-                    :aria-modal="inline ? null : 'true'"
-                    :aria-label="$primevue.config.locale.chooseDate"
-                    @click="onOverlayClick"
-                    @keydown="onOverlayKeyDown"
-                    @mouseup="onOverlayMouseUp"
-                    v-bind="ptm('panel')"
-                >
-                    <template v-if="!timeOnly">
-                        <div :class="cx('group')" v-bind="ptm('group')">
-                            <div v-for="(month, groupIndex) of months" :key="month.month + month.year" :class="cx('calendar')" v-bind="ptm('calendar')">
-                                <div :class="cx('header')" v-bind="ptm('header')">
-                                    <slot name="header"></slot>
-                                    <Button
-                                        v-show="showOtherMonths ? groupIndex === 0 : false"
-                                        :ref="previousButtonRef"
-                                        :class="cx('previousButton')"
-                                        :disabled="disabled"
-                                        :aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
-                                        :unstyled="unstyled"
-                                        @click="onPrevButtonClick"
-                                        @keydown="onContainerButtonKeydown"
-                                        v-bind="navigatorButtonProps"
-                                        :pt="ptm('previousButton')"
-                                        data-pc-group-section="navigator"
-                                    >
-                                        <template #icon="slotProps">
-                                            <slot name="previousicon">
-                                                <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[previousIcon, slotProps.class]" v-bind="ptm('previousButton')['icon']" />
-                                            </slot>
-                                        </template>
-                                    </Button>
-                                    <div :class="cx('title')" v-bind="ptm('title')">
-                                        <template v-if="$primevue.config.locale.showMonthAfterYear">
-                                            <button
-                                                v-if="currentView !== 'year'"
-                                                type="button"
-                                                @click="switchToYearView"
-                                                @keydown="onContainerButtonKeydown"
-                                                :class="cx('yearTitle')"
-                                                :disabled="switchViewButtonDisabled"
-                                                :aria-label="$primevue.config.locale.chooseYear"
-                                                v-bind="ptm('yearTitle')"
-                                                data-pc-group-section="view"
-                                            >
-                                                {{ getYear(month) }}
-                                            </button>
-                                            <button
-                                                v-if="currentView === 'date'"
-                                                type="button"
-                                                @click="switchToMonthView"
-                                                @keydown="onContainerButtonKeydown"
-                                                :class="cx('monthTitle')"
-                                                :disabled="switchViewButtonDisabled"
-                                                :aria-label="$primevue.config.locale.chooseMonth"
-                                                v-bind="ptm('monthTitle')"
-                                                data-pc-group-section="view"
-                                            >
-                                                {{ getMonthName(month.month) }}
-                                            </button>
-                                        </template>
-                                        <template v-else>
-                                            <button
-                                                v-if="currentView === 'date'"
-                                                type="button"
-                                                @click="switchToMonthView"
-                                                @keydown="onContainerButtonKeydown"
-                                                :class="cx('monthTitle')"
-                                                :disabled="switchViewButtonDisabled"
-                                                :aria-label="$primevue.config.locale.chooseMonth"
-                                                v-bind="ptm('monthTitle')"
-                                                data-pc-group-section="view"
-                                            >
-                                                {{ getMonthName(month.month) }}
-                                            </button>
-                                            <button
-                                                v-if="currentView !== 'year'"
-                                                type="button"
-                                                @click="switchToYearView"
-                                                @keydown="onContainerButtonKeydown"
-                                                :class="cx('yearTitle')"
-                                                :disabled="switchViewButtonDisabled"
-                                                :aria-label="$primevue.config.locale.chooseYear"
-                                                v-bind="ptm('yearTitle')"
-                                                data-pc-group-section="view"
-                                            >
-                                                {{ getYear(month) }}
-                                            </button>
-                                        </template>
-                                        <span v-if="currentView === 'year'" :class="cx('decadeTitle')" v-bind="ptm('decadeTitle')">
-                                            <slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot>
-                                        </span>
-                                    </div>
-                                    <Button
-                                        v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false"
-                                        :ref="nextButtonRef"
-                                        :class="cx('nextButton')"
-                                        :disabled="disabled"
-                                        :aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
-                                        :unstyled="unstyled"
-                                        @click="onNextButtonClick"
-                                        @keydown="onContainerButtonKeydown"
-                                        v-bind="navigatorButtonProps"
-                                        :pt="ptm('nextButton')"
-                                        data-pc-group-section="navigator"
-                                    >
-                                        <template #icon="slotProps">
-                                            <slot name="nexticon">
-                                                <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[nextIcon, slotProps.class]" v-bind="ptm('nextButton')['icon']" />
-                                            </slot>
-                                        </template>
-                                    </Button>
-                                </div>
-                                <table v-if="currentView === 'date'" :class="cx('grid')" role="grid" v-bind="ptm('grid')">
-                                    <thead v-bind="ptm('tableHeader')">
-                                        <tr v-bind="ptm('tableHeaderRow')">
-                                            <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">
-                                                <slot name="weekheaderlabel">
-                                                    <span v-bind="ptm('weekHeaderLabel', { context: { disabled: showWeek } })" data-pc-group-section="tableheadercelllabel">
-                                                        {{ weekHeaderLabel }}
-                                                    </span>
-                                                </slot>
-                                            </th>
-                                            <th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')" data-pc-group-section="tableheadercell" :class="cx('weekDay')">
-                                                <span v-bind="ptm('weekDay')" data-pc-group-section="tableheadercelllabel" :class="cx('weekDay')">{{ weekDay }}</span>
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody v-bind="ptm('tableBody')">
-                                        <tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')">
-                                            <td v-if="showWeek" :class="cx('weekNumber')" v-bind="ptm('weekNumber')" data-pc-group-section="tablebodycell">
-                                                <span :class="cx('weekLabelContainer')" v-bind="ptm('weekLabelContainer', { context: { disabled: showWeek } })" :data-p-disabled="showWeek" data-pc-group-section="tablebodycelllabel">
-                                                    <slot name="weeklabel" :weekNumber="month.weekNumbers[i]">
-                                                        <span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
-                                                        {{ month.weekNumbers[i] }}
-                                                    </slot>
-                                                </span>
-                                            </td>
-                                            <td
-                                                v-for="date of week"
-                                                :key="date.day + '' + date.month"
-                                                :aria-label="date.day"
-                                                :class="cx('day', { date })"
-                                                v-bind="
-                                                    ptm('day', {
-                                                        context: {
-                                                            date,
-                                                            today: date.today,
-                                                            otherMonth: date.otherMonth,
-                                                            selected: isSelected(date),
-                                                            disabled: !date.selectable
-                                                        }
-                                                    })
-                                                "
-                                                :data-p-today="date.today"
-                                                :data-p-other-month="date.otherMonth"
-                                                data-pc-group-section="tablebodycell"
-                                            >
-                                                <span
-                                                    v-ripple
-                                                    :class="cx('dayLabel', { date })"
-                                                    @click="onDateSelect($event, date)"
-                                                    draggable="false"
-                                                    @keydown="onDateCellKeydown($event, date, groupIndex)"
-                                                    :aria-selected="isSelected(date)"
-                                                    :aria-disabled="!date.selectable"
-                                                    v-bind="
-                                                        ptm('dayLabel', {
-                                                            context: {
-                                                                date,
-                                                                today: date.today,
-                                                                otherMonth: date.otherMonth,
-                                                                selected: isSelected(date),
-                                                                disabled: !date.selectable
-                                                            }
-                                                        })
-                                                    "
-                                                    :data-p-disabled="!date.selectable"
-                                                    :data-p-highlight="isSelected(date)"
-                                                    data-pc-group-section="tablebodycelllabel"
-                                                >
-                                                    <slot name="date" :date="date">{{ date.day }}</slot>
-                                                </span>
-                                                <div v-if="isSelected(date)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenSelectedDay')" :data-p-hidden-accessible="true">
-                                                    {{ date.day }}
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-                        <div v-if="currentView === 'month'" :class="cx('monthPicker')" v-bind="ptm('monthPicker')">
-                            <span
-                                v-for="(m, i) of monthPickerValues"
-                                :key="m"
-                                v-ripple
-                                @click="onMonthSelect($event, { month: m, index: i })"
-                                @keydown="onMonthCellKeydown($event, { month: m, index: i })"
-                                :class="cx('month', { month: m, index: i })"
-                                v-bind="
-                                    ptm('month', {
-                                        context: {
-                                            month: m,
-                                            monthIndex: i,
-                                            selected: isMonthSelected(i),
-                                            disabled: !m.selectable
-                                        }
-                                    })
-                                "
-                                :data-p-disabled="!m.selectable"
-                                :data-p-highlight="isMonthSelected(i)"
-                            >
-                                {{ m.value }}
-                                <div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenMonth')" :data-p-hidden-accessible="true">
-                                    {{ m.value }}
-                                </div>
-                            </span>
-                        </div>
-                        <div v-if="currentView === 'year'" :class="cx('yearPicker')" v-bind="ptm('yearPicker')">
-                            <span
-                                v-for="y of yearPickerValues"
-                                :key="y.value"
-                                v-ripple
-                                @click="onYearSelect($event, y)"
-                                @keydown="onYearCellKeydown($event, y)"
-                                :class="cx('year', { year: y })"
-                                v-bind="
-                                    ptm('year', {
-                                        context: {
-                                            year: y,
-                                            selected: isYearSelected(y.value),
-                                            disabled: !y.selectable
-                                        }
-                                    })
-                                "
-                                :data-p-disabled="!y.selectable"
-                                :data-p-highlight="isYearSelected(y.value)"
-                            >
-                                {{ y.value }}
-                                <div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenYear')" :data-p-hidden-accessible="true">
-                                    {{ y.value }}
-                                </div>
-                            </span>
-                        </div>
-                    </template>
-                    <div v-if="(showTime || timeOnly) && currentView === 'date'" :class="cx('timePicker')" v-bind="ptm('timePicker')">
-                        <div :class="cx('hourPicker')" v-bind="ptm('hourPicker')" data-pc-group-section="timepickerContainer">
-                            <Button
-                                :class="cx('incrementButton')"
-                                :aria-label="$primevue.config.locale.nextHour"
-                                :unstyled="unstyled"
-                                @mousedown="onTimePickerElementMouseDown($event, 0, 1)"
-                                @mouseup="onTimePickerElementMouseUp($event)"
-                                @keydown="onContainerButtonKeydown"
-                                @mouseleave="onTimePickerElementMouseLeave()"
-                                @keydown.enter="onTimePickerElementMouseDown($event, 0, 1)"
-                                @keydown.space="onTimePickerElementMouseDown($event, 0, 1)"
-                                @keyup.enter="onTimePickerElementMouseUp($event)"
-                                @keyup.space="onTimePickerElementMouseUp($event)"
-                                v-bind="timepickerButtonProps"
-                                :pt="ptm('incrementButton')"
-                                data-pc-group-section="timepickerbutton"
-                            >
-                                <template #icon="slotProps">
-                                    <slot name="incrementicon">
-                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
-                                    </slot>
-                                </template>
-                            </Button>
-                            <span v-bind="ptm('hour')" data-pc-group-section="timepickerlabel">{{ formattedCurrentHour }}</span>
-                            <Button
-                                :class="cx('decrementButton')"
-                                :aria-label="$primevue.config.locale.prevHour"
-                                :unstyled="unstyled"
-                                @mousedown="onTimePickerElementMouseDown($event, 0, -1)"
-                                @mouseup="onTimePickerElementMouseUp($event)"
-                                @keydown="onContainerButtonKeydown"
-                                @mouseleave="onTimePickerElementMouseLeave()"
-                                @keydown.enter="onTimePickerElementMouseDown($event, 0, -1)"
-                                @keydown.space="onTimePickerElementMouseDown($event, 0, -1)"
-                                @keyup.enter="onTimePickerElementMouseUp($event)"
-                                @keyup.space="onTimePickerElementMouseUp($event)"
-                                v-bind="timepickerButtonProps"
-                                :pt="ptm('decrementButton')"
-                                data-pc-group-section="timepickerbutton"
-                            >
-                                <template #icon="slotProps">
-                                    <slot name="decrementicon">
-                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
-                                    </slot>
-                                </template>
-                            </Button>
-                        </div>
-                        <div :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
-                            <span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
-                        </div>
-                        <div :class="cx('minutePicker')" v-bind="ptm('minutePicker')" data-pc-group-section="timepickerContainer">
-                            <Button
-                                :class="cx('incrementButton')"
-                                :aria-label="$primevue.config.locale.nextMinute"
-                                :disabled="disabled"
-                                :unstyled="unstyled"
-                                @mousedown="onTimePickerElementMouseDown($event, 1, 1)"
-                                @mouseup="onTimePickerElementMouseUp($event)"
-                                @keydown="onContainerButtonKeydown"
-                                @mouseleave="onTimePickerElementMouseLeave()"
-                                @keydown.enter="onTimePickerElementMouseDown($event, 1, 1)"
-                                @keydown.space="onTimePickerElementMouseDown($event, 1, 1)"
-                                @keyup.enter="onTimePickerElementMouseUp($event)"
-                                @keyup.space="onTimePickerElementMouseUp($event)"
-                                v-bind="timepickerButtonProps"
-                                :pt="ptm('incrementButton')"
-                                data-pc-group-section="timepickerbutton"
-                            >
-                                <template #icon="slotProps">
-                                    <slot name="incrementicon">
-                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
-                                    </slot>
-                                </template>
-                            </Button>
-                            <span v-bind="ptm('minute')" data-pc-group-section="timepickerlabel">{{ formattedCurrentMinute }}</span>
-                            <Button
-                                :class="cx('decrementButton')"
-                                :aria-label="$primevue.config.locale.prevMinute"
-                                :disabled="disabled"
-                                @mousedown="onTimePickerElementMouseDown($event, 1, -1)"
-                                @mouseup="onTimePickerElementMouseUp($event)"
-                                @keydown="onContainerButtonKeydown"
-                                @mouseleave="onTimePickerElementMouseLeave()"
-                                @keydown.enter="onTimePickerElementMouseDown($event, 1, -1)"
-                                @keydown.space="onTimePickerElementMouseDown($event, 1, -1)"
-                                @keyup.enter="onTimePickerElementMouseUp($event)"
-                                @keyup.space="onTimePickerElementMouseUp($event)"
-                                v-bind="timepickerButtonProps"
-                                :pt="ptm('decrementButton')"
-                                data-pc-group-section="timepickerbutton"
-                            >
-                                <template #icon="slotProps">
-                                    <slot name="decrementicon">
-                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
-                                    </slot>
-                                </template>
-                            </Button>
-                        </div>
-                        <div v-if="showSeconds" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
-                            <span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
-                        </div>
-                        <div v-if="showSeconds" :class="cx('secondPicker')" v-bind="ptm('secondPicker')" data-pc-group-section="timepickerContainer">
-                            <Button
-                                :class="cx('incrementButton')"
-                                :aria-label="$primevue.config.locale.nextSecond"
-                                :disabled="disabled"
-                                :unstyled="unstyled"
-                                @mousedown="onTimePickerElementMouseDown($event, 2, 1)"
-                                @mouseup="onTimePickerElementMouseUp($event)"
-                                @keydown="onContainerButtonKeydown"
-                                @mouseleave="onTimePickerElementMouseLeave()"
-                                @keydown.enter="onTimePickerElementMouseDown($event, 2, 1)"
-                                @keydown.space="onTimePickerElementMouseDown($event, 2, 1)"
-                                @keyup.enter="onTimePickerElementMouseUp($event)"
-                                @keyup.space="onTimePickerElementMouseUp($event)"
-                                v-bind="timepickerButtonProps"
-                                :pt="ptm('incrementButton')"
-                                data-pc-group-section="timepickerbutton"
-                            >
-                                <template #icon="slotProps">
-                                    <slot name="incrementicon">
-                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
-                                    </slot>
-                                </template>
-                            </Button>
-                            <span v-bind="ptm('second')" data-pc-group-section="timepickerlabel">{{ formattedCurrentSecond }}</span>
-                            <Button
-                                :class="cx('decrementButton')"
-                                :aria-label="$primevue.config.locale.prevSecond"
-                                :disabled="disabled"
-                                :unstyled="unstyled"
-                                @mousedown="onTimePickerElementMouseDown($event, 2, -1)"
-                                @mouseup="onTimePickerElementMouseUp($event)"
-                                @keydown="onContainerButtonKeydown"
-                                @mouseleave="onTimePickerElementMouseLeave()"
-                                @keydown.enter="onTimePickerElementMouseDown($event, 2, -1)"
-                                @keydown.space="onTimePickerElementMouseDown($event, 2, -1)"
-                                @keyup.enter="onTimePickerElementMouseUp($event)"
-                                @keyup.space="onTimePickerElementMouseUp($event)"
-                                v-bind="timepickerButtonProps"
-                                :pt="ptm('decrementButton')"
-                                data-pc-group-section="timepickerbutton"
-                            >
-                                <template #icon="slotProps">
-                                    <slot name="decrementicon">
-                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
-                                    </slot>
-                                </template>
-                            </Button>
-                        </div>
-                        <div v-if="hourFormat == '12'" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
-                            <span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
-                        </div>
-                        <div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')">
-                            <Button
-                                :class="cx('incrementButton')"
-                                :aria-label="$primevue.config.locale.am"
-                                :disabled="disabled"
-                                :unstyled="unstyled"
-                                @click="toggleAMPM($event)"
-                                @keydown="onContainerButtonKeydown"
-                                v-bind="timepickerButtonProps"
-                                :pt="ptm('incrementButton')"
-                                data-pc-group-section="timepickerbutton"
-                            >
-                                <template #icon="slotProps">
-                                    <slot name="incrementicon" :class="cx('incrementIcon')">
-                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[cx('incrementIcon'), slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
-                                    </slot>
-                                </template>
-                            </Button>
-                            <span v-bind="ptm('ampm')" data-pc-group-section="timepickerlabel">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
-                            <Button
-                                :class="cx('decrementButton')"
-                                :aria-label="$primevue.config.locale.pm"
-                                :disabled="disabled"
-                                @click="toggleAMPM($event)"
-                                @keydown="onContainerButtonKeydown"
-                                v-bind="timepickerButtonProps"
-                                :pt="ptm('decrementButton')"
-                                data-pc-group-section="timepickerbutton"
-                            >
-                                <template #icon="slotProps">
-                                    <slot name="decrementicon" :class="cx('decrementIcon')">
-                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('decrementIcon'), slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
-                                    </slot>
-                                </template>
-                            </Button>
-                        </div>
-                    </div>
-                    <div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
-                        <Button
-                            :label="todayLabel"
-                            @click="onTodayButtonClick($event)"
-                            :class="cx('todayButton')"
-                            :unstyled="unstyled"
-                            @keydown="onContainerButtonKeydown"
-                            v-bind="todayButtonProps"
-                            :pt="ptm('todayButton')"
-                            data-pc-group-section="button"
-                        />
-                        <Button
-                            :label="clearLabel"
-                            @click="onClearButtonClick($event)"
-                            :class="cx('clearButton')"
-                            :unstyled="unstyled"
-                            @keydown="onContainerButtonKeydown"
-                            v-bind="clearButtonProps"
-                            :pt="ptm('clearButton')"
-                            data-pc-group-section="button"
-                        />
-                    </div>
-                    <slot name="footer"></slot>
-                </div>
-            </transition>
-        </Portal>
-    </span>
-</template>
-
 <script>
-import Button from 'primevue/button';
-import CalendarIcon from 'primevue/icons/calendar';
-import ChevronDownIcon from 'primevue/icons/chevrondown';
-import ChevronLeftIcon from 'primevue/icons/chevronleft';
-import ChevronRightIcon from 'primevue/icons/chevronright';
-import ChevronUpIcon from 'primevue/icons/chevronup';
-import InputText from 'primevue/inputtext';
-import OverlayEventBus from 'primevue/overlayeventbus';
-import Portal from 'primevue/portal';
-import Ripple from 'primevue/ripple';
-import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
-import BaseCalendar from './BaseCalendar.vue';
+import DatePicker from 'primevue/datepicker';
 
 export default {
     name: 'Calendar',
-    extends: BaseCalendar,
-    inheritAttrs: false,
-    emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],
-    navigationState: null,
-    timePickerChange: false,
-    scrollHandler: null,
-    outsideClickListener: null,
-    resizeListener: null,
-    matchMediaListener: null,
-    overlay: null,
-    input: null,
-    previousButton: null,
-    nextButton: null,
-    timePickerTimer: null,
-    preventFocus: false,
-    typeUpdate: false,
-    data() {
-        return {
-            d_id: this.id,
-            currentMonth: null,
-            currentYear: null,
-            currentHour: null,
-            currentMinute: null,
-            currentSecond: null,
-            pm: null,
-            focused: false,
-            overlayVisible: false,
-            currentView: this.view,
-            query: null,
-            queryMatches: false
-        };
-    },
-    watch: {
-        id: function (newValue) {
-            this.d_id = newValue || UniqueComponentId();
-        },
-        modelValue(newValue) {
-            this.updateCurrentMetaData();
-
-            if (!this.typeUpdate && !this.inline && this.input) {
-                this.input.value = this.inputFieldValue;
-            }
-
-            this.typeUpdate = false;
-        },
-        showTime() {
-            this.updateCurrentMetaData();
-        },
-        minDate() {
-            this.updateCurrentMetaData();
-        },
-        maxDate() {
-            this.updateCurrentMetaData();
-        },
-        months() {
-            if (this.overlay) {
-                if (!this.focused) {
-                    if (this.inline) {
-                        this.preventFocus = true;
-                    }
-
-                    setTimeout(this.updateFocus, 0);
-                }
-            }
-        },
-        numberOfMonths() {
-            this.destroyResponsiveStyleElement();
-            this.createResponsiveStyle();
-        },
-        responsiveOptions() {
-            this.destroyResponsiveStyleElement();
-            this.createResponsiveStyle();
-        },
-        currentView() {
-            Promise.resolve(null).then(() => this.alignOverlay());
-        },
-        view(newValue) {
-            this.currentView = newValue;
-        }
-    },
-    created() {
-        this.updateCurrentMetaData();
-    },
+    extends: DatePicker,
     mounted() {
-        this.d_id = this.d_id || UniqueComponentId();
-        this.createResponsiveStyle();
-        this.bindMatchMediaListener();
-
-        if (this.inline) {
-            this.overlay && this.overlay.setAttribute(this.attributeSelector, '');
-
-            if (!this.disabled) {
-                this.preventFocus = true;
-                this.initFocusableCell();
-            }
-        } else {
-            this.input.value = this.inputFieldValue;
-        }
-    },
-    updated() {
-        if (this.overlay) {
-            this.preventFocus = true;
-            setTimeout(this.updateFocus, 0);
-        }
-
-        if (this.input && this.selectionStart != null && this.selectionEnd != null) {
-            this.input.selectionStart = this.selectionStart;
-            this.input.selectionEnd = this.selectionEnd;
-            this.selectionStart = null;
-            this.selectionEnd = null;
-        }
-    },
-    beforeUnmount() {
-        if (this.timePickerTimer) {
-            clearTimeout(this.timePickerTimer);
-        }
-
-        this.destroyResponsiveStyleElement();
-
-        this.unbindOutsideClickListener();
-        this.unbindResizeListener();
-        this.unbindMatchMediaListener();
-
-        if (this.scrollHandler) {
-            this.scrollHandler.destroy();
-            this.scrollHandler = null;
-        }
-
-        if (this.overlay && this.autoZIndex) {
-            ZIndexUtils.clear(this.overlay);
-        }
-
-        this.overlay = null;
-    },
-    methods: {
-        isComparable() {
-            return this.modelValue != null && typeof this.modelValue !== 'string';
-        },
-        isSelected(dateMeta) {
-            if (!this.isComparable()) {
-                return false;
-            }
-
-            if (this.modelValue) {
-                if (this.isSingleSelection()) {
-                    return this.isDateEquals(this.modelValue, dateMeta);
-                } else if (this.isMultipleSelection()) {
-                    let selected = false;
-
-                    for (let date of this.modelValue) {
-                        selected = this.isDateEquals(date, dateMeta);
-
-                        if (selected) {
-                            break;
-                        }
-                    }
-
-                    return selected;
-                } else if (this.isRangeSelection()) {
-                    if (this.modelValue[1]) return this.isDateEquals(this.modelValue[0], dateMeta) || this.isDateEquals(this.modelValue[1], dateMeta) || this.isDateBetween(this.modelValue[0], this.modelValue[1], dateMeta);
-                    else {
-                        return this.isDateEquals(this.modelValue[0], dateMeta);
-                    }
-                }
-            }
-
-            return false;
-        },
-        isMonthSelected(month) {
-            if (this.isComparable()) {
-                let value = this.isRangeSelection() ? this.modelValue[0] : this.modelValue;
-
-                if (this.isMultipleSelection()) {
-                    return value.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
-                } else {
-                    return value.getMonth() === month && value.getFullYear() === this.currentYear;
-                }
-            }
-
-            return false;
-        },
-        isYearSelected(year) {
-            if (this.isComparable()) {
-                let value = this.isRangeSelection() ? this.modelValue[0] : this.modelValue;
-
-                if (this.isMultipleSelection()) {
-                    return value.some((currentValue) => currentValue.getFullYear() === year);
-                } else {
-                    return value.getFullYear() === year;
-                }
-            }
-
-            return false;
-        },
-        isDateEquals(value, dateMeta) {
-            if (value) return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
-            else return false;
-        },
-        isDateBetween(start, end, dateMeta) {
-            let between = false;
-
-            if (start && end) {
-                let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
-
-                return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
-            }
-
-            return between;
-        },
-        getFirstDayOfMonthIndex(month, year) {
-            let day = new Date();
-
-            day.setDate(1);
-            day.setMonth(month);
-            day.setFullYear(year);
-
-            let dayIndex = day.getDay() + this.sundayIndex;
-
-            return dayIndex >= 7 ? dayIndex - 7 : dayIndex;
-        },
-        getDaysCountInMonth(month, year) {
-            return 32 - this.daylightSavingAdjust(new Date(year, month, 32)).getDate();
-        },
-        getDaysCountInPrevMonth(month, year) {
-            let prev = this.getPreviousMonthAndYear(month, year);
-
-            return this.getDaysCountInMonth(prev.month, prev.year);
-        },
-        getPreviousMonthAndYear(month, year) {
-            let m, y;
-
-            if (month === 0) {
-                m = 11;
-                y = year - 1;
-            } else {
-                m = month - 1;
-                y = year;
-            }
-
-            return { month: m, year: y };
-        },
-        getNextMonthAndYear(month, year) {
-            let m, y;
-
-            if (month === 11) {
-                m = 0;
-                y = year + 1;
-            } else {
-                m = month + 1;
-                y = year;
-            }
-
-            return { month: m, year: y };
-        },
-        daylightSavingAdjust(date) {
-            if (!date) {
-                return null;
-            }
-
-            date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
-
-            return date;
-        },
-        isToday(today, day, month, year) {
-            return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
-        },
-        isSelectable(day, month, year, otherMonth) {
-            let validMin = true;
-            let validMax = true;
-            let validDate = true;
-            let validDay = true;
-
-            if (otherMonth && !this.selectOtherMonths) {
-                return false;
-            }
-
-            if (this.minDate) {
-                if (this.minDate.getFullYear() > year) {
-                    validMin = false;
-                } else if (this.minDate.getFullYear() === year) {
-                    if (this.minDate.getMonth() > month) {
-                        validMin = false;
-                    } else if (this.minDate.getMonth() === month) {
-                        if (this.minDate.getDate() > day) {
-                            validMin = false;
-                        }
-                    }
-                }
-            }
-
-            if (this.maxDate) {
-                if (this.maxDate.getFullYear() < year) {
-                    validMax = false;
-                } else if (this.maxDate.getFullYear() === year) {
-                    if (this.maxDate.getMonth() < month) {
-                        validMax = false;
-                    } else if (this.maxDate.getMonth() === month) {
-                        if (this.maxDate.getDate() < day) {
-                            validMax = false;
-                        }
-                    }
-                }
-            }
-
-            if (this.disabledDates) {
-                validDate = !this.isDateDisabled(day, month, year);
-            }
-
-            if (this.disabledDays) {
-                validDay = !this.isDayDisabled(day, month, year);
-            }
-
-            return validMin && validMax && validDate && validDay;
-        },
-        onOverlayEnter(el) {
-            el.setAttribute(this.attributeSelector, '');
-            const styles = !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
-
-            DomHandler.addStyles(el, styles);
-
-            if (this.autoZIndex) {
-                ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
-            }
-
-            this.alignOverlay();
-            this.$emit('show');
-        },
-        onOverlayEnterComplete() {
-            this.bindOutsideClickListener();
-            this.bindScrollListener();
-            this.bindResizeListener();
-        },
-        onOverlayAfterLeave(el) {
-            if (this.autoZIndex) {
-                ZIndexUtils.clear(el);
-            }
-        },
-        onOverlayLeave() {
-            this.currentView = this.view;
-            this.unbindOutsideClickListener();
-            this.unbindScrollListener();
-            this.unbindResizeListener();
-            this.$emit('hide');
-
-            this.overlay = null;
-        },
-        onPrevButtonClick(event) {
-            if (this.showOtherMonths) {
-                this.navigationState = { backward: true, button: true };
-                this.navBackward(event);
-            }
-        },
-        onNextButtonClick(event) {
-            if (this.showOtherMonths) {
-                this.navigationState = { backward: false, button: true };
-                this.navForward(event);
-            }
-        },
-        navBackward(event) {
-            event.preventDefault();
-
-            if (!this.isEnabled()) {
-                return;
-            }
-
-            if (this.currentView === 'month') {
-                this.decrementYear();
-                this.$emit('year-change', { month: this.currentMonth, year: this.currentYear });
-            } else if (this.currentView === 'year') {
-                this.decrementDecade();
-            } else {
-                if (event.shiftKey) {
-                    this.decrementYear();
-                } else {
-                    if (this.currentMonth === 0) {
-                        this.currentMonth = 11;
-                        this.decrementYear();
-                    } else {
-                        this.currentMonth--;
-                    }
-
-                    this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
-                }
-            }
-        },
-        navForward(event) {
-            event.preventDefault();
-
-            if (!this.isEnabled()) {
-                return;
-            }
-
-            if (this.currentView === 'month') {
-                this.incrementYear();
-                this.$emit('year-change', { month: this.currentMonth, year: this.currentYear });
-            } else if (this.currentView === 'year') {
-                this.incrementDecade();
-            } else {
-                if (event.shiftKey) {
-                    this.incrementYear();
-                } else {
-                    if (this.currentMonth === 11) {
-                        this.currentMonth = 0;
-                        this.incrementYear();
-                    } else {
-                        this.currentMonth++;
-                    }
-
-                    this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
-                }
-            }
-        },
-        decrementYear() {
-            this.currentYear--;
-        },
-        decrementDecade() {
-            this.currentYear = this.currentYear - 10;
-        },
-        incrementYear() {
-            this.currentYear++;
-        },
-        incrementDecade() {
-            this.currentYear = this.currentYear + 10;
-        },
-        switchToMonthView(event) {
-            this.currentView = 'month';
-            setTimeout(this.updateFocus, 0);
-            event.preventDefault();
-        },
-        switchToYearView(event) {
-            this.currentView = 'year';
-            setTimeout(this.updateFocus, 0);
-            event.preventDefault();
-        },
-        isEnabled() {
-            return !this.disabled && !this.readonly;
-        },
-        updateCurrentTimeMeta(date) {
-            let currentHour = date.getHours();
-
-            if (this.hourFormat === '12') {
-                this.pm = currentHour > 11;
-
-                if (currentHour >= 12) currentHour = currentHour == 12 ? 12 : currentHour - 12;
-                else currentHour = currentHour == 0 ? 12 : currentHour;
-            }
-
-            this.currentHour = Math.floor(currentHour / this.stepHour) * this.stepHour;
-            this.currentMinute = Math.floor(date.getMinutes() / this.stepMinute) * this.stepMinute;
-            this.currentSecond = Math.floor(date.getSeconds() / this.stepSecond) * this.stepSecond;
-        },
-        bindOutsideClickListener() {
-            if (!this.outsideClickListener) {
-                this.outsideClickListener = (event) => {
-                    if (this.overlayVisible && this.isOutsideClicked(event)) {
-                        this.overlayVisible = false;
-                    }
-                };
-
-                document.addEventListener('mousedown', this.outsideClickListener);
-            }
-        },
-        unbindOutsideClickListener() {
-            if (this.outsideClickListener) {
-                document.removeEventListener('mousedown', this.outsideClickListener);
-                this.outsideClickListener = null;
-            }
-        },
-        bindScrollListener() {
-            if (!this.scrollHandler) {
-                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
-                    if (this.overlayVisible) {
-                        this.overlayVisible = false;
-                    }
-                });
-            }
-
-            this.scrollHandler.bindScrollListener();
-        },
-        unbindScrollListener() {
-            if (this.scrollHandler) {
-                this.scrollHandler.unbindScrollListener();
-            }
-        },
-        bindResizeListener() {
-            if (!this.resizeListener) {
-                this.resizeListener = () => {
-                    if (this.overlayVisible && !DomHandler.isTouchDevice()) {
-                        this.overlayVisible = false;
-                    }
-                };
-
-                window.addEventListener('resize', this.resizeListener);
-            }
-        },
-        unbindResizeListener() {
-            if (this.resizeListener) {
-                window.removeEventListener('resize', this.resizeListener);
-                this.resizeListener = null;
-            }
-        },
-        bindMatchMediaListener() {
-            if (!this.matchMediaListener) {
-                const query = matchMedia(`(max-width: ${this.breakpoint})`);
-
-                this.query = query;
-                this.queryMatches = query.matches;
-
-                this.matchMediaListener = () => {
-                    this.queryMatches = query.matches;
-                    this.mobileActive = false;
-                };
-
-                this.query.addEventListener('change', this.matchMediaListener);
-            }
-        },
-        unbindMatchMediaListener() {
-            if (this.matchMediaListener) {
-                this.query.removeEventListener('change', this.matchMediaListener);
-                this.matchMediaListener = null;
-            }
-        },
-        isOutsideClicked(event) {
-            return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
-        },
-        isNavIconClicked(event) {
-            return (this.previousButton && (this.previousButton.isSameNode(event.target) || this.previousButton.contains(event.target))) || (this.nextButton && (this.nextButton.isSameNode(event.target) || this.nextButton.contains(event.target)));
-        },
-        alignOverlay() {
-            if (this.overlay) {
-                if (this.appendTo === 'self' || this.inline) {
-                    DomHandler.relativePosition(this.overlay, this.$el);
-                } else {
-                    if (this.view === 'date') {
-                        this.overlay.style.width = DomHandler.getOuterWidth(this.overlay) + 'px';
-                        this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
-                    } else {
-                        this.overlay.style.width = DomHandler.getOuterWidth(this.$el) + 'px';
-                    }
-
-                    DomHandler.absolutePosition(this.overlay, this.$el);
-                }
-            }
-        },
-        onButtonClick() {
-            if (this.isEnabled()) {
-                if (!this.overlayVisible) {
-                    this.input.focus();
-                    this.overlayVisible = true;
-                } else {
-                    this.overlayVisible = false;
-                }
-            }
-        },
-        isDateDisabled(day, month, year) {
-            if (this.disabledDates) {
-                for (let disabledDate of this.disabledDates) {
-                    if (disabledDate.getFullYear() === year && disabledDate.getMonth() === month && disabledDate.getDate() === day) {
-                        return true;
-                    }
-                }
-            }
-
-            return false;
-        },
-        isDayDisabled(day, month, year) {
-            if (this.disabledDays) {
-                let weekday = new Date(year, month, day);
-                let weekdayNumber = weekday.getDay();
-
-                return this.disabledDays.indexOf(weekdayNumber) !== -1;
-            }
-
-            return false;
-        },
-        onMonthDropdownChange(value) {
-            this.currentMonth = parseInt(value);
-            this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
-        },
-        onYearDropdownChange(value) {
-            this.currentYear = parseInt(value);
-            this.$emit('year-change', { month: this.currentMonth + 1, year: this.currentYear });
-        },
-        onDateSelect(event, dateMeta) {
-            if (this.disabled || !dateMeta.selectable) {
-                return;
-            }
-
-            DomHandler.find(this.overlay, 'table td span:not([data-p-disabled="true"])').forEach((cell) => (cell.tabIndex = -1));
-
-            if (event) {
-                event.currentTarget.focus();
-            }
-
-            if (this.isMultipleSelection() && this.isSelected(dateMeta)) {
-                let newValue = this.modelValue.filter((date) => !this.isDateEquals(date, dateMeta));
-
-                this.updateModel(newValue);
-            } else {
-                if (this.shouldSelectDate(dateMeta)) {
-                    if (dateMeta.otherMonth) {
-                        this.currentMonth = dateMeta.month;
-                        this.currentYear = dateMeta.year;
-                        this.selectDate(dateMeta);
-                    } else {
-                        this.selectDate(dateMeta);
-                    }
-                }
-            }
-
-            if (this.isSingleSelection() && (!this.showTime || this.hideOnDateTimeSelect)) {
-                setTimeout(() => {
-                    if (this.input) {
-                        this.input.focus();
-                    }
-
-                    this.overlayVisible = false;
-                }, 150);
-            }
-        },
-        selectDate(dateMeta) {
-            let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
-
-            if (this.showTime) {
-                if (this.hourFormat === '12' && this.currentHour !== 12) {
-                    this.pm ? date.setHours(this.currentHour + 12) : date.setHours(this.currentHour);
-                }
-
-                date.setMinutes(this.currentMinute);
-                date.setSeconds(this.currentSecond);
-            }
-
-            if (this.minDate && this.minDate > date) {
-                date = this.minDate;
-                this.currentHour = date.getHours();
-                this.currentMinute = date.getMinutes();
-                this.currentSecond = date.getSeconds();
-            }
-
-            if (this.maxDate && this.maxDate < date) {
-                date = this.maxDate;
-                this.currentHour = date.getHours();
-                this.currentMinute = date.getMinutes();
-                this.currentSecond = date.getSeconds();
-            }
-
-            let modelVal = null;
-
-            if (this.isSingleSelection()) {
-                modelVal = date;
-            } else if (this.isMultipleSelection()) {
-                modelVal = this.modelValue ? [...this.modelValue, date] : [date];
-            } else if (this.isRangeSelection()) {
-                if (this.modelValue && this.modelValue.length) {
-                    let startDate = this.modelValue[0];
-                    let endDate = this.modelValue[1];
-
-                    if (!endDate && date.getTime() >= startDate.getTime()) {
-                        endDate = date;
-                    } else {
-                        startDate = date;
-                        endDate = null;
-                    }
-
-                    modelVal = [startDate, endDate];
-                } else {
-                    modelVal = [date, null];
-                }
-            }
-
-            if (modelVal !== null) {
-                this.updateModel(modelVal);
-            }
-
-            if (this.isRangeSelection() && this.hideOnRangeSelection && modelVal[1] !== null) {
-                setTimeout(() => {
-                    this.overlayVisible = false;
-                }, 150);
-            }
-
-            this.$emit('date-select', date);
-        },
-        updateModel(value) {
-            this.$emit('update:modelValue', value);
-        },
-        shouldSelectDate() {
-            if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.modelValue ? this.modelValue.length : 0) : true;
-            else return true;
-        },
-        isSingleSelection() {
-            return this.selectionMode === 'single';
-        },
-        isRangeSelection() {
-            return this.selectionMode === 'range';
-        },
-        isMultipleSelection() {
-            return this.selectionMode === 'multiple';
-        },
-        formatValue(value) {
-            if (typeof value === 'string') {
-                return value;
-            }
-
-            let formattedValue = '';
-
-            if (value) {
-                try {
-                    if (this.isSingleSelection()) {
-                        formattedValue = this.formatDateTime(value);
-                    } else if (this.isMultipleSelection()) {
-                        for (let i = 0; i < value.length; i++) {
-                            let dateAsString = this.formatDateTime(value[i]);
-
-                            formattedValue += dateAsString;
-
-                            if (i !== value.length - 1) {
-                                formattedValue += ', ';
-                            }
-                        }
-                    } else if (this.isRangeSelection()) {
-                        if (value && value.length) {
-                            let startDate = value[0];
-                            let endDate = value[1];
-
-                            formattedValue = this.formatDateTime(startDate);
-
-                            if (endDate) {
-                                formattedValue += ' - ' + this.formatDateTime(endDate);
-                            }
-                        }
-                    }
-                } catch (err) {
-                    formattedValue = value;
-                }
-            }
-
-            return formattedValue;
-        },
-        formatDateTime(date) {
-            let formattedValue = null;
-
-            if (date) {
-                if (this.timeOnly) {
-                    formattedValue = this.formatTime(date);
-                } else {
-                    formattedValue = this.formatDate(date, this.datePattern);
-
-                    if (this.showTime) {
-                        formattedValue += ' ' + this.formatTime(date);
-                    }
-                }
-            }
-
-            return formattedValue;
-        },
-        formatDate(date, format) {
-            if (!date) {
-                return '';
-            }
-
-            let iFormat;
-
-            const lookAhead = (match) => {
-                    const matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
-
-                    if (matches) {
-                        iFormat++;
-                    }
-
-                    return matches;
-                },
-                formatNumber = (match, value, len) => {
-                    let num = '' + value;
-
-                    if (lookAhead(match)) {
-                        while (num.length < len) {
-                            num = '0' + num;
-                        }
-                    }
-
-                    return num;
-                },
-                formatName = (match, value, shortNames, longNames) => {
-                    return lookAhead(match) ? longNames[value] : shortNames[value];
-                };
-
-            let output = '';
-            let literal = false;
-
-            if (date) {
-                for (iFormat = 0; iFormat < format.length; iFormat++) {
-                    if (literal) {
-                        if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
-                            literal = false;
-                        } else {
-                            output += format.charAt(iFormat);
-                        }
-                    } else {
-                        switch (format.charAt(iFormat)) {
-                            case 'd':
-                                output += formatNumber('d', date.getDate(), 2);
-                                break;
-                            case 'D':
-                                output += formatName('D', date.getDay(), this.$primevue.config.locale.dayNamesShort, this.$primevue.config.locale.dayNames);
-                                break;
-                            case 'o':
-                                output += formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
-                                break;
-                            case 'm':
-                                output += formatNumber('m', date.getMonth() + 1, 2);
-                                break;
-                            case 'M':
-                                output += formatName('M', date.getMonth(), this.$primevue.config.locale.monthNamesShort, this.$primevue.config.locale.monthNames);
-                                break;
-                            case 'y':
-                                output += lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100);
-                                break;
-                            case '@':
-                                output += date.getTime();
-                                break;
-                            case '!':
-                                output += date.getTime() * 10000 + this.ticksTo1970;
-                                break;
-                            case "'":
-                                if (lookAhead("'")) {
-                                    output += "'";
-                                } else {
-                                    literal = true;
-                                }
-
-                                break;
-                            default:
-                                output += format.charAt(iFormat);
-                        }
-                    }
-                }
-            }
-
-            return output;
-        },
-        formatTime(date) {
-            if (!date) {
-                return '';
-            }
-
-            let output = '';
-            let hours = date.getHours();
-            let minutes = date.getMinutes();
-            let seconds = date.getSeconds();
-
-            if (this.hourFormat === '12' && hours > 11 && hours !== 12) {
-                hours -= 12;
-            }
-
-            if (this.hourFormat === '12') {
-                output += hours === 0 ? 12 : hours < 10 ? '0' + hours : hours;
-            } else {
-                output += hours < 10 ? '0' + hours : hours;
-            }
-
-            output += ':';
-            output += minutes < 10 ? '0' + minutes : minutes;
-
-            if (this.showSeconds) {
-                output += ':';
-                output += seconds < 10 ? '0' + seconds : seconds;
-            }
-
-            if (this.hourFormat === '12') {
-                output += date.getHours() > 11 ? ` ${this.$primevue.config.locale.pm}` : ` ${this.$primevue.config.locale.am}`;
-            }
-
-            return output;
-        },
-        onTodayButtonClick(event) {
-            let date = new Date();
-            let dateMeta = {
-                day: date.getDate(),
-                month: date.getMonth(),
-                year: date.getFullYear(),
-                otherMonth: date.getMonth() !== this.currentMonth || date.getFullYear() !== this.currentYear,
-                today: true,
-                selectable: true
-            };
-
-            this.onDateSelect(null, dateMeta);
-            this.$emit('today-click', date);
-            event.preventDefault();
-        },
-        onClearButtonClick(event) {
-            this.updateModel(null);
-            this.overlayVisible = false;
-            this.$emit('clear-click', event);
-            event.preventDefault();
-        },
-        onTimePickerElementMouseDown(event, type, direction) {
-            if (this.isEnabled()) {
-                this.repeat(event, null, type, direction);
-                event.preventDefault();
-            }
-        },
-        onTimePickerElementMouseUp(event) {
-            if (this.isEnabled()) {
-                this.clearTimePickerTimer();
-                this.updateModelTime();
-                event.preventDefault();
-            }
-        },
-        onTimePickerElementMouseLeave() {
-            this.clearTimePickerTimer();
-        },
-        repeat(event, interval, type, direction) {
-            let i = interval || 500;
-
-            this.clearTimePickerTimer();
-            this.timePickerTimer = setTimeout(() => {
-                this.repeat(event, 100, type, direction);
-            }, i);
-
-            switch (type) {
-                case 0:
-                    if (direction === 1) this.incrementHour(event);
-                    else this.decrementHour(event);
-                    break;
-
-                case 1:
-                    if (direction === 1) this.incrementMinute(event);
-                    else this.decrementMinute(event);
-                    break;
-
-                case 2:
-                    if (direction === 1) this.incrementSecond(event);
-                    else this.decrementSecond(event);
-                    break;
-            }
-        },
-        convertTo24Hour(hours, pm) {
-            if (this.hourFormat == '12') {
-                if (hours === 12) {
-                    return pm ? 12 : 0;
-                } else {
-                    return pm ? hours + 12 : hours;
-                }
-            }
-
-            return hours;
-        },
-        validateTime(hour, minute, second, pm) {
-            let value = this.isComparable() ? this.modelValue : this.viewDate;
-            const convertedHour = this.convertTo24Hour(hour, pm);
-
-            if (this.isRangeSelection()) {
-                value = this.modelValue[1] || this.modelValue[0];
-            }
-
-            if (this.isMultipleSelection()) {
-                value = this.modelValue[this.modelValue.length - 1];
-            }
-
-            const valueDateString = value ? value.toDateString() : null;
-
-            if (this.minDate && valueDateString && this.minDate.toDateString() === valueDateString) {
-                if (this.minDate.getHours() > convertedHour) {
-                    return false;
-                }
-
-                if (this.minDate.getHours() === convertedHour) {
-                    if (this.minDate.getMinutes() > minute) {
-                        return false;
-                    }
-
-                    if (this.minDate.getMinutes() === minute) {
-                        if (this.minDate.getSeconds() > second) {
-                            return false;
-                        }
-                    }
-                }
-            }
-
-            if (this.maxDate && valueDateString && this.maxDate.toDateString() === valueDateString) {
-                if (this.maxDate.getHours() < convertedHour) {
-                    return false;
-                }
-
-                if (this.maxDate.getHours() === convertedHour) {
-                    if (this.maxDate.getMinutes() < minute) {
-                        return false;
-                    }
-
-                    if (this.maxDate.getMinutes() === minute) {
-                        if (this.maxDate.getSeconds() < second) {
-                            return false;
-                        }
-                    }
-                }
-            }
-
-            return true;
-        },
-        incrementHour(event) {
-            let prevHour = this.currentHour;
-            let newHour = this.currentHour + Number(this.stepHour);
-            let newPM = this.pm;
-
-            if (this.hourFormat == '24') newHour = newHour >= 24 ? newHour - 24 : newHour;
-            else if (this.hourFormat == '12') {
-                // Before the AM/PM break, now after
-                if (prevHour < 12 && newHour > 11) {
-                    newPM = !this.pm;
-                }
-
-                newHour = newHour >= 13 ? newHour - 12 : newHour;
-            }
-
-            if (this.validateTime(newHour, this.currentMinute, this.currentSecond, newPM)) {
-                this.currentHour = newHour;
-                this.pm = newPM;
-            }
-
-            event.preventDefault();
-        },
-        decrementHour(event) {
-            let newHour = this.currentHour - this.stepHour;
-            let newPM = this.pm;
-
-            if (this.hourFormat == '24') newHour = newHour < 0 ? 24 + newHour : newHour;
-            else if (this.hourFormat == '12') {
-                // If we were at noon/midnight, then switch
-                if (this.currentHour === 12) {
-                    newPM = !this.pm;
-                }
-
-                newHour = newHour <= 0 ? 12 + newHour : newHour;
-            }
-
-            if (this.validateTime(newHour, this.currentMinute, this.currentSecond, newPM)) {
-                this.currentHour = newHour;
-                this.pm = newPM;
-            }
-
-            event.preventDefault();
-        },
-        incrementMinute(event) {
-            let newMinute = this.currentMinute + Number(this.stepMinute);
-
-            if (this.validateTime(this.currentHour, newMinute, this.currentSecond, this.pm)) {
-                this.currentMinute = newMinute > 59 ? newMinute - 60 : newMinute;
-            }
-
-            event.preventDefault();
-        },
-        decrementMinute(event) {
-            let newMinute = this.currentMinute - this.stepMinute;
-
-            newMinute = newMinute < 0 ? 60 + newMinute : newMinute;
-
-            if (this.validateTime(this.currentHour, newMinute, this.currentSecond, this.pm)) {
-                this.currentMinute = newMinute;
-            }
-
-            event.preventDefault();
-        },
-        incrementSecond(event) {
-            let newSecond = this.currentSecond + Number(this.stepSecond);
-
-            if (this.validateTime(this.currentHour, this.currentMinute, newSecond, this.pm)) {
-                this.currentSecond = newSecond > 59 ? newSecond - 60 : newSecond;
-            }
-
-            event.preventDefault();
-        },
-        decrementSecond(event) {
-            let newSecond = this.currentSecond - this.stepSecond;
-
-            newSecond = newSecond < 0 ? 60 + newSecond : newSecond;
-
-            if (this.validateTime(this.currentHour, this.currentMinute, newSecond, this.pm)) {
-                this.currentSecond = newSecond;
-            }
-
-            event.preventDefault();
-        },
-        updateModelTime() {
-            this.timePickerChange = true;
-            let value = this.isComparable() ? this.modelValue : this.viewDate;
-
-            if (this.isRangeSelection()) {
-                value = this.modelValue[1] || this.modelValue[0];
-            }
-
-            if (this.isMultipleSelection()) {
-                value = this.modelValue[this.modelValue.length - 1];
-            }
-
-            value = value ? new Date(value.getTime()) : new Date();
-
-            if (this.hourFormat == '12') {
-                if (this.currentHour === 12) value.setHours(this.pm ? 12 : 0);
-                else value.setHours(this.pm ? this.currentHour + 12 : this.currentHour);
-            } else {
-                value.setHours(this.currentHour);
-            }
-
-            value.setMinutes(this.currentMinute);
-            value.setSeconds(this.currentSecond);
-
-            if (this.isRangeSelection()) {
-                if (this.modelValue[1]) value = [this.modelValue[0], value];
-                else value = [value, null];
-            }
-
-            if (this.isMultipleSelection()) {
-                value = [...this.modelValue.slice(0, -1), value];
-            }
-
-            this.updateModel(value);
-            this.$emit('date-select', value);
-            setTimeout(() => (this.timePickerChange = false), 0);
-        },
-        toggleAMPM(event) {
-            const validHour = this.validateTime(this.currentHour, this.currentMinute, this.currentSecond, !this.pm);
-
-            if (!validHour && (this.maxDate || this.minDate)) return;
-
-            this.pm = !this.pm;
-            this.updateModelTime();
-            event.preventDefault();
-        },
-        clearTimePickerTimer() {
-            if (this.timePickerTimer) {
-                clearInterval(this.timePickerTimer);
-            }
-        },
-        onMonthSelect(event, { month, index }) {
-            if (this.view === 'month') {
-                this.onDateSelect(event, { year: this.currentYear, month: index, day: 1, selectable: true });
-            } else {
-                this.currentMonth = index;
-                this.currentView = 'date';
-                this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
-            }
-
-            setTimeout(this.updateFocus, 0);
-        },
-        onYearSelect(event, year) {
-            if (this.view === 'year') {
-                this.onDateSelect(event, { year: year.value, month: 0, day: 1, selectable: true });
-            } else {
-                this.currentYear = year.value;
-                this.currentView = 'month';
-                this.$emit('year-change', { month: this.currentMonth + 1, year: this.currentYear });
-            }
-
-            setTimeout(this.updateFocus, 0);
-        },
-        updateCurrentMetaData() {
-            const viewDate = this.viewDate;
-
-            this.currentMonth = viewDate.getMonth();
-            this.currentYear = viewDate.getFullYear();
-
-            if (this.showTime || this.timeOnly) {
-                this.updateCurrentTimeMeta(viewDate);
-            }
-        },
-        isValidSelection(value) {
-            if (value == null) {
-                return true;
-            }
-
-            let isValid = true;
-
-            if (this.isSingleSelection()) {
-                if (!this.isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false)) {
-                    isValid = false;
-                }
-            } else if (value.every((v) => this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false))) {
-                if (this.isRangeSelection()) {
-                    isValid = value.length > 1 && value[1] > value[0] ? true : false;
-                }
-            }
-
-            return isValid;
-        },
-        parseValue(text) {
-            if (!text || text.trim().length === 0) {
-                return null;
-            }
-
-            let value;
-
-            if (this.isSingleSelection()) {
-                value = this.parseDateTime(text);
-            } else if (this.isMultipleSelection()) {
-                let tokens = text.split(',');
-
-                value = [];
-
-                for (let token of tokens) {
-                    value.push(this.parseDateTime(token.trim()));
-                }
-            } else if (this.isRangeSelection()) {
-                let tokens = text.split(' - ');
-
-                value = [];
-
-                for (let i = 0; i < tokens.length; i++) {
-                    value[i] = this.parseDateTime(tokens[i].trim());
-                }
-            }
-
-            return value;
-        },
-        parseDateTime(text) {
-            let date;
-            let parts = text.split(' ');
-
-            if (this.timeOnly) {
-                date = new Date();
-                this.populateTime(date, parts[0], parts[1]);
-            } else {
-                const dateFormat = this.datePattern;
-
-                if (this.showTime) {
-                    date = this.parseDate(parts[0], dateFormat);
-                    this.populateTime(date, parts[1], parts[2]);
-                } else {
-                    date = this.parseDate(text, dateFormat);
-                }
-            }
-
-            return date;
-        },
-        populateTime(value, timeString, ampm) {
-            if (this.hourFormat == '12' && !ampm) {
-                throw 'Invalid Time';
-            }
-
-            this.pm = ampm === this.$primevue.config.locale.pm || ampm === this.$primevue.config.locale.pm.toLowerCase();
-            let time = this.parseTime(timeString);
-
-            value.setHours(time.hour);
-            value.setMinutes(time.minute);
-            value.setSeconds(time.second);
-        },
-        parseTime(value) {
-            let tokens = value.split(':');
-            let validTokenLength = this.showSeconds ? 3 : 2;
-            let regex = /^[0-9][0-9]$/;
-
-            if (tokens.length !== validTokenLength || !tokens[0].match(regex) || !tokens[1].match(regex) || (this.showSeconds && !tokens[2].match(regex))) {
-                throw 'Invalid time';
-            }
-
-            let h = parseInt(tokens[0]);
-            let m = parseInt(tokens[1]);
-            let s = this.showSeconds ? parseInt(tokens[2]) : null;
-
-            if (isNaN(h) || isNaN(m) || h > 23 || m > 59 || (this.hourFormat == '12' && h > 12) || (this.showSeconds && (isNaN(s) || s > 59))) {
-                throw 'Invalid time';
-            } else {
-                if (this.hourFormat == '12' && h !== 12 && this.pm) {
-                    h += 12;
-                } else if (this.hourFormat == '12' && h == 12 && !this.pm) {
-                    h = 0;
-                }
-
-                return { hour: h, minute: m, second: s };
-            }
-        },
-        parseDate(value, format) {
-            if (format == null || value == null) {
-                throw 'Invalid arguments';
-            }
-
-            value = typeof value === 'object' ? value.toString() : value + '';
-
-            if (value === '') {
-                return null;
-            }
-
-            let iFormat,
-                dim,
-                extra,
-                iValue = 0,
-                shortYearCutoff = typeof this.shortYearCutoff !== 'string' ? this.shortYearCutoff : (new Date().getFullYear() % 100) + parseInt(this.shortYearCutoff, 10),
-                year = -1,
-                month = -1,
-                day = -1,
-                doy = -1,
-                literal = false,
-                date,
-                lookAhead = (match) => {
-                    let matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
-
-                    if (matches) {
-                        iFormat++;
-                    }
-
-                    return matches;
-                },
-                getNumber = (match) => {
-                    let isDoubled = lookAhead(match),
-                        size = match === '@' ? 14 : match === '!' ? 20 : match === 'y' && isDoubled ? 4 : match === 'o' ? 3 : 2,
-                        minSize = match === 'y' ? size : 1,
-                        digits = new RegExp('^\\d{' + minSize + ',' + size + '}'),
-                        num = value.substring(iValue).match(digits);
-
-                    if (!num) {
-                        throw 'Missing number at position ' + iValue;
-                    }
-
-                    iValue += num[0].length;
-
-                    return parseInt(num[0], 10);
-                },
-                getName = (match, shortNames, longNames) => {
-                    let index = -1;
-                    let arr = lookAhead(match) ? longNames : shortNames;
-                    let names = [];
-
-                    for (let i = 0; i < arr.length; i++) {
-                        names.push([i, arr[i]]);
-                    }
-
-                    names.sort((a, b) => {
-                        return -(a[1].length - b[1].length);
-                    });
-
-                    for (let i = 0; i < names.length; i++) {
-                        let name = names[i][1];
-
-                        if (value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
-                            index = names[i][0];
-                            iValue += name.length;
-                            break;
-                        }
-                    }
-
-                    if (index !== -1) {
-                        return index + 1;
-                    } else {
-                        throw 'Unknown name at position ' + iValue;
-                    }
-                },
-                checkLiteral = () => {
-                    if (value.charAt(iValue) !== format.charAt(iFormat)) {
-                        throw 'Unexpected literal at position ' + iValue;
-                    }
-
-                    iValue++;
-                };
-
-            if (this.currentView === 'month') {
-                day = 1;
-            }
-
-            for (iFormat = 0; iFormat < format.length; iFormat++) {
-                if (literal) {
-                    if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
-                        literal = false;
-                    } else {
-                        checkLiteral();
-                    }
-                } else {
-                    switch (format.charAt(iFormat)) {
-                        case 'd':
-                            day = getNumber('d');
-                            break;
-                        case 'D':
-                            getName('D', this.$primevue.config.locale.dayNamesShort, this.$primevue.config.locale.dayNames);
-                            break;
-                        case 'o':
-                            doy = getNumber('o');
-                            break;
-                        case 'm':
-                            month = getNumber('m');
-                            break;
-                        case 'M':
-                            month = getName('M', this.$primevue.config.locale.monthNamesShort, this.$primevue.config.locale.monthNames);
-                            break;
-                        case 'y':
-                            year = getNumber('y');
-                            break;
-                        case '@':
-                            date = new Date(getNumber('@'));
-                            year = date.getFullYear();
-                            month = date.getMonth() + 1;
-                            day = date.getDate();
-                            break;
-                        case '!':
-                            date = new Date((getNumber('!') - this.ticksTo1970) / 10000);
-                            year = date.getFullYear();
-                            month = date.getMonth() + 1;
-                            day = date.getDate();
-                            break;
-                        case "'":
-                            if (lookAhead("'")) {
-                                checkLiteral();
-                            } else {
-                                literal = true;
-                            }
-
-                            break;
-                        default:
-                            checkLiteral();
-                    }
-                }
-            }
-
-            if (iValue < value.length) {
-                extra = value.substr(iValue);
-
-                if (!/^\s+/.test(extra)) {
-                    throw 'Extra/unparsed characters found in date: ' + extra;
-                }
-            }
-
-            if (year === -1) {
-                year = new Date().getFullYear();
-            } else if (year < 100) {
-                year += new Date().getFullYear() - (new Date().getFullYear() % 100) + (year <= shortYearCutoff ? 0 : -100);
-            }
-
-            if (doy > -1) {
-                month = 1;
-                day = doy;
-
-                do {
-                    dim = this.getDaysCountInMonth(year, month - 1);
-
-                    if (day <= dim) {
-                        break;
-                    }
-
-                    month++;
-                    day -= dim;
-                    // eslint-disable-next-line
-                } while (true);
-            }
-
-            date = this.daylightSavingAdjust(new Date(year, month - 1, day));
-
-            if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
-                throw 'Invalid date'; // E.g. 31/02/00
-            }
-
-            return date;
-        },
-        getWeekNumber(date) {
-            let checkDate = new Date(date.getTime());
-
-            checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
-            let time = checkDate.getTime();
-
-            checkDate.setMonth(0);
-            checkDate.setDate(1);
-
-            return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
-        },
-        onDateCellKeydown(event, date, groupIndex) {
-            const cellContent = event.currentTarget;
-            const cell = cellContent.parentElement;
-
-            const cellIndex = DomHandler.index(cell);
-
-            switch (event.code) {
-                case 'ArrowDown': {
-                    cellContent.tabIndex = '-1';
-
-                    let nextRow = cell.parentElement.nextElementSibling;
-
-                    if (nextRow) {
-                        let tableRowIndex = DomHandler.index(cell.parentElement);
-                        const tableRows = Array.from(cell.parentElement.parentElement.children);
-                        const nextTableRows = tableRows.slice(tableRowIndex + 1);
-
-                        let hasNextFocusableDate = nextTableRows.find((el) => {
-                            let focusCell = el.children[cellIndex].children[0];
-
-                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
-                        });
-
-                        if (hasNextFocusableDate) {
-                            let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
-
-                            focusCell.tabIndex = '0';
-                            focusCell.focus();
-                        } else {
-                            this.navigationState = { backward: false };
-                            this.navForward(event);
-                        }
-                    } else {
-                        this.navigationState = { backward: false };
-                        this.navForward(event);
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowUp': {
-                    cellContent.tabIndex = '-1';
-
-                    if (event.altKey) {
-                        this.overlayVisible = false;
-                        this.focused = true;
-                    } else {
-                        let prevRow = cell.parentElement.previousElementSibling;
-
-                        if (prevRow) {
-                            let tableRowIndex = DomHandler.index(cell.parentElement);
-                            const tableRows = Array.from(cell.parentElement.parentElement.children);
-                            const prevTableRows = tableRows.slice(0, tableRowIndex).reverse();
-
-                            let hasNextFocusableDate = prevTableRows.find((el) => {
-                                let focusCell = el.children[cellIndex].children[0];
-
-                                return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
-                            });
-
-                            if (hasNextFocusableDate) {
-                                let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
-
-                                focusCell.tabIndex = '0';
-                                focusCell.focus();
-                            } else {
-                                this.navigationState = { backward: true };
-                                this.navBackward(event);
-                            }
-                        } else {
-                            this.navigationState = { backward: true };
-                            this.navBackward(event);
-                        }
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowLeft': {
-                    cellContent.tabIndex = '-1';
-                    let prevCell = cell.previousElementSibling;
-
-                    if (prevCell) {
-                        const cells = Array.from(cell.parentElement.children);
-                        const prevCells = cells.slice(0, cellIndex).reverse();
-
-                        let hasNextFocusableDate = prevCells.find((el) => {
-                            let focusCell = el.children[0];
-
-                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
-                        });
-
-                        if (hasNextFocusableDate) {
-                            let focusCell = hasNextFocusableDate.children[0];
-
-                            focusCell.tabIndex = '0';
-                            focusCell.focus();
-                        } else {
-                            this.navigateToMonth(event, true, groupIndex);
-                        }
-                    } else {
-                        this.navigateToMonth(event, true, groupIndex);
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowRight': {
-                    cellContent.tabIndex = '-1';
-                    let nextCell = cell.nextElementSibling;
-
-                    if (nextCell) {
-                        const cells = Array.from(cell.parentElement.children);
-                        const nextCells = cells.slice(cellIndex + 1);
-                        let hasNextFocusableDate = nextCells.find((el) => {
-                            let focusCell = el.children[0];
-
-                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
-                        });
-
-                        if (hasNextFocusableDate) {
-                            let focusCell = hasNextFocusableDate.children[0];
-
-                            focusCell.tabIndex = '0';
-                            focusCell.focus();
-                        } else {
-                            this.navigateToMonth(event, false, groupIndex);
-                        }
-                    } else {
-                        this.navigateToMonth(event, false, groupIndex);
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'Enter':
-                case 'NumpadEnter':
-
-                case 'Space': {
-                    this.onDateSelect(event, date);
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'Escape': {
-                    this.overlayVisible = false;
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'Tab': {
-                    if (!this.inline) {
-                        this.trapFocus(event);
-                    }
-
-                    break;
-                }
-
-                case 'Home': {
-                    cellContent.tabIndex = '-1';
-                    let currentRow = cell.parentElement;
-                    let focusCell = currentRow.children[0].children[0];
-
-                    if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
-                        this.navigateToMonth(event, true, groupIndex);
-                    } else {
-                        focusCell.tabIndex = '0';
-                        focusCell.focus();
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'End': {
-                    cellContent.tabIndex = '-1';
-                    let currentRow = cell.parentElement;
-                    let focusCell = currentRow.children[currentRow.children.length - 1].children[0];
-
-                    if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
-                        this.navigateToMonth(event, false, groupIndex);
-                    } else {
-                        focusCell.tabIndex = '0';
-                        focusCell.focus();
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'PageUp': {
-                    cellContent.tabIndex = '-1';
-                    if (event.shiftKey) {
-                        this.navigationState = { backward: true };
-                        this.navBackward(event);
-                    } else this.navigateToMonth(event, true, groupIndex);
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'PageDown': {
-                    cellContent.tabIndex = '-1';
-                    if (event.shiftKey) {
-                        this.navigationState = { backward: false };
-                        this.navForward(event);
-                    } else this.navigateToMonth(event, false, groupIndex);
-
-                    event.preventDefault();
-                    break;
-                }
-
-                default:
-                    //no op
-                    break;
-            }
-        },
-        navigateToMonth(event, prev, groupIndex) {
-            if (prev) {
-                if (this.numberOfMonths === 1 || groupIndex === 0) {
-                    this.navigationState = { backward: true };
-                    this.navBackward(event);
-                } else {
-                    let prevMonthContainer = this.overlay.children[groupIndex - 1];
-                    let cells = DomHandler.find(prevMonthContainer, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
-                    let focusCell = cells[cells.length - 1];
-
-                    focusCell.tabIndex = '0';
-                    focusCell.focus();
-                }
-            } else {
-                if (this.numberOfMonths === 1 || groupIndex === this.numberOfMonths - 1) {
-                    this.navigationState = { backward: false };
-                    this.navForward(event);
-                } else {
-                    let nextMonthContainer = this.overlay.children[groupIndex + 1];
-                    let focusCell = DomHandler.findSingle(nextMonthContainer, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
-
-                    focusCell.tabIndex = '0';
-                    focusCell.focus();
-                }
-            }
-        },
-        onMonthCellKeydown(event, index) {
-            const cell = event.currentTarget;
-
-            switch (event.code) {
-                case 'ArrowUp':
-
-                case 'ArrowDown': {
-                    cell.tabIndex = '-1';
-                    var cells = cell.parentElement.children;
-                    var cellIndex = DomHandler.index(cell);
-                    let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 3 : cellIndex - 3];
-
-                    if (nextCell) {
-                        nextCell.tabIndex = '0';
-                        nextCell.focus();
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowLeft': {
-                    cell.tabIndex = '-1';
-                    let prevCell = cell.previousElementSibling;
-
-                    if (prevCell) {
-                        prevCell.tabIndex = '0';
-                        prevCell.focus();
-                    } else {
-                        this.navigationState = { backward: true };
-                        this.navBackward(event);
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowRight': {
-                    cell.tabIndex = '-1';
-                    let nextCell = cell.nextElementSibling;
-
-                    if (nextCell) {
-                        nextCell.tabIndex = '0';
-                        nextCell.focus();
-                    } else {
-                        this.navigationState = { backward: false };
-                        this.navForward(event);
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'PageUp': {
-                    if (event.shiftKey) return;
-                    this.navigationState = { backward: true };
-                    this.navBackward(event);
-
-                    break;
-                }
-
-                case 'PageDown': {
-                    if (event.shiftKey) return;
-                    this.navigationState = { backward: false };
-                    this.navForward(event);
-
-                    break;
-                }
-
-                case 'Enter':
-                case 'NumpadEnter':
-
-                case 'Space': {
-                    this.onMonthSelect(event, index);
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'Escape': {
-                    this.overlayVisible = false;
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'Tab': {
-                    this.trapFocus(event);
-                    break;
-                }
-
-                default:
-                    //no op
-                    break;
-            }
-        },
-        onYearCellKeydown(event, index) {
-            const cell = event.currentTarget;
-
-            switch (event.code) {
-                case 'ArrowUp':
-
-                case 'ArrowDown': {
-                    cell.tabIndex = '-1';
-                    var cells = cell.parentElement.children;
-                    var cellIndex = DomHandler.index(cell);
-                    let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
-
-                    if (nextCell) {
-                        nextCell.tabIndex = '0';
-                        nextCell.focus();
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowLeft': {
-                    cell.tabIndex = '-1';
-                    let prevCell = cell.previousElementSibling;
-
-                    if (prevCell) {
-                        prevCell.tabIndex = '0';
-                        prevCell.focus();
-                    } else {
-                        this.navigationState = { backward: true };
-                        this.navBackward(event);
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowRight': {
-                    cell.tabIndex = '-1';
-                    let nextCell = cell.nextElementSibling;
-
-                    if (nextCell) {
-                        nextCell.tabIndex = '0';
-                        nextCell.focus();
-                    } else {
-                        this.navigationState = { backward: false };
-                        this.navForward(event);
-                    }
-
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'PageUp': {
-                    if (event.shiftKey) return;
-                    this.navigationState = { backward: true };
-                    this.navBackward(event);
-
-                    break;
-                }
-
-                case 'PageDown': {
-                    if (event.shiftKey) return;
-                    this.navigationState = { backward: false };
-                    this.navForward(event);
-
-                    break;
-                }
-
-                case 'Enter':
-                case 'NumpadEnter':
-
-                case 'Space': {
-                    this.onYearSelect(event, index);
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'Escape': {
-                    this.overlayVisible = false;
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'Tab': {
-                    this.trapFocus(event);
-                    break;
-                }
-
-                default:
-                    //no op
-                    break;
-            }
-        },
-        updateFocus() {
-            let cell;
-
-            if (this.navigationState) {
-                if (this.navigationState.button) {
-                    this.initFocusableCell();
-
-                    if (this.navigationState.backward) this.previousButton.focus();
-                    else this.nextButton.focus();
-                } else {
-                    if (this.navigationState.backward) {
-                        let cells;
-
-                        if (this.currentView === 'month') {
-                            cells = DomHandler.find(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"]:not([data-p-disabled="true"])');
-                        } else if (this.currentView === 'year') {
-                            cells = DomHandler.find(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"]:not([data-p-disabled="true"])');
-                        } else {
-                            cells = DomHandler.find(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
-                        }
-
-                        if (cells && cells.length > 0) {
-                            cell = cells[cells.length - 1];
-                        }
-                    } else {
-                        if (this.currentView === 'month') {
-                            cell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"]:not([data-p-disabled="true"])');
-                        } else if (this.currentView === 'year') {
-                            cell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"]:not([data-p-disabled="true"])');
-                        } else {
-                            cell = DomHandler.findSingle(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
-                        }
-                    }
-
-                    if (cell) {
-                        cell.tabIndex = '0';
-                        cell.focus();
-                    }
-                }
-
-                this.navigationState = null;
-            } else {
-                this.initFocusableCell();
-            }
-        },
-        initFocusableCell() {
-            let cell;
-
-            if (this.currentView === 'month') {
-                let cells = DomHandler.find(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"]');
-                let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"][data-p-highlight="true"]');
-
-                cells.forEach((cell) => (cell.tabIndex = -1));
-                cell = selectedCell || cells[0];
-            } else if (this.currentView === 'year') {
-                let cells = DomHandler.find(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"]');
-                let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"][data-p-highlight="true"]');
-
-                cells.forEach((cell) => (cell.tabIndex = -1));
-                cell = selectedCell || cells[0];
-            } else {
-                cell = DomHandler.findSingle(this.overlay, 'span[data-p-highlight="true"]');
-
-                if (!cell) {
-                    let todayCell = DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
-
-                    if (todayCell) cell = todayCell;
-                    else cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
-                }
-            }
-
-            if (cell) {
-                cell.tabIndex = '0';
-
-                if (!this.inline && (!this.navigationState || !this.navigationState.button) && !this.timePickerChange) {
-                    if (!this.manualInput) cell.focus();
-                }
-
-                this.preventFocus = false;
-            }
-        },
-        trapFocus(event) {
-            event.preventDefault();
-            let focusableElements = DomHandler.getFocusableElements(this.overlay);
-
-            if (focusableElements && focusableElements.length > 0) {
-                if (!document.activeElement) {
-                    focusableElements[0].focus();
-                } else {
-                    let focusedIndex = focusableElements.indexOf(document.activeElement);
-
-                    if (event.shiftKey) {
-                        if (focusedIndex === -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();
-                        else focusableElements[focusedIndex - 1].focus();
-                    } else {
-                        if (focusedIndex === -1) {
-                            if (this.timeOnly) {
-                                focusableElements[0].focus();
-                            } else {
-                                let spanIndex = null;
-
-                                for (let i = 0; i < focusableElements.length; i++) {
-                                    if (focusableElements[i].tagName === 'SPAN') spanIndex = i;
-                                }
-
-                                focusableElements[spanIndex].focus();
-                            }
-                        } else if (focusedIndex === focusableElements.length - 1) focusableElements[0].focus();
-                        else focusableElements[focusedIndex + 1].focus();
-                    }
-                }
-            }
-        },
-        onContainerButtonKeydown(event) {
-            switch (event.code) {
-                case 'Tab':
-                    this.trapFocus(event);
-                    break;
-
-                case 'Escape':
-                    this.overlayVisible = false;
-                    event.preventDefault();
-                    break;
-
-                default:
-                    //Noop
-                    break;
-            }
-
-            this.$emit('keydown', event);
-        },
-        onInput(event) {
-            try {
-                this.selectionStart = this.input.selectionStart;
-                this.selectionEnd = this.input.selectionEnd;
-
-                let value = this.parseValue(event.target.value);
-
-                if (this.isValidSelection(value)) {
-                    this.typeUpdate = true;
-                    this.updateModel(value);
-                }
-            } catch (err) {
-                /* NoOp */
-            }
-
-            this.$emit('input', event);
-        },
-        onInputClick() {
-            if (this.showOnFocus && this.isEnabled() && !this.overlayVisible) {
-                this.overlayVisible = true;
-            }
-        },
-        onFocus(event) {
-            if (this.showOnFocus && this.isEnabled()) {
-                this.overlayVisible = true;
-            }
-
-            this.focused = true;
-            this.$emit('focus', event);
-        },
-        onBlur(event) {
-            this.$emit('blur', { originalEvent: event, value: event.target.value });
-
-            this.focused = false;
-            event.target.value = this.formatValue(this.modelValue);
-        },
-        onKeyDown(event) {
-            if (event.code === 'ArrowDown' && this.overlay) {
-                this.trapFocus(event);
-            } else if (event.code === 'ArrowDown' && !this.overlay) {
-                this.overlayVisible = true;
-            } else if (event.code === 'Escape') {
-                if (this.overlayVisible) {
-                    this.overlayVisible = false;
-                    event.preventDefault();
-                }
-            } else if (event.code === 'Tab') {
-                if (this.overlay) {
-                    DomHandler.getFocusableElements(this.overlay).forEach((el) => (el.tabIndex = '-1'));
-                }
-
-                if (this.overlayVisible) {
-                    this.overlayVisible = false;
-                }
-            } else if (event.code === 'Enter') {
-                if (this.manualInput && event.target.value !== null && event.target.value?.trim() !== '') {
-                    try {
-                        let value = this.parseValue(event.target.value);
-
-                        if (this.isValidSelection(value)) {
-                            this.overlayVisible = false;
-                        }
-                    } catch (err) {
-                        /* NoOp */
-                    }
-                }
-            }
-        },
-        overlayRef(el) {
-            this.overlay = el;
-        },
-        inputRef(el) {
-            this.input = el ? el.$el : undefined;
-        },
-        previousButtonRef(el) {
-            this.previousButton = el ? el.$el : undefined;
-        },
-        nextButtonRef(el) {
-            this.nextButton = el ? el.$el : undefined;
-        },
-        getMonthName(index) {
-            return this.$primevue.config.locale.monthNames[index];
-        },
-        getYear(month) {
-            return this.currentView === 'month' ? this.currentYear : month.year;
-        },
-        onOverlayClick(event) {
-            if (!this.inline) {
-                OverlayEventBus.emit('overlay-click', {
-                    originalEvent: event,
-                    target: this.$el
-                });
-            }
-        },
-        onOverlayKeyDown(event) {
-            switch (event.code) {
-                case 'Escape':
-                    if (!this.inline) {
-                        this.input.focus();
-                        this.overlayVisible = false;
-                    }
-
-                    break;
-
-                default:
-                    break;
-            }
-        },
-        onOverlayMouseUp(event) {
-            this.onOverlayClick(event);
-        },
-        createResponsiveStyle() {
-            if (this.numberOfMonths > 1 && this.responsiveOptions && !this.isUnstyled) {
-                if (!this.responsiveStyleElement) {
-                    this.responsiveStyleElement = document.createElement('style');
-                    this.responsiveStyleElement.type = 'text/css';
-                    DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
-                    document.body.appendChild(this.responsiveStyleElement);
-                }
-
-                let innerHTML = '';
-
-                if (this.responsiveOptions) {
-                    const comparer = ObjectUtils.localeComparator();
-                    let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * comparer(o1.breakpoint, o2.breakpoint));
-
-                    for (let i = 0; i < responsiveOptions.length; i++) {
-                        let { breakpoint, numMonths } = responsiveOptions[i];
-                        let styles = `
-                            .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${numMonths}) .p-datepicker-next {
-                                display: inline-flex;
-                            }
-                        `;
-
-                        for (let j = numMonths; j < this.numberOfMonths; j++) {
-                            styles += `
-                                .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${j + 1}) {
-                                    display: none;
-                                }
-                            `;
-                        }
-
-                        innerHTML += `
-                            @media screen and (max-width: ${breakpoint}) {
-                                ${styles}
-                            }
-                        `;
-                    }
-                }
-
-                this.responsiveStyleElement.innerHTML = innerHTML;
-            }
-        },
-        destroyResponsiveStyleElement() {
-            if (this.responsiveStyleElement) {
-                this.responsiveStyleElement.remove();
-                this.responsiveStyleElement = null;
-            }
-        }
-    },
-    computed: {
-        viewDate() {
-            let propValue = this.modelValue;
-
-            if (propValue && Array.isArray(propValue)) {
-                if (this.isRangeSelection()) {
-                    propValue = this.inline ? propValue[0] : propValue[1] || propValue[0];
-                } else if (this.isMultipleSelection()) {
-                    propValue = propValue[propValue.length - 1];
-                }
-            }
-
-            if (propValue && typeof propValue !== 'string') {
-                return propValue;
-            } else {
-                let today = new Date();
-
-                if (this.maxDate && this.maxDate < today) {
-                    return this.maxDate;
-                }
-
-                if (this.minDate && this.minDate > today) {
-                    return this.minDate;
-                }
-
-                return today;
-            }
-        },
-        inputFieldValue() {
-            return this.formatValue(this.modelValue);
-        },
-        months() {
-            let months = [];
-
-            for (let i = 0; i < this.numberOfMonths; i++) {
-                let month = this.currentMonth + i;
-                let year = this.currentYear;
-
-                if (month > 11) {
-                    month = (month % 11) - 1;
-                    year = year + 1;
-                }
-
-                let dates = [];
-                let firstDay = this.getFirstDayOfMonthIndex(month, year);
-                let daysLength = this.getDaysCountInMonth(month, year);
-                let prevMonthDaysLength = this.getDaysCountInPrevMonth(month, year);
-                let dayNo = 1;
-                let today = new Date();
-                let weekNumbers = [];
-                let monthRows = Math.ceil((daysLength + firstDay) / 7);
-
-                for (let i = 0; i < monthRows; i++) {
-                    let week = [];
-
-                    if (i == 0) {
-                        for (let j = prevMonthDaysLength - firstDay + 1; j <= prevMonthDaysLength; j++) {
-                            let prev = this.getPreviousMonthAndYear(month, year);
-
-                            week.push({ day: j, month: prev.month, year: prev.year, otherMonth: true, today: this.isToday(today, j, prev.month, prev.year), selectable: this.isSelectable(j, prev.month, prev.year, true) });
-                        }
-
-                        let remainingDaysLength = 7 - week.length;
-
-                        for (let j = 0; j < remainingDaysLength; j++) {
-                            week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year), selectable: this.isSelectable(dayNo, month, year, false) });
-                            dayNo++;
-                        }
-                    } else {
-                        for (let j = 0; j < 7; j++) {
-                            if (dayNo > daysLength) {
-                                let next = this.getNextMonthAndYear(month, year);
-
-                                week.push({
-                                    day: dayNo - daysLength,
-                                    month: next.month,
-                                    year: next.year,
-                                    otherMonth: true,
-                                    today: this.isToday(today, dayNo - daysLength, next.month, next.year),
-                                    selectable: this.isSelectable(dayNo - daysLength, next.month, next.year, true)
-                                });
-                            } else {
-                                week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year), selectable: this.isSelectable(dayNo, month, year, false) });
-                            }
-
-                            dayNo++;
-                        }
-                    }
-
-                    if (this.showWeek) {
-                        weekNumbers.push(this.getWeekNumber(new Date(week[0].year, week[0].month, week[0].day)));
-                    }
-
-                    dates.push(week);
-                }
-
-                months.push({
-                    month: month,
-                    year: year,
-                    dates: dates,
-                    weekNumbers: weekNumbers
-                });
-            }
-
-            return months;
-        },
-        weekDays() {
-            let weekDays = [];
-            let dayIndex = this.$primevue.config.locale.firstDayOfWeek;
-
-            for (let i = 0; i < 7; i++) {
-                weekDays.push(this.$primevue.config.locale.dayNamesMin[dayIndex]);
-                dayIndex = dayIndex == 6 ? 0 : ++dayIndex;
-            }
-
-            return weekDays;
-        },
-        ticksTo1970() {
-            return ((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000;
-        },
-        sundayIndex() {
-            return this.$primevue.config.locale.firstDayOfWeek > 0 ? 7 - this.$primevue.config.locale.firstDayOfWeek : 0;
-        },
-        datePattern() {
-            return this.dateFormat || this.$primevue.config.locale.dateFormat;
-        },
-        yearOptions() {
-            if (this.yearRange) {
-                let $vm = this;
-                const years = this.yearRange.split(':');
-                let yearStart = parseInt(years[0]);
-                let yearEnd = parseInt(years[1]);
-                let yearOptions = [];
-
-                if (this.currentYear < yearStart) {
-                    $vm.currentYear = yearEnd;
-                } else if (this.currentYear > yearEnd) {
-                    $vm.currentYear = yearStart;
-                }
-
-                for (let i = yearStart; i <= yearEnd; i++) {
-                    yearOptions.push(i);
-                }
-
-                return yearOptions;
-            } else {
-                return null;
-            }
-        },
-        monthPickerValues() {
-            let monthPickerValues = [];
-
-            const isSelectableMonth = (baseMonth) => {
-                if (this.minDate) {
-                    const minMonth = this.minDate.getMonth();
-                    const minYear = this.minDate.getFullYear();
-
-                    if (this.currentYear < minYear || (this.currentYear === minYear && baseMonth < minMonth)) {
-                        return false;
-                    }
-                }
-
-                if (this.maxDate) {
-                    const maxMonth = this.maxDate.getMonth();
-                    const maxYear = this.maxDate.getFullYear();
-
-                    if (this.currentYear > maxYear || (this.currentYear === maxYear && baseMonth > maxMonth)) {
-                        return false;
-                    }
-                }
-
-                return true;
-            };
-
-            for (let i = 0; i <= 11; i++) {
-                monthPickerValues.push({ value: this.$primevue.config.locale.monthNamesShort[i], selectable: isSelectableMonth(i) });
-            }
-
-            return monthPickerValues;
-        },
-        yearPickerValues() {
-            let yearPickerValues = [];
-            let base = this.currentYear - (this.currentYear % 10);
-
-            const isSelectableYear = (baseYear) => {
-                if (this.minDate) {
-                    if (this.minDate.getFullYear() > baseYear) return false;
-                }
-
-                if (this.maxDate) {
-                    if (this.maxDate.getFullYear() < baseYear) return false;
-                }
-
-                return true;
-            };
-
-            for (let i = 0; i < 10; i++) {
-                yearPickerValues.push({ value: base + i, selectable: isSelectableYear(base + i) });
-            }
-
-            return yearPickerValues;
-        },
-        formattedCurrentHour() {
-            return this.currentHour < 10 ? '0' + this.currentHour : this.currentHour;
-        },
-        formattedCurrentMinute() {
-            return this.currentMinute < 10 ? '0' + this.currentMinute : this.currentMinute;
-        },
-        formattedCurrentSecond() {
-            return this.currentSecond < 10 ? '0' + this.currentSecond : this.currentSecond;
-        },
-        todayLabel() {
-            return this.$primevue.config.locale.today;
-        },
-        clearLabel() {
-            return this.$primevue.config.locale.clear;
-        },
-        weekHeaderLabel() {
-            return this.$primevue.config.locale.weekHeader;
-        },
-        monthNames() {
-            return this.$primevue.config.locale.monthNames;
-        },
-        attributeSelector() {
-            return UniqueComponentId();
-        },
-        switchViewButtonDisabled() {
-            return this.numberOfMonths > 1 || this.disabled;
-        },
-        panelId() {
-            return this.d_id + '_panel';
-        }
-    },
-    components: {
-        InputText,
-        Button,
-        Portal,
-        CalendarIcon,
-        ChevronLeftIcon,
-        ChevronRightIcon,
-        ChevronUpIcon,
-        ChevronDownIcon
-    },
-    directives: {
-        ripple: Ripple
+        console.warn('Deprecated since v4. Use DatePicker component instead.');
     }
 };
 </script>
diff --git a/components/lib/calendar/style/CalendarStyle.d.ts b/components/lib/calendar/style/CalendarStyle.d.ts
index be06c604a..303868a76 100644
--- a/components/lib/calendar/style/CalendarStyle.d.ts
+++ b/components/lib/calendar/style/CalendarStyle.d.ts
@@ -1,3 +1,3 @@
-import { BaseStyle } from '../../base/style';
+import { DatePickerStyle } from '../../datepicker/style/DatePickerStyle';
 
-export interface CalendarStyle extends BaseStyle {}
+export interface CalendarStyle extends DatePickerStyle {}
diff --git a/components/lib/calendar/style/CalendarStyle.js b/components/lib/calendar/style/CalendarStyle.js
index dbe609c7f..53befcc30 100644
--- a/components/lib/calendar/style/CalendarStyle.js
+++ b/components/lib/calendar/style/CalendarStyle.js
@@ -1,68 +1,5 @@
 import BaseStyle from 'primevue/base/style';
 
-const inlineStyles = {
-    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
-};
-
-const classes = {
-    root: ({ props, state }) => [
-        'p-datepicker p-component p-inputwrapper',
-        {
-            'p-invalid': props.invalid,
-            'p-inputwrapper-filled': props.modelValue,
-            'p-inputwrapper-focus': state.focused,
-            'p-focus': state.focused || state.overlayVisible
-        }
-    ],
-    input: 'p-datepicker-input',
-    dropdownButton: 'p-datepicker-dropdown',
-    inputIconContainer: 'p-datepicker-input-icon-container',
-    inputIcon: 'p-datepicker-input-icon',
-    panel: ({ instance, props }) => [
-        'p-datepicker-panel p-component',
-        {
-            'p-datepicker-panel-inline': props.inline,
-            'p-disabled': props.disabled,
-            'p-datepicker-timeonly': props.timeOnly,
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    group: 'p-datepicker-calendar-container',
-    calendar: 'p-datepicker-calendar',
-    header: 'p-datepicker-header',
-    previousButton: 'p-datepicker-prev-button',
-    title: 'p-datepicker-title',
-    monthTitle: 'p-datepicker-view-month p-link',
-    yearTitle: 'p-datepicker-view-year p-link',
-    decadeTitle: 'p-datepicker-decade',
-    nextButton: 'p-datepicker-next-button',
-    grid: 'p-datepicker-day-view',
-    weekHeader: 'p-datepicker-weekheader p-disabled',
-    weekNumber: 'p-datepicker-weeknumber',
-    weekLabelContainer: 'p-disabled',
-    weekDay: 'p-datepicker-weekday-cell',
-    weekDayLabel: 'p-date-picker-weekday',
-    day: ({ date }) => ['p-datepicker-day-cell', { 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
-    dayLabel: ({ instance, props, date }) => ['p-datepicker-day', { 'p-datepicker-day-selected': instance.isSelected(date) && date.selectable, 'p-disabled': props.disabled || !date.selectable }],
-    monthPicker: 'p-datepicker-month-view',
-    month: ({ instance, props, month, index }) => ['p-datepicker-month', { 'p-datepicker-month-selected': instance.isMonthSelected(index), 'p-disabled': props.disabled || !month.selectable }],
-    yearPicker: 'p-datepicker-year-view',
-    year: ({ instance, props, year }) => ['p-datepicker-year', { 'p-datepicker-year-selected': instance.isYearSelected(year.value), 'p-disabled': props.disabled || !year.selectable }],
-    timePicker: 'p-datepicker-time-picker',
-    hourPicker: 'p-datepicker-hour-picker',
-    incrementButton: 'p-datepicker-increment-button',
-    decrementButton: 'p-datepicker-decrement-button',
-    separatorContainer: 'p-datepicker-separator',
-    minutePicker: 'p-minute-picker',
-    secondPicker: 'p-second-picker',
-    ampmPicker: 'p-ampm-picker',
-    buttonbar: 'p-datepicker-buttonbar',
-    todayButton: 'p-datepicker-today-button',
-    clearButton: 'p-datepicker-clear-button'
-};
-
 export default BaseStyle.extend({
-    name: 'calendar',
-    classes,
-    inlineStyles
+    name: 'calendar'
 });
diff --git a/components/lib/calendar/BaseCalendar.vue b/components/lib/datepicker/BaseDatePicker.vue
similarity index 98%
rename from components/lib/calendar/BaseCalendar.vue
rename to components/lib/datepicker/BaseDatePicker.vue
index 51bcacc6b..2044e7078 100644
--- a/components/lib/calendar/BaseCalendar.vue
+++ b/components/lib/datepicker/BaseDatePicker.vue
@@ -1,9 +1,9 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import CalendarStyle from 'primevue/calendar/style';
+import DatePickerStyle from 'primevue/datepicker/style';
 
 export default {
-    name: 'BaseCalendar',
+    name: 'BaseDatePicker',
     extends: BaseComponent,
     props: {
         modelValue: null,
@@ -249,7 +249,7 @@ export default {
             default: null
         }
     },
-    style: CalendarStyle,
+    style: DatePickerStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/datepicker/DatePicker.d.ts b/components/lib/datepicker/DatePicker.d.ts
new file mode 100755
index 000000000..49ea6d140
--- /dev/null
+++ b/components/lib/datepicker/DatePicker.d.ts
@@ -0,0 +1,1044 @@
+/**
+ *
+ * DatePicker is a form component to work with dates.
+ *
+ * [Live Demo](https://www.primevue.org/datepicker/)
+ *
+ * @module datepicker
+ *
+ */
+import { TransitionProps, VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { ButtonPassThroughOptions, ButtonProps } from '../button';
+import { InputTextPassThroughOptions } from '../inputtext';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, DesignToken, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
+
+export declare type DatePickerPassThroughOptionType = DatePickerPassThroughAttributes | ((options: DatePickerPassThroughMethodOptions) => DatePickerPassThroughAttributes | string) | string | null | undefined;
+
+export declare type DatePickerPassThroughTransitionType = TransitionProps | ((options: DatePickerPassThroughMethodOptions) => TransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DatePickerPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: DatePickerProps;
+    /**
+     * Defines current inline state.
+     */
+    state: DatePickerState;
+    /**
+     * Defines current options.
+     */
+    context: DatePickerContext;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface DatePickerSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: DatePickerProps;
+    /**
+     * Defines current inline state.
+     */
+    state: DatePickerState;
+}
+
+/**
+ * Custom DatePicker responsive options metadata.
+ */
+export interface DatePickerResponsiveOptions {
+    /**
+     * Breakpoint for responsive mode. Exp; \@media screen and (max-width: ${breakpoint}) {...}
+     */
+    breakpoint: string;
+    /**
+     * The number of visible months on breakpoint.
+     */
+    numMonths: number;
+}
+
+/**
+ * Custom DatePicker month change event.
+ * @see {@link DatePickerEmits['month-change']]}
+ */
+export interface DatePickerMonthChangeEvent {
+    /**
+     * New month.
+     */
+    month: number;
+    /**
+     * New year.
+     */
+    year: number;
+}
+
+/**
+ * Custom DatePicker year change event.
+ * @see {@link DatePickerEmits['year-change']]}
+ */
+export interface DatePickerYearChangeEvent {
+    /**
+     * New month.
+     */
+    month: number;
+    /**
+     * New year.
+     */
+    year: number;
+}
+
+/**
+ * Custom DatePicker blur event.
+ * @see {@link DatePickerEmits.blur}
+ */
+export interface DatePickerBlurEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Input value
+     */
+    value: string;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DatePickerProps.pt}
+ */
+export interface DatePickerPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the InputText component.
+     * @see {@link InputTextPassThroughOptions}
+     */
+    input?: InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
+    /**
+     * Used to pass attributes to the dropdown button's DOM element.
+     */
+    dropdownButton?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the panel's DOM element.
+     */
+    panel?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the group container's DOM element.
+     */
+    groupContainer?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the group's DOM element.
+     */
+    group?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the header's DOM element.
+     */
+    header?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the previous button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    previousButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
+    /**
+     * Used to pass attributes to the title's DOM element.
+     */
+    title?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the month title's DOM element.
+     */
+    monthTitle?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the year title's DOM element.
+     */
+    yearTitle?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the decade title's DOM element.
+     */
+    decadeTitle?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the next button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    nextButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
+    /**
+     * Used to pass attributes to the container's DOM element.
+     */
+    container?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the table's DOM element.
+     */
+    table?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the table header's DOM element.
+     */
+    tableHeader?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the table header row's DOM element.
+     */
+    tableHeaderRow?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the week header's DOM element.
+     */
+    weekHeader?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the week header label's DOM element.
+     */
+    weekHeaderLabel?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the table header cell's DOM element.
+     */
+    tableHeaderCell?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the week label's DOM element.
+     */
+    weekLabel?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the week day's DOM element.
+     */
+    weekDay?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the table body's DOM element.
+     */
+    tableBody?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the table body row's DOM element.
+     */
+    tableBodyRow?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the week number's DOM element.
+     */
+    weekNumber?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the week label container's DOM element.
+     */
+    weekLabelContainer?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the day's DOM element.
+     */
+    day?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the day label's DOM element.
+     */
+    dayLabel?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the month picker's DOM element.
+     */
+    monthPicker?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the month's DOM element.
+     */
+    month?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the year picker's DOM element.
+     */
+    yearPicker?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the year's DOM element.
+     */
+    year?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the time picker's DOM element.
+     */
+    timePicker?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the hour picker's DOM element.
+     */
+    hourPicker?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the hour's DOM element.
+     */
+    hour?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the separator container's DOM element.
+     */
+    separatorContainer?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the separator's DOM element.
+     */
+    separator?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the minute picker's DOM element.
+     */
+    minutePicker?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the minute's DOM element.
+     */
+    minute?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the second picker's DOM element.
+     */
+    secondPicker?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the second's DOM element.
+     */
+    second?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the ampm picker's DOM element.
+     */
+    ampmPicker?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the ampm's DOM element.
+     */
+    ampm?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the buttonbar's DOM element.
+     */
+    buttonbar?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the today button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    todayButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
+    /**
+     * Used to pass attributes to the clear button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    clearButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
+    /**
+     * Used to pass attributes to the aria selected day's DOM element.
+     */
+    hiddenSelectedDay?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the aria month's DOM element.
+     */
+    hiddenMonth?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the aria year's DOM element.
+     */
+    hiddenYear?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the datepicker mask's DOM element.
+     */
+    datepickerMask?: DatePickerPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control Vue Transition API.
+     */
+    transition?: DatePickerPassThroughTransitionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface DatePickerPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in DatePicker component.
+ */
+export interface DatePickerState {
+    /**
+     * Current month as a number.
+     */
+    currentMonth: number;
+    /**
+     * Current year as a number.
+     */
+    currentYear: number;
+    /**
+     * Current hour as a number.
+     */
+    currentHour: number;
+    /**
+     * Current minute as a number.
+     */
+    currentMinute: number;
+    /**
+     * Current second as a number.
+     */
+    currentSecond: number;
+    /**
+     * Current pm state as a boolean.
+     * @defaultValue false
+     */
+    pm: boolean;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current view state as a string.
+     * @defaultValue 'date'
+     */
+    currentView: string;
+}
+
+/**
+ * Defines current date options in DatePicker component.
+ */
+export interface DatePickerDateContext {
+    /**
+     * Current date.
+     */
+    day: number;
+    /**
+     * Current month state.
+     */
+    month: number;
+    /**
+     * Current year state.
+     */
+    year: number;
+    /**
+     * Current today state of the calendar's day.
+     */
+    today: boolean;
+    /**
+     * Selectable state of the day.
+     */
+    selectable: boolean;
+}
+
+/**
+ * Defines current options in DatePicker component.
+ */
+export interface DatePickerContext {
+    /**
+     * Current date.
+     */
+    date: DatePickerDateContext;
+    /**
+     * Current today state of the calendar's day.
+     * @defaultValue false
+     */
+    today: boolean;
+    /**
+     * Current other month state of the calendar's day.
+     */
+    otherMonth: boolean;
+    /**
+     * Current selected state of the calendar's day or month or year.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current disabled state of the calendar's day or month or year.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Current month state.
+     */
+    month: DatePickerMonthOptions;
+    /**
+     * Current month index state.
+     */
+    monthIndex: number;
+    /**
+     * Current year state.
+     */
+    year: DatePickerYearOptions;
+}
+
+/**
+ * Defines current month options.
+ */
+export interface DatePickerMonthOptions {
+    /**
+     * Month value.
+     */
+    value: string;
+    /**
+     * Selectable state of the month.
+     */
+    selectable: boolean;
+}
+
+/**
+ * Defines current year options.
+ */
+export interface DatePickerYearOptions {
+    /**
+     * Year value.
+     */
+    value: number;
+    /**
+     * Selectable state of the month.
+     */
+    selectable: boolean;
+}
+
+/**
+ * Defines valid properties in DatePicker component.
+ */
+export interface DatePickerProps {
+    /**
+     * Value of the component.
+     * @defaultValue null
+     */
+    modelValue?: Date | Array<Date> | Array<Date | null> | undefined | null;
+    /**
+     * Defines the quantity of the selection.
+     * @defaultValue single
+     */
+    selectionMode?: 'single' | 'multiple' | 'range' | undefined;
+    /**
+     * Format of the date. Defaults to PrimeVue Locale configuration.
+     */
+    dateFormat?: string | undefined;
+    /**
+     * When enabled, displays the datepicker as inline instead of an overlay.
+     * @defaultValue false
+     */
+    inline?: boolean | undefined;
+    /**
+     * Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.
+     * @defaultValue true
+     */
+    showOtherMonths?: boolean | undefined;
+    /**
+     * Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
+     * @defaultValue false
+     */
+    selectOtherMonths?: boolean | undefined;
+    /**
+     * When enabled, displays a button with icon next to input.
+     * @defaultValue false
+     */
+    showIcon?: boolean | undefined;
+    /**
+     * Icon position of the component. This only applies if the showIcon option is set to true.
+     * @defaultValue 'button'
+     */
+    iconDisplay?: 'button' | 'input' | undefined;
+    /**
+     * Icon of the datepicker button.
+     * @deprecated since v3.27.0. Use 'dropdownicon' slot.
+     */
+    icon?: string | undefined;
+    /**
+     * Icon to show in the previous button.
+     * @deprecated since v3.27.0. Use 'previousicon' slot.
+     */
+    previousIcon?: string | undefined;
+    /**
+     * Icon to show in the next button.
+     * @deprecated since v3.27.0. Use 'nexticon' slot.
+     */
+    nextIcon?: string | undefined;
+    /**
+     * Icon to show in each of the increment buttons.
+     * @deprecated since v3.27.0. Use 'incrementicon' slot.
+     */
+    incrementIcon?: string | undefined;
+    /**
+     * Icon to show in each of the decrement buttons.
+     * @deprecated since v3.27.0. Use 'decrementicon' slot.
+     */
+    decrementIcon?: string | undefined;
+    /**
+     * Number of months to display.
+     * @defaultValue 1
+     */
+    numberOfMonths?: number | undefined;
+    /**
+     * An array of options for responsive design.
+     */
+    responsiveOptions?: DatePickerResponsiveOptions[];
+    /**
+     * The breakpoint to define the maximum width boundary for datepicker panel.
+     * @defaultValue 769px
+     */
+    breakpoint?: string | undefined;
+    /**
+     * Type of view to display.
+     * @defaultValue date
+     */
+    view?: 'date' | 'month' | 'year' | undefined;
+    /**
+     * Whether the month should be rendered as a dropdown instead of text.
+     *
+     * @deprecated since version 3.9.0, Navigator is always on.
+     * @defaultValue false
+     */
+    monthNavigator?: boolean | undefined;
+    /**
+     * Whether the year should be rendered as a dropdown instead of text.
+     *
+     * @deprecated since version 3.9.0, Navigator is always on.
+     * @defaultValue false
+     */
+    yearNavigator?: boolean | undefined;
+    /**
+     * The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).
+     *
+     * @deprecated since version 3.9.0, Years are based on decades by default.
+     * @defaultValue false
+     */
+    yearRange?: string | undefined;
+    /**
+     * The minimum selectable date.
+     */
+    minDate?: Date | undefined;
+    /**
+     * The maximum selectable date.
+     */
+    maxDate?: Date | undefined;
+    /**
+     * Array with dates to disable.
+     */
+    disabledDates?: Date[] | undefined;
+    /**
+     * Array with disabled weekday numbers.
+     */
+    disabledDays?: number[] | undefined;
+    /**
+     * Maximum number of selectable dates in multiple mode.
+     */
+    maxDateCount?: number | undefined;
+    /**
+     * When disabled, datepicker will not be visible with input focus.
+     * @defaultValue true
+     */
+    showOnFocus?: boolean | undefined;
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue true
+     */
+    autoZIndex?: boolean | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * Whether to display today and clear buttons at the footer.
+     * @defaultValue false
+     */
+    showButtonBar?: boolean | undefined;
+    /**
+     * The cutoff year for determining the century for a date.
+     * @defaultValue +10
+     */
+    shortYearCutoff?: string | undefined;
+    /**
+     * Whether to display timepicker.
+     * @defaultValue false
+     */
+    showTime?: boolean | undefined;
+    /**
+     * Whether to display timepicker only.
+     * @defaultValue false
+     */
+    timeOnly?: boolean | undefined;
+    /**
+     * Specifies hour format.
+     * @defaultValue 24
+     */
+    hourFormat?: '12' | '24' | undefined;
+    /**
+     * Hours to change per step.
+     * @defaultValue 1
+     */
+    stepHour?: number | undefined;
+    /**
+     * Minutes to change per step.
+     * @defaultValue 1
+     */
+    stepMinute?: number | undefined;
+    /**
+     * Seconds to change per step.
+     * @defaultValue 1
+     */
+    stepSecond?: number | undefined;
+    /**
+     * Whether to show the seconds in time picker.
+     * @defaultValue false
+     */
+    showSeconds?: boolean | undefined;
+    /**
+     * Whether to hide the overlay on date selection when showTime is enabled.
+     * @defaultValue false
+     */
+    hideOnDateTimeSelect?: boolean | undefined;
+    /**
+     * Whether to hide the overlay on date selection is completed when selectionMode is range.
+     * @defaultValue false
+     */
+    hideOnRangeSelection?: boolean | undefined;
+    /**
+     * Separator of time selector.
+     * @defaultValue :
+     */
+    timeSeparator?: string | undefined;
+    /**
+     * When enabled, datepicker will show week numbers.
+     * @defaultValue false
+     */
+    showWeek?: boolean | undefined;
+    /**
+     * Whether to allow entering the date manually via typing.
+     * @defaultValue true
+     */
+    manualInput?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @defaultValue false
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Placeholder text for the input.
+     */
+    placeholder?: string | undefined;
+    /**
+     * A valid query selector or an HTMLElement to specify where the overlay gets attached.
+     * @defaultValue body
+     */
+    appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
+    /**
+     * Identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: object | undefined;
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: string | object | undefined;
+    /**
+     * Inline style of the overlay panel.
+     */
+    panelStyle?: object | undefined;
+    /**
+     * Style class of the overlay panel.
+     */
+    panelClass?: string | object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the today button component.
+     * @type {ButtonProps}
+     * @defaultValue { severity: 'secondary', text: true, size: 'small' }
+     */
+    todayButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the clear button component.
+     * @type {ButtonProps}
+     * @defaultValue { severity: 'secondary', text: true, size: 'small' }
+     */
+    clearButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the navigator button component.
+     * @type {ButtonProps}
+     * @defaultValue { severity: 'secondary', text: true }
+     */
+    navigatorButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the timepicker button component.
+     * @type {ButtonProps}
+     * @defaultValue { severity: 'secondary', text: true }
+     */
+    timepickerButtonProps?: object | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledby?: string | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {DatePickerPassThroughOptions}
+     */
+    pt?: PassThrough<DatePickerPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid options of the date slot in DatePicker component.
+ */
+export interface DatePickerDateSlotOptions {
+    /**
+     * Current date.
+     */
+    day: number;
+    /**
+     * Current month state.
+     */
+    month: number;
+    /**
+     * Current year state.
+     */
+    year: number;
+    /**
+     * Current today state of the calendar's day.
+     */
+    today: boolean;
+    /**
+     * Selectable state of the day.
+     */
+    selectable: boolean;
+}
+
+/**
+ * Defines valid slots in DatePicker component.
+ */
+export interface DatePickerSlots {
+    /**
+     * Custom header template of panel.
+     */
+    header(): VNode[];
+    /**
+     * Custom footer template of panel.
+     */
+    footer(): VNode[];
+    /**
+     * Custom date template.
+     */
+    date(scope: {
+        /**
+         * Value of the component.
+         */
+        date: DatePickerDateSlotOptions;
+    }): VNode[];
+    /**
+     * Custom decade template.
+     */
+    decade(scope: {
+        /**
+         * An array containing the start and and year of a decade to display at header of the year picker.
+         */
+        years: string[] | undefined;
+    }): VNode[];
+    /**
+     * Custom week header label template.
+     */
+    weekheaderlabel(): VNode[];
+    /**
+     * Custom week label template.
+     * @param {Object} scope - weeklabel slot's params.
+     */
+    weeklabel(scope: {
+        /**
+         * Number of the week
+         */
+        weekNumber: number;
+    }): VNode[];
+    /**
+     * Custom dropdown icon template.
+     * @param {Object} scope - dropdown icon slot's params.
+     */
+    dropdownicon(scope: {
+        /**
+         * Style class of the dropdown icon
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom input icon template.
+     * @param {Object} scope - input icon slot's params.
+     */
+    inputicon(scope: {
+        /**
+         * Style class of the input icon
+         */
+        class: any;
+        /**
+         * Click callback
+         */
+        clickCallback: () => void;
+    }): VNode[];
+    /**
+     * Custom previous icon template.
+     * @param {Object} scope - previous icon slot's params.
+     */
+    previousicon(scope: {
+        /**
+         * Style class of the previous icon
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom next icon template.
+     * @param {Object} scope - next icon slot's params.
+     */
+    nexticon(scope: {
+        /**
+         * Style class of the next icon
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom increment icon template.
+     * @param {Object} scope - increment icon slot's params.
+     */
+    incrementicon(scope: {
+        /**
+         * Style class of the increment icon
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom decrement icon template.
+     * @param {Object} scope - decrement icon slot's params.
+     */
+    decrementicon(scope: {
+        /**
+         * Style class of the decrement icon
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom dropdown button template.
+     */
+    dropdownbutton(scope: {
+        /**
+         * Toggle function.
+         * @param {Event} event - Browser event
+         */
+        toggleCallback: (event: Event) => void;
+    }): VNode[];
+}
+
+/**
+ * Defines valid emits in DatePicker component.
+ */
+export interface DatePickerEmits {
+    /**
+     * Emitted when the value changes.
+     * @param {string | Date | string[] | Date[] | undefined} value - New value.
+     */
+    'update:modelValue'(value: Date | Array<Date> | Array<Date | null> | undefined | null): void;
+    /**
+     * Callback to invoke when input field is being typed.
+     * @param {Event} event - Browser event
+     */
+    input(event: Event): void;
+    /**
+     * Callback to invoke when a date is selected.
+     * @param {Date} value - Selected value.
+     */
+    'date-select'(value: Date): void;
+    /**
+     * Callback to invoke when datepicker panel is shown.
+     */
+    show(): void;
+    /**
+     * Callback to invoke when datepicker panel is hidden.
+     */
+    hide(): void;
+    /**
+     * Callback to invoke when today button is clicked.
+     * @param {Date} date - Today as a date instance.
+     */
+    'today-click'(date: Date): void;
+    /**
+     * Callback to invoke when clear button is clicked.
+     * @param {Event} event - Browser event.
+     */
+    'clear-click'(event: Event): void;
+    /**
+     * Callback to invoke when a month is changed using the navigators.
+     * @param {DatePickerMonthChangeEvent} event - Custom month change event.
+     */
+    'month-change'(event: DatePickerMonthChangeEvent): void;
+    /**
+     * Callback to invoke when a year is changed using the navigators.
+     * @param {DatePickerYearChangeEvent} event - Custom year change event.
+     */
+    'year-change'(event: DatePickerYearChangeEvent): void;
+    /**
+     * Callback to invoke on focus of input field.
+     * @param {Event} event - Focus event
+     */
+    focus(event: Event): void;
+    /**
+     * Callback to invoke on blur of input field.
+     * @param {DatePickerBlurEvent} event - Blur event
+     */
+    blur(event: DatePickerBlurEvent): void;
+    /**
+     * Callback to invoke when a key is pressed.
+     */
+    keydown(event: Event): void;
+}
+
+/**
+ * **PrimeVue - DatePicker**
+ *
+ * _DatePicker  is a form component to work with dates._
+ *
+ * [Live Demo](https://www.primevue.org/calendar/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
+declare class DatePicker extends ClassComponent<DatePickerProps, DatePickerSlots, DatePickerEmits> {}
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        DatePicker: GlobalComponentConstructor<DatePicker>;
+    }
+}
+
+export default DatePicker;
diff --git a/components/lib/calendar/Calendar.spec.js b/components/lib/datepicker/DatePicker.spec.js
similarity index 89%
rename from components/lib/calendar/Calendar.spec.js
rename to components/lib/datepicker/DatePicker.spec.js
index 0e6512497..2ecd2988f 100644
--- a/components/lib/calendar/Calendar.spec.js
+++ b/components/lib/datepicker/DatePicker.spec.js
@@ -1,12 +1,12 @@
 import { mount } from '@vue/test-utils';
 import PrimeVue from 'primevue/config';
-import Calendar from './Calendar.vue';
+import DatePicker from './DatePicker.vue';
 
-describe('Calendar.vue', () => {
+describe('DatePicker.vue', () => {
     let wrapper;
 
     beforeEach(() => {
-        wrapper = mount(Calendar, {
+        wrapper = mount(DatePicker, {
             global: {
                 plugins: [PrimeVue],
                 stubs: {
@@ -20,7 +20,7 @@ describe('Calendar.vue', () => {
     });
 
     it('should exist', async () => {
-        expect(wrapper.find('.p-calendar.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-datepicker.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-inputtext').exists()).toBe(true);
 
         let input = wrapper.find('.p-inputtext');
diff --git a/components/lib/datepicker/DatePicker.vue b/components/lib/datepicker/DatePicker.vue
new file mode 100755
index 000000000..21919e52d
--- /dev/null
+++ b/components/lib/datepicker/DatePicker.vue
@@ -0,0 +1,2980 @@
+<template>
+    <span ref="container" :id="d_id" :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
+        <InputText
+            v-if="!inline"
+            :ref="inputRef"
+            :id="inputId"
+            role="combobox"
+            :class="[inputClass, cx('input')]"
+            :style="inputStyle"
+            :value="inputFieldValue"
+            :placeholder="placeholder"
+            :invalid="invalid"
+            :variant="variant"
+            :unstyled="unstyled"
+            autocomplete="off"
+            aria-autocomplete="none"
+            aria-haspopup="dialog"
+            :aria-expanded="overlayVisible"
+            :aria-controls="panelId"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            inputmode="none"
+            :disabled="disabled"
+            :readonly="!manualInput || readonly"
+            :tabindex="0"
+            @input="onInput"
+            @click="onInputClick"
+            @focus="onFocus"
+            @blur="onBlur"
+            @keydown="onKeyDown"
+            :pt="ptm('input')"
+        />
+        <slot v-if="showIcon && iconDisplay === 'button'" name="dropdownbutton">
+            <button
+                :class="cx('dropdownButton')"
+                :disabled="disabled"
+                @click="onButtonClick"
+                type="button"
+                :aria-label="$primevue.config.locale.chooseDate"
+                aria-haspopup="dialog"
+                :aria-expanded="overlayVisible"
+                :aria-controls="panelId"
+                v-bind="ptm('dropdownButton')"
+            >
+                <slot name="dropdownicon" :class="icon">
+                    <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButtonIcon')" />
+                </slot>
+            </button>
+        </slot>
+        <template v-else-if="showIcon && iconDisplay === 'input'">
+            <span :class="cx('inputIconContainer')">
+                <slot name="inputicon" :class="cx('inputIcon')" :clickCallback="onButtonClick">
+                    <component :is="icon ? 'i' : 'CalendarIcon'" :class="[icon, cx('inputIcon')]" @click="onButtonClick" v-bind="ptm('inputicon')" />
+                </slot>
+            </span>
+        </template>
+        <Portal :appendTo="appendTo" :disabled="inline">
+            <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave" v-bind="ptm('transition')">
+                <div
+                    v-if="inline || overlayVisible"
+                    :ref="overlayRef"
+                    :id="panelId"
+                    :class="[cx('panel'), panelClass]"
+                    :style="panelStyle"
+                    :role="inline ? null : 'dialog'"
+                    :aria-modal="inline ? null : 'true'"
+                    :aria-label="$primevue.config.locale.chooseDate"
+                    @click="onOverlayClick"
+                    @keydown="onOverlayKeyDown"
+                    @mouseup="onOverlayMouseUp"
+                    v-bind="ptm('panel')"
+                >
+                    <template v-if="!timeOnly">
+                        <div :class="cx('group')" v-bind="ptm('group')">
+                            <div v-for="(month, groupIndex) of months" :key="month.month + month.year" :class="cx('calendar')" v-bind="ptm('calendar')">
+                                <div :class="cx('header')" v-bind="ptm('header')">
+                                    <slot name="header"></slot>
+                                    <Button
+                                        v-show="showOtherMonths ? groupIndex === 0 : false"
+                                        :ref="previousButtonRef"
+                                        :class="cx('previousButton')"
+                                        :disabled="disabled"
+                                        :aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
+                                        :unstyled="unstyled"
+                                        @click="onPrevButtonClick"
+                                        @keydown="onContainerButtonKeydown"
+                                        v-bind="navigatorButtonProps"
+                                        :pt="ptm('previousButton')"
+                                        data-pc-group-section="navigator"
+                                    >
+                                        <template #icon="slotProps">
+                                            <slot name="previousicon">
+                                                <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[previousIcon, slotProps.class]" v-bind="ptm('previousButton')['icon']" />
+                                            </slot>
+                                        </template>
+                                    </Button>
+                                    <div :class="cx('title')" v-bind="ptm('title')">
+                                        <template v-if="$primevue.config.locale.showMonthAfterYear">
+                                            <button
+                                                v-if="currentView !== 'year'"
+                                                type="button"
+                                                @click="switchToYearView"
+                                                @keydown="onContainerButtonKeydown"
+                                                :class="cx('yearTitle')"
+                                                :disabled="switchViewButtonDisabled"
+                                                :aria-label="$primevue.config.locale.chooseYear"
+                                                v-bind="ptm('yearTitle')"
+                                                data-pc-group-section="view"
+                                            >
+                                                {{ getYear(month) }}
+                                            </button>
+                                            <button
+                                                v-if="currentView === 'date'"
+                                                type="button"
+                                                @click="switchToMonthView"
+                                                @keydown="onContainerButtonKeydown"
+                                                :class="cx('monthTitle')"
+                                                :disabled="switchViewButtonDisabled"
+                                                :aria-label="$primevue.config.locale.chooseMonth"
+                                                v-bind="ptm('monthTitle')"
+                                                data-pc-group-section="view"
+                                            >
+                                                {{ getMonthName(month.month) }}
+                                            </button>
+                                        </template>
+                                        <template v-else>
+                                            <button
+                                                v-if="currentView === 'date'"
+                                                type="button"
+                                                @click="switchToMonthView"
+                                                @keydown="onContainerButtonKeydown"
+                                                :class="cx('monthTitle')"
+                                                :disabled="switchViewButtonDisabled"
+                                                :aria-label="$primevue.config.locale.chooseMonth"
+                                                v-bind="ptm('monthTitle')"
+                                                data-pc-group-section="view"
+                                            >
+                                                {{ getMonthName(month.month) }}
+                                            </button>
+                                            <button
+                                                v-if="currentView !== 'year'"
+                                                type="button"
+                                                @click="switchToYearView"
+                                                @keydown="onContainerButtonKeydown"
+                                                :class="cx('yearTitle')"
+                                                :disabled="switchViewButtonDisabled"
+                                                :aria-label="$primevue.config.locale.chooseYear"
+                                                v-bind="ptm('yearTitle')"
+                                                data-pc-group-section="view"
+                                            >
+                                                {{ getYear(month) }}
+                                            </button>
+                                        </template>
+                                        <span v-if="currentView === 'year'" :class="cx('decadeTitle')" v-bind="ptm('decadeTitle')">
+                                            <slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot>
+                                        </span>
+                                    </div>
+                                    <Button
+                                        v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false"
+                                        :ref="nextButtonRef"
+                                        :class="cx('nextButton')"
+                                        :disabled="disabled"
+                                        :aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
+                                        :unstyled="unstyled"
+                                        @click="onNextButtonClick"
+                                        @keydown="onContainerButtonKeydown"
+                                        v-bind="navigatorButtonProps"
+                                        :pt="ptm('nextButton')"
+                                        data-pc-group-section="navigator"
+                                    >
+                                        <template #icon="slotProps">
+                                            <slot name="nexticon">
+                                                <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[nextIcon, slotProps.class]" v-bind="ptm('nextButton')['icon']" />
+                                            </slot>
+                                        </template>
+                                    </Button>
+                                </div>
+                                <table v-if="currentView === 'date'" :class="cx('grid')" role="grid" v-bind="ptm('grid')">
+                                    <thead v-bind="ptm('tableHeader')">
+                                        <tr v-bind="ptm('tableHeaderRow')">
+                                            <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">
+                                                <slot name="weekheaderlabel">
+                                                    <span v-bind="ptm('weekHeaderLabel', { context: { disabled: showWeek } })" data-pc-group-section="tableheadercelllabel">
+                                                        {{ weekHeaderLabel }}
+                                                    </span>
+                                                </slot>
+                                            </th>
+                                            <th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')" data-pc-group-section="tableheadercell" :class="cx('weekDay')">
+                                                <span v-bind="ptm('weekDay')" data-pc-group-section="tableheadercelllabel" :class="cx('weekDay')">{{ weekDay }}</span>
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody v-bind="ptm('tableBody')">
+                                        <tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')">
+                                            <td v-if="showWeek" :class="cx('weekNumber')" v-bind="ptm('weekNumber')" data-pc-group-section="tablebodycell">
+                                                <span :class="cx('weekLabelContainer')" v-bind="ptm('weekLabelContainer', { context: { disabled: showWeek } })" :data-p-disabled="showWeek" data-pc-group-section="tablebodycelllabel">
+                                                    <slot name="weeklabel" :weekNumber="month.weekNumbers[i]">
+                                                        <span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
+                                                        {{ month.weekNumbers[i] }}
+                                                    </slot>
+                                                </span>
+                                            </td>
+                                            <td
+                                                v-for="date of week"
+                                                :key="date.day + '' + date.month"
+                                                :aria-label="date.day"
+                                                :class="cx('day', { date })"
+                                                v-bind="
+                                                    ptm('day', {
+                                                        context: {
+                                                            date,
+                                                            today: date.today,
+                                                            otherMonth: date.otherMonth,
+                                                            selected: isSelected(date),
+                                                            disabled: !date.selectable
+                                                        }
+                                                    })
+                                                "
+                                                :data-p-today="date.today"
+                                                :data-p-other-month="date.otherMonth"
+                                                data-pc-group-section="tablebodycell"
+                                            >
+                                                <span
+                                                    v-ripple
+                                                    :class="cx('dayLabel', { date })"
+                                                    @click="onDateSelect($event, date)"
+                                                    draggable="false"
+                                                    @keydown="onDateCellKeydown($event, date, groupIndex)"
+                                                    :aria-selected="isSelected(date)"
+                                                    :aria-disabled="!date.selectable"
+                                                    v-bind="
+                                                        ptm('dayLabel', {
+                                                            context: {
+                                                                date,
+                                                                today: date.today,
+                                                                otherMonth: date.otherMonth,
+                                                                selected: isSelected(date),
+                                                                disabled: !date.selectable
+                                                            }
+                                                        })
+                                                    "
+                                                    :data-p-disabled="!date.selectable"
+                                                    :data-p-highlight="isSelected(date)"
+                                                    data-pc-group-section="tablebodycelllabel"
+                                                >
+                                                    <slot name="date" :date="date">{{ date.day }}</slot>
+                                                </span>
+                                                <div v-if="isSelected(date)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenSelectedDay')" :data-p-hidden-accessible="true">
+                                                    {{ date.day }}
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                        <div v-if="currentView === 'month'" :class="cx('monthPicker')" v-bind="ptm('monthPicker')">
+                            <span
+                                v-for="(m, i) of monthPickerValues"
+                                :key="m"
+                                v-ripple
+                                @click="onMonthSelect($event, { month: m, index: i })"
+                                @keydown="onMonthCellKeydown($event, { month: m, index: i })"
+                                :class="cx('month', { month: m, index: i })"
+                                v-bind="
+                                    ptm('month', {
+                                        context: {
+                                            month: m,
+                                            monthIndex: i,
+                                            selected: isMonthSelected(i),
+                                            disabled: !m.selectable
+                                        }
+                                    })
+                                "
+                                :data-p-disabled="!m.selectable"
+                                :data-p-highlight="isMonthSelected(i)"
+                            >
+                                {{ m.value }}
+                                <div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenMonth')" :data-p-hidden-accessible="true">
+                                    {{ m.value }}
+                                </div>
+                            </span>
+                        </div>
+                        <div v-if="currentView === 'year'" :class="cx('yearPicker')" v-bind="ptm('yearPicker')">
+                            <span
+                                v-for="y of yearPickerValues"
+                                :key="y.value"
+                                v-ripple
+                                @click="onYearSelect($event, y)"
+                                @keydown="onYearCellKeydown($event, y)"
+                                :class="cx('year', { year: y })"
+                                v-bind="
+                                    ptm('year', {
+                                        context: {
+                                            year: y,
+                                            selected: isYearSelected(y.value),
+                                            disabled: !y.selectable
+                                        }
+                                    })
+                                "
+                                :data-p-disabled="!y.selectable"
+                                :data-p-highlight="isYearSelected(y.value)"
+                            >
+                                {{ y.value }}
+                                <div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenYear')" :data-p-hidden-accessible="true">
+                                    {{ y.value }}
+                                </div>
+                            </span>
+                        </div>
+                    </template>
+                    <div v-if="(showTime || timeOnly) && currentView === 'date'" :class="cx('timePicker')" v-bind="ptm('timePicker')">
+                        <div :class="cx('hourPicker')" v-bind="ptm('hourPicker')" data-pc-group-section="timepickerContainer">
+                            <Button
+                                :class="cx('incrementButton')"
+                                :aria-label="$primevue.config.locale.nextHour"
+                                :unstyled="unstyled"
+                                @mousedown="onTimePickerElementMouseDown($event, 0, 1)"
+                                @mouseup="onTimePickerElementMouseUp($event)"
+                                @keydown="onContainerButtonKeydown"
+                                @mouseleave="onTimePickerElementMouseLeave()"
+                                @keydown.enter="onTimePickerElementMouseDown($event, 0, 1)"
+                                @keydown.space="onTimePickerElementMouseDown($event, 0, 1)"
+                                @keyup.enter="onTimePickerElementMouseUp($event)"
+                                @keyup.space="onTimePickerElementMouseUp($event)"
+                                v-bind="timepickerButtonProps"
+                                :pt="ptm('incrementButton')"
+                                data-pc-group-section="timepickerbutton"
+                            >
+                                <template #icon="slotProps">
+                                    <slot name="incrementicon">
+                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                    </slot>
+                                </template>
+                            </Button>
+                            <span v-bind="ptm('hour')" data-pc-group-section="timepickerlabel">{{ formattedCurrentHour }}</span>
+                            <Button
+                                :class="cx('decrementButton')"
+                                :aria-label="$primevue.config.locale.prevHour"
+                                :unstyled="unstyled"
+                                @mousedown="onTimePickerElementMouseDown($event, 0, -1)"
+                                @mouseup="onTimePickerElementMouseUp($event)"
+                                @keydown="onContainerButtonKeydown"
+                                @mouseleave="onTimePickerElementMouseLeave()"
+                                @keydown.enter="onTimePickerElementMouseDown($event, 0, -1)"
+                                @keydown.space="onTimePickerElementMouseDown($event, 0, -1)"
+                                @keyup.enter="onTimePickerElementMouseUp($event)"
+                                @keyup.space="onTimePickerElementMouseUp($event)"
+                                v-bind="timepickerButtonProps"
+                                :pt="ptm('decrementButton')"
+                                data-pc-group-section="timepickerbutton"
+                            >
+                                <template #icon="slotProps">
+                                    <slot name="decrementicon">
+                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                    </slot>
+                                </template>
+                            </Button>
+                        </div>
+                        <div :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
+                            <span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
+                        </div>
+                        <div :class="cx('minutePicker')" v-bind="ptm('minutePicker')" data-pc-group-section="timepickerContainer">
+                            <Button
+                                :class="cx('incrementButton')"
+                                :aria-label="$primevue.config.locale.nextMinute"
+                                :disabled="disabled"
+                                :unstyled="unstyled"
+                                @mousedown="onTimePickerElementMouseDown($event, 1, 1)"
+                                @mouseup="onTimePickerElementMouseUp($event)"
+                                @keydown="onContainerButtonKeydown"
+                                @mouseleave="onTimePickerElementMouseLeave()"
+                                @keydown.enter="onTimePickerElementMouseDown($event, 1, 1)"
+                                @keydown.space="onTimePickerElementMouseDown($event, 1, 1)"
+                                @keyup.enter="onTimePickerElementMouseUp($event)"
+                                @keyup.space="onTimePickerElementMouseUp($event)"
+                                v-bind="timepickerButtonProps"
+                                :pt="ptm('incrementButton')"
+                                data-pc-group-section="timepickerbutton"
+                            >
+                                <template #icon="slotProps">
+                                    <slot name="incrementicon">
+                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                    </slot>
+                                </template>
+                            </Button>
+                            <span v-bind="ptm('minute')" data-pc-group-section="timepickerlabel">{{ formattedCurrentMinute }}</span>
+                            <Button
+                                :class="cx('decrementButton')"
+                                :aria-label="$primevue.config.locale.prevMinute"
+                                :disabled="disabled"
+                                @mousedown="onTimePickerElementMouseDown($event, 1, -1)"
+                                @mouseup="onTimePickerElementMouseUp($event)"
+                                @keydown="onContainerButtonKeydown"
+                                @mouseleave="onTimePickerElementMouseLeave()"
+                                @keydown.enter="onTimePickerElementMouseDown($event, 1, -1)"
+                                @keydown.space="onTimePickerElementMouseDown($event, 1, -1)"
+                                @keyup.enter="onTimePickerElementMouseUp($event)"
+                                @keyup.space="onTimePickerElementMouseUp($event)"
+                                v-bind="timepickerButtonProps"
+                                :pt="ptm('decrementButton')"
+                                data-pc-group-section="timepickerbutton"
+                            >
+                                <template #icon="slotProps">
+                                    <slot name="decrementicon">
+                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                    </slot>
+                                </template>
+                            </Button>
+                        </div>
+                        <div v-if="showSeconds" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
+                            <span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
+                        </div>
+                        <div v-if="showSeconds" :class="cx('secondPicker')" v-bind="ptm('secondPicker')" data-pc-group-section="timepickerContainer">
+                            <Button
+                                :class="cx('incrementButton')"
+                                :aria-label="$primevue.config.locale.nextSecond"
+                                :disabled="disabled"
+                                :unstyled="unstyled"
+                                @mousedown="onTimePickerElementMouseDown($event, 2, 1)"
+                                @mouseup="onTimePickerElementMouseUp($event)"
+                                @keydown="onContainerButtonKeydown"
+                                @mouseleave="onTimePickerElementMouseLeave()"
+                                @keydown.enter="onTimePickerElementMouseDown($event, 2, 1)"
+                                @keydown.space="onTimePickerElementMouseDown($event, 2, 1)"
+                                @keyup.enter="onTimePickerElementMouseUp($event)"
+                                @keyup.space="onTimePickerElementMouseUp($event)"
+                                v-bind="timepickerButtonProps"
+                                :pt="ptm('incrementButton')"
+                                data-pc-group-section="timepickerbutton"
+                            >
+                                <template #icon="slotProps">
+                                    <slot name="incrementicon">
+                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                    </slot>
+                                </template>
+                            </Button>
+                            <span v-bind="ptm('second')" data-pc-group-section="timepickerlabel">{{ formattedCurrentSecond }}</span>
+                            <Button
+                                :class="cx('decrementButton')"
+                                :aria-label="$primevue.config.locale.prevSecond"
+                                :disabled="disabled"
+                                :unstyled="unstyled"
+                                @mousedown="onTimePickerElementMouseDown($event, 2, -1)"
+                                @mouseup="onTimePickerElementMouseUp($event)"
+                                @keydown="onContainerButtonKeydown"
+                                @mouseleave="onTimePickerElementMouseLeave()"
+                                @keydown.enter="onTimePickerElementMouseDown($event, 2, -1)"
+                                @keydown.space="onTimePickerElementMouseDown($event, 2, -1)"
+                                @keyup.enter="onTimePickerElementMouseUp($event)"
+                                @keyup.space="onTimePickerElementMouseUp($event)"
+                                v-bind="timepickerButtonProps"
+                                :pt="ptm('decrementButton')"
+                                data-pc-group-section="timepickerbutton"
+                            >
+                                <template #icon="slotProps">
+                                    <slot name="decrementicon">
+                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                    </slot>
+                                </template>
+                            </Button>
+                        </div>
+                        <div v-if="hourFormat == '12'" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
+                            <span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
+                        </div>
+                        <div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')">
+                            <Button
+                                :class="cx('incrementButton')"
+                                :aria-label="$primevue.config.locale.am"
+                                :disabled="disabled"
+                                :unstyled="unstyled"
+                                @click="toggleAMPM($event)"
+                                @keydown="onContainerButtonKeydown"
+                                v-bind="timepickerButtonProps"
+                                :pt="ptm('incrementButton')"
+                                data-pc-group-section="timepickerbutton"
+                            >
+                                <template #icon="slotProps">
+                                    <slot name="incrementicon" :class="cx('incrementIcon')">
+                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[cx('incrementIcon'), slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                    </slot>
+                                </template>
+                            </Button>
+                            <span v-bind="ptm('ampm')" data-pc-group-section="timepickerlabel">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
+                            <Button
+                                :class="cx('decrementButton')"
+                                :aria-label="$primevue.config.locale.pm"
+                                :disabled="disabled"
+                                @click="toggleAMPM($event)"
+                                @keydown="onContainerButtonKeydown"
+                                v-bind="timepickerButtonProps"
+                                :pt="ptm('decrementButton')"
+                                data-pc-group-section="timepickerbutton"
+                            >
+                                <template #icon="slotProps">
+                                    <slot name="decrementicon" :class="cx('decrementIcon')">
+                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('decrementIcon'), slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                    </slot>
+                                </template>
+                            </Button>
+                        </div>
+                    </div>
+                    <div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
+                        <Button
+                            :label="todayLabel"
+                            @click="onTodayButtonClick($event)"
+                            :class="cx('todayButton')"
+                            :unstyled="unstyled"
+                            @keydown="onContainerButtonKeydown"
+                            v-bind="todayButtonProps"
+                            :pt="ptm('todayButton')"
+                            data-pc-group-section="button"
+                        />
+                        <Button
+                            :label="clearLabel"
+                            @click="onClearButtonClick($event)"
+                            :class="cx('clearButton')"
+                            :unstyled="unstyled"
+                            @keydown="onContainerButtonKeydown"
+                            v-bind="clearButtonProps"
+                            :pt="ptm('clearButton')"
+                            data-pc-group-section="button"
+                        />
+                    </div>
+                    <slot name="footer"></slot>
+                </div>
+            </transition>
+        </Portal>
+    </span>
+</template>
+
+<script>
+import Button from 'primevue/button';
+import CalendarIcon from 'primevue/icons/calendar';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronLeftIcon from 'primevue/icons/chevronleft';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import ChevronUpIcon from 'primevue/icons/chevronup';
+import InputText from 'primevue/inputtext';
+import OverlayEventBus from 'primevue/overlayeventbus';
+import Portal from 'primevue/portal';
+import Ripple from 'primevue/ripple';
+import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import BaseDatePicker from './BaseDatePicker.vue';
+
+export default {
+    name: 'DatePicker',
+    extends: BaseDatePicker,
+    inheritAttrs: false,
+    emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],
+    navigationState: null,
+    timePickerChange: false,
+    scrollHandler: null,
+    outsideClickListener: null,
+    resizeListener: null,
+    matchMediaListener: null,
+    overlay: null,
+    input: null,
+    previousButton: null,
+    nextButton: null,
+    timePickerTimer: null,
+    preventFocus: false,
+    typeUpdate: false,
+    data() {
+        return {
+            d_id: this.id,
+            currentMonth: null,
+            currentYear: null,
+            currentHour: null,
+            currentMinute: null,
+            currentSecond: null,
+            pm: null,
+            focused: false,
+            overlayVisible: false,
+            currentView: this.view,
+            query: null,
+            queryMatches: false
+        };
+    },
+    watch: {
+        id: function (newValue) {
+            this.d_id = newValue || UniqueComponentId();
+        },
+        modelValue(newValue) {
+            this.updateCurrentMetaData();
+
+            if (!this.typeUpdate && !this.inline && this.input) {
+                this.input.value = this.inputFieldValue;
+            }
+
+            this.typeUpdate = false;
+        },
+        showTime() {
+            this.updateCurrentMetaData();
+        },
+        minDate() {
+            this.updateCurrentMetaData();
+        },
+        maxDate() {
+            this.updateCurrentMetaData();
+        },
+        months() {
+            if (this.overlay) {
+                if (!this.focused) {
+                    if (this.inline) {
+                        this.preventFocus = true;
+                    }
+
+                    setTimeout(this.updateFocus, 0);
+                }
+            }
+        },
+        numberOfMonths() {
+            this.destroyResponsiveStyleElement();
+            this.createResponsiveStyle();
+        },
+        responsiveOptions() {
+            this.destroyResponsiveStyleElement();
+            this.createResponsiveStyle();
+        },
+        currentView() {
+            Promise.resolve(null).then(() => this.alignOverlay());
+        },
+        view(newValue) {
+            this.currentView = newValue;
+        }
+    },
+    created() {
+        this.updateCurrentMetaData();
+    },
+    mounted() {
+        this.d_id = this.d_id || UniqueComponentId();
+        this.createResponsiveStyle();
+        this.bindMatchMediaListener();
+
+        if (this.inline) {
+            this.overlay && this.overlay.setAttribute(this.attributeSelector, '');
+
+            if (!this.disabled) {
+                this.preventFocus = true;
+                this.initFocusableCell();
+            }
+        } else {
+            this.input.value = this.inputFieldValue;
+        }
+    },
+    updated() {
+        if (this.overlay) {
+            this.preventFocus = true;
+            setTimeout(this.updateFocus, 0);
+        }
+
+        if (this.input && this.selectionStart != null && this.selectionEnd != null) {
+            this.input.selectionStart = this.selectionStart;
+            this.input.selectionEnd = this.selectionEnd;
+            this.selectionStart = null;
+            this.selectionEnd = null;
+        }
+    },
+    beforeUnmount() {
+        if (this.timePickerTimer) {
+            clearTimeout(this.timePickerTimer);
+        }
+
+        this.destroyResponsiveStyleElement();
+
+        this.unbindOutsideClickListener();
+        this.unbindResizeListener();
+        this.unbindMatchMediaListener();
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
+
+        if (this.overlay && this.autoZIndex) {
+            ZIndexUtils.clear(this.overlay);
+        }
+
+        this.overlay = null;
+    },
+    methods: {
+        isComparable() {
+            return this.modelValue != null && typeof this.modelValue !== 'string';
+        },
+        isSelected(dateMeta) {
+            if (!this.isComparable()) {
+                return false;
+            }
+
+            if (this.modelValue) {
+                if (this.isSingleSelection()) {
+                    return this.isDateEquals(this.modelValue, dateMeta);
+                } else if (this.isMultipleSelection()) {
+                    let selected = false;
+
+                    for (let date of this.modelValue) {
+                        selected = this.isDateEquals(date, dateMeta);
+
+                        if (selected) {
+                            break;
+                        }
+                    }
+
+                    return selected;
+                } else if (this.isRangeSelection()) {
+                    if (this.modelValue[1]) return this.isDateEquals(this.modelValue[0], dateMeta) || this.isDateEquals(this.modelValue[1], dateMeta) || this.isDateBetween(this.modelValue[0], this.modelValue[1], dateMeta);
+                    else {
+                        return this.isDateEquals(this.modelValue[0], dateMeta);
+                    }
+                }
+            }
+
+            return false;
+        },
+        isMonthSelected(month) {
+            if (this.isComparable()) {
+                let value = this.isRangeSelection() ? this.modelValue[0] : this.modelValue;
+
+                if (this.isMultipleSelection()) {
+                    return value.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
+                } else {
+                    return value.getMonth() === month && value.getFullYear() === this.currentYear;
+                }
+            }
+
+            return false;
+        },
+        isYearSelected(year) {
+            if (this.isComparable()) {
+                let value = this.isRangeSelection() ? this.modelValue[0] : this.modelValue;
+
+                if (this.isMultipleSelection()) {
+                    return value.some((currentValue) => currentValue.getFullYear() === year);
+                } else {
+                    return value.getFullYear() === year;
+                }
+            }
+
+            return false;
+        },
+        isDateEquals(value, dateMeta) {
+            if (value) return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
+            else return false;
+        },
+        isDateBetween(start, end, dateMeta) {
+            let between = false;
+
+            if (start && end) {
+                let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+
+                return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
+            }
+
+            return between;
+        },
+        getFirstDayOfMonthIndex(month, year) {
+            let day = new Date();
+
+            day.setDate(1);
+            day.setMonth(month);
+            day.setFullYear(year);
+
+            let dayIndex = day.getDay() + this.sundayIndex;
+
+            return dayIndex >= 7 ? dayIndex - 7 : dayIndex;
+        },
+        getDaysCountInMonth(month, year) {
+            return 32 - this.daylightSavingAdjust(new Date(year, month, 32)).getDate();
+        },
+        getDaysCountInPrevMonth(month, year) {
+            let prev = this.getPreviousMonthAndYear(month, year);
+
+            return this.getDaysCountInMonth(prev.month, prev.year);
+        },
+        getPreviousMonthAndYear(month, year) {
+            let m, y;
+
+            if (month === 0) {
+                m = 11;
+                y = year - 1;
+            } else {
+                m = month - 1;
+                y = year;
+            }
+
+            return { month: m, year: y };
+        },
+        getNextMonthAndYear(month, year) {
+            let m, y;
+
+            if (month === 11) {
+                m = 0;
+                y = year + 1;
+            } else {
+                m = month + 1;
+                y = year;
+            }
+
+            return { month: m, year: y };
+        },
+        daylightSavingAdjust(date) {
+            if (!date) {
+                return null;
+            }
+
+            date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
+
+            return date;
+        },
+        isToday(today, day, month, year) {
+            return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
+        },
+        isSelectable(day, month, year, otherMonth) {
+            let validMin = true;
+            let validMax = true;
+            let validDate = true;
+            let validDay = true;
+
+            if (otherMonth && !this.selectOtherMonths) {
+                return false;
+            }
+
+            if (this.minDate) {
+                if (this.minDate.getFullYear() > year) {
+                    validMin = false;
+                } else if (this.minDate.getFullYear() === year) {
+                    if (this.minDate.getMonth() > month) {
+                        validMin = false;
+                    } else if (this.minDate.getMonth() === month) {
+                        if (this.minDate.getDate() > day) {
+                            validMin = false;
+                        }
+                    }
+                }
+            }
+
+            if (this.maxDate) {
+                if (this.maxDate.getFullYear() < year) {
+                    validMax = false;
+                } else if (this.maxDate.getFullYear() === year) {
+                    if (this.maxDate.getMonth() < month) {
+                        validMax = false;
+                    } else if (this.maxDate.getMonth() === month) {
+                        if (this.maxDate.getDate() < day) {
+                            validMax = false;
+                        }
+                    }
+                }
+            }
+
+            if (this.disabledDates) {
+                validDate = !this.isDateDisabled(day, month, year);
+            }
+
+            if (this.disabledDays) {
+                validDay = !this.isDayDisabled(day, month, year);
+            }
+
+            return validMin && validMax && validDate && validDay;
+        },
+        onOverlayEnter(el) {
+            el.setAttribute(this.attributeSelector, '');
+            const styles = !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
+
+            DomHandler.addStyles(el, styles);
+
+            if (this.autoZIndex) {
+                ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
+            }
+
+            this.alignOverlay();
+            this.$emit('show');
+        },
+        onOverlayEnterComplete() {
+            this.bindOutsideClickListener();
+            this.bindScrollListener();
+            this.bindResizeListener();
+        },
+        onOverlayAfterLeave(el) {
+            if (this.autoZIndex) {
+                ZIndexUtils.clear(el);
+            }
+        },
+        onOverlayLeave() {
+            this.currentView = this.view;
+            this.unbindOutsideClickListener();
+            this.unbindScrollListener();
+            this.unbindResizeListener();
+            this.$emit('hide');
+
+            this.overlay = null;
+        },
+        onPrevButtonClick(event) {
+            if (this.showOtherMonths) {
+                this.navigationState = { backward: true, button: true };
+                this.navBackward(event);
+            }
+        },
+        onNextButtonClick(event) {
+            if (this.showOtherMonths) {
+                this.navigationState = { backward: false, button: true };
+                this.navForward(event);
+            }
+        },
+        navBackward(event) {
+            event.preventDefault();
+
+            if (!this.isEnabled()) {
+                return;
+            }
+
+            if (this.currentView === 'month') {
+                this.decrementYear();
+                this.$emit('year-change', { month: this.currentMonth, year: this.currentYear });
+            } else if (this.currentView === 'year') {
+                this.decrementDecade();
+            } else {
+                if (event.shiftKey) {
+                    this.decrementYear();
+                } else {
+                    if (this.currentMonth === 0) {
+                        this.currentMonth = 11;
+                        this.decrementYear();
+                    } else {
+                        this.currentMonth--;
+                    }
+
+                    this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
+                }
+            }
+        },
+        navForward(event) {
+            event.preventDefault();
+
+            if (!this.isEnabled()) {
+                return;
+            }
+
+            if (this.currentView === 'month') {
+                this.incrementYear();
+                this.$emit('year-change', { month: this.currentMonth, year: this.currentYear });
+            } else if (this.currentView === 'year') {
+                this.incrementDecade();
+            } else {
+                if (event.shiftKey) {
+                    this.incrementYear();
+                } else {
+                    if (this.currentMonth === 11) {
+                        this.currentMonth = 0;
+                        this.incrementYear();
+                    } else {
+                        this.currentMonth++;
+                    }
+
+                    this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
+                }
+            }
+        },
+        decrementYear() {
+            this.currentYear--;
+        },
+        decrementDecade() {
+            this.currentYear = this.currentYear - 10;
+        },
+        incrementYear() {
+            this.currentYear++;
+        },
+        incrementDecade() {
+            this.currentYear = this.currentYear + 10;
+        },
+        switchToMonthView(event) {
+            this.currentView = 'month';
+            setTimeout(this.updateFocus, 0);
+            event.preventDefault();
+        },
+        switchToYearView(event) {
+            this.currentView = 'year';
+            setTimeout(this.updateFocus, 0);
+            event.preventDefault();
+        },
+        isEnabled() {
+            return !this.disabled && !this.readonly;
+        },
+        updateCurrentTimeMeta(date) {
+            let currentHour = date.getHours();
+
+            if (this.hourFormat === '12') {
+                this.pm = currentHour > 11;
+
+                if (currentHour >= 12) currentHour = currentHour == 12 ? 12 : currentHour - 12;
+                else currentHour = currentHour == 0 ? 12 : currentHour;
+            }
+
+            this.currentHour = Math.floor(currentHour / this.stepHour) * this.stepHour;
+            this.currentMinute = Math.floor(date.getMinutes() / this.stepMinute) * this.stepMinute;
+            this.currentSecond = Math.floor(date.getSeconds() / this.stepSecond) * this.stepSecond;
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.overlayVisible && this.isOutsideClicked(event)) {
+                        this.overlayVisible = false;
+                    }
+                };
+
+                document.addEventListener('mousedown', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('mousedown', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
+                    if (this.overlayVisible) {
+                        this.overlayVisible = false;
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.overlayVisible && !DomHandler.isTouchDevice()) {
+                        this.overlayVisible = false;
+                    }
+                };
+
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
+        bindMatchMediaListener() {
+            if (!this.matchMediaListener) {
+                const query = matchMedia(`(max-width: ${this.breakpoint})`);
+
+                this.query = query;
+                this.queryMatches = query.matches;
+
+                this.matchMediaListener = () => {
+                    this.queryMatches = query.matches;
+                    this.mobileActive = false;
+                };
+
+                this.query.addEventListener('change', this.matchMediaListener);
+            }
+        },
+        unbindMatchMediaListener() {
+            if (this.matchMediaListener) {
+                this.query.removeEventListener('change', this.matchMediaListener);
+                this.matchMediaListener = null;
+            }
+        },
+        isOutsideClicked(event) {
+            return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
+        },
+        isNavIconClicked(event) {
+            return (this.previousButton && (this.previousButton.isSameNode(event.target) || this.previousButton.contains(event.target))) || (this.nextButton && (this.nextButton.isSameNode(event.target) || this.nextButton.contains(event.target)));
+        },
+        alignOverlay() {
+            if (this.overlay) {
+                if (this.appendTo === 'self' || this.inline) {
+                    DomHandler.relativePosition(this.overlay, this.$el);
+                } else {
+                    if (this.view === 'date') {
+                        this.overlay.style.width = DomHandler.getOuterWidth(this.overlay) + 'px';
+                        this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
+                    } else {
+                        this.overlay.style.width = DomHandler.getOuterWidth(this.$el) + 'px';
+                    }
+
+                    DomHandler.absolutePosition(this.overlay, this.$el);
+                }
+            }
+        },
+        onButtonClick() {
+            if (this.isEnabled()) {
+                if (!this.overlayVisible) {
+                    this.input.focus();
+                    this.overlayVisible = true;
+                } else {
+                    this.overlayVisible = false;
+                }
+            }
+        },
+        isDateDisabled(day, month, year) {
+            if (this.disabledDates) {
+                for (let disabledDate of this.disabledDates) {
+                    if (disabledDate.getFullYear() === year && disabledDate.getMonth() === month && disabledDate.getDate() === day) {
+                        return true;
+                    }
+                }
+            }
+
+            return false;
+        },
+        isDayDisabled(day, month, year) {
+            if (this.disabledDays) {
+                let weekday = new Date(year, month, day);
+                let weekdayNumber = weekday.getDay();
+
+                return this.disabledDays.indexOf(weekdayNumber) !== -1;
+            }
+
+            return false;
+        },
+        onMonthDropdownChange(value) {
+            this.currentMonth = parseInt(value);
+            this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
+        },
+        onYearDropdownChange(value) {
+            this.currentYear = parseInt(value);
+            this.$emit('year-change', { month: this.currentMonth + 1, year: this.currentYear });
+        },
+        onDateSelect(event, dateMeta) {
+            if (this.disabled || !dateMeta.selectable) {
+                return;
+            }
+
+            DomHandler.find(this.overlay, 'table td span:not([data-p-disabled="true"])').forEach((cell) => (cell.tabIndex = -1));
+
+            if (event) {
+                event.currentTarget.focus();
+            }
+
+            if (this.isMultipleSelection() && this.isSelected(dateMeta)) {
+                let newValue = this.modelValue.filter((date) => !this.isDateEquals(date, dateMeta));
+
+                this.updateModel(newValue);
+            } else {
+                if (this.shouldSelectDate(dateMeta)) {
+                    if (dateMeta.otherMonth) {
+                        this.currentMonth = dateMeta.month;
+                        this.currentYear = dateMeta.year;
+                        this.selectDate(dateMeta);
+                    } else {
+                        this.selectDate(dateMeta);
+                    }
+                }
+            }
+
+            if (this.isSingleSelection() && (!this.showTime || this.hideOnDateTimeSelect)) {
+                setTimeout(() => {
+                    if (this.input) {
+                        this.input.focus();
+                    }
+
+                    this.overlayVisible = false;
+                }, 150);
+            }
+        },
+        selectDate(dateMeta) {
+            let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+
+            if (this.showTime) {
+                if (this.hourFormat === '12' && this.currentHour !== 12) {
+                    this.pm ? date.setHours(this.currentHour + 12) : date.setHours(this.currentHour);
+                }
+
+                date.setMinutes(this.currentMinute);
+                date.setSeconds(this.currentSecond);
+            }
+
+            if (this.minDate && this.minDate > date) {
+                date = this.minDate;
+                this.currentHour = date.getHours();
+                this.currentMinute = date.getMinutes();
+                this.currentSecond = date.getSeconds();
+            }
+
+            if (this.maxDate && this.maxDate < date) {
+                date = this.maxDate;
+                this.currentHour = date.getHours();
+                this.currentMinute = date.getMinutes();
+                this.currentSecond = date.getSeconds();
+            }
+
+            let modelVal = null;
+
+            if (this.isSingleSelection()) {
+                modelVal = date;
+            } else if (this.isMultipleSelection()) {
+                modelVal = this.modelValue ? [...this.modelValue, date] : [date];
+            } else if (this.isRangeSelection()) {
+                if (this.modelValue && this.modelValue.length) {
+                    let startDate = this.modelValue[0];
+                    let endDate = this.modelValue[1];
+
+                    if (!endDate && date.getTime() >= startDate.getTime()) {
+                        endDate = date;
+                    } else {
+                        startDate = date;
+                        endDate = null;
+                    }
+
+                    modelVal = [startDate, endDate];
+                } else {
+                    modelVal = [date, null];
+                }
+            }
+
+            if (modelVal !== null) {
+                this.updateModel(modelVal);
+            }
+
+            if (this.isRangeSelection() && this.hideOnRangeSelection && modelVal[1] !== null) {
+                setTimeout(() => {
+                    this.overlayVisible = false;
+                }, 150);
+            }
+
+            this.$emit('date-select', date);
+        },
+        updateModel(value) {
+            this.$emit('update:modelValue', value);
+        },
+        shouldSelectDate() {
+            if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.modelValue ? this.modelValue.length : 0) : true;
+            else return true;
+        },
+        isSingleSelection() {
+            return this.selectionMode === 'single';
+        },
+        isRangeSelection() {
+            return this.selectionMode === 'range';
+        },
+        isMultipleSelection() {
+            return this.selectionMode === 'multiple';
+        },
+        formatValue(value) {
+            if (typeof value === 'string') {
+                return value;
+            }
+
+            let formattedValue = '';
+
+            if (value) {
+                try {
+                    if (this.isSingleSelection()) {
+                        formattedValue = this.formatDateTime(value);
+                    } else if (this.isMultipleSelection()) {
+                        for (let i = 0; i < value.length; i++) {
+                            let dateAsString = this.formatDateTime(value[i]);
+
+                            formattedValue += dateAsString;
+
+                            if (i !== value.length - 1) {
+                                formattedValue += ', ';
+                            }
+                        }
+                    } else if (this.isRangeSelection()) {
+                        if (value && value.length) {
+                            let startDate = value[0];
+                            let endDate = value[1];
+
+                            formattedValue = this.formatDateTime(startDate);
+
+                            if (endDate) {
+                                formattedValue += ' - ' + this.formatDateTime(endDate);
+                            }
+                        }
+                    }
+                } catch (err) {
+                    formattedValue = value;
+                }
+            }
+
+            return formattedValue;
+        },
+        formatDateTime(date) {
+            let formattedValue = null;
+
+            if (date) {
+                if (this.timeOnly) {
+                    formattedValue = this.formatTime(date);
+                } else {
+                    formattedValue = this.formatDate(date, this.datePattern);
+
+                    if (this.showTime) {
+                        formattedValue += ' ' + this.formatTime(date);
+                    }
+                }
+            }
+
+            return formattedValue;
+        },
+        formatDate(date, format) {
+            if (!date) {
+                return '';
+            }
+
+            let iFormat;
+
+            const lookAhead = (match) => {
+                    const matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
+
+                    if (matches) {
+                        iFormat++;
+                    }
+
+                    return matches;
+                },
+                formatNumber = (match, value, len) => {
+                    let num = '' + value;
+
+                    if (lookAhead(match)) {
+                        while (num.length < len) {
+                            num = '0' + num;
+                        }
+                    }
+
+                    return num;
+                },
+                formatName = (match, value, shortNames, longNames) => {
+                    return lookAhead(match) ? longNames[value] : shortNames[value];
+                };
+
+            let output = '';
+            let literal = false;
+
+            if (date) {
+                for (iFormat = 0; iFormat < format.length; iFormat++) {
+                    if (literal) {
+                        if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
+                            literal = false;
+                        } else {
+                            output += format.charAt(iFormat);
+                        }
+                    } else {
+                        switch (format.charAt(iFormat)) {
+                            case 'd':
+                                output += formatNumber('d', date.getDate(), 2);
+                                break;
+                            case 'D':
+                                output += formatName('D', date.getDay(), this.$primevue.config.locale.dayNamesShort, this.$primevue.config.locale.dayNames);
+                                break;
+                            case 'o':
+                                output += formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
+                                break;
+                            case 'm':
+                                output += formatNumber('m', date.getMonth() + 1, 2);
+                                break;
+                            case 'M':
+                                output += formatName('M', date.getMonth(), this.$primevue.config.locale.monthNamesShort, this.$primevue.config.locale.monthNames);
+                                break;
+                            case 'y':
+                                output += lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100);
+                                break;
+                            case '@':
+                                output += date.getTime();
+                                break;
+                            case '!':
+                                output += date.getTime() * 10000 + this.ticksTo1970;
+                                break;
+                            case "'":
+                                if (lookAhead("'")) {
+                                    output += "'";
+                                } else {
+                                    literal = true;
+                                }
+
+                                break;
+                            default:
+                                output += format.charAt(iFormat);
+                        }
+                    }
+                }
+            }
+
+            return output;
+        },
+        formatTime(date) {
+            if (!date) {
+                return '';
+            }
+
+            let output = '';
+            let hours = date.getHours();
+            let minutes = date.getMinutes();
+            let seconds = date.getSeconds();
+
+            if (this.hourFormat === '12' && hours > 11 && hours !== 12) {
+                hours -= 12;
+            }
+
+            if (this.hourFormat === '12') {
+                output += hours === 0 ? 12 : hours < 10 ? '0' + hours : hours;
+            } else {
+                output += hours < 10 ? '0' + hours : hours;
+            }
+
+            output += ':';
+            output += minutes < 10 ? '0' + minutes : minutes;
+
+            if (this.showSeconds) {
+                output += ':';
+                output += seconds < 10 ? '0' + seconds : seconds;
+            }
+
+            if (this.hourFormat === '12') {
+                output += date.getHours() > 11 ? ` ${this.$primevue.config.locale.pm}` : ` ${this.$primevue.config.locale.am}`;
+            }
+
+            return output;
+        },
+        onTodayButtonClick(event) {
+            let date = new Date();
+            let dateMeta = {
+                day: date.getDate(),
+                month: date.getMonth(),
+                year: date.getFullYear(),
+                otherMonth: date.getMonth() !== this.currentMonth || date.getFullYear() !== this.currentYear,
+                today: true,
+                selectable: true
+            };
+
+            this.onDateSelect(null, dateMeta);
+            this.$emit('today-click', date);
+            event.preventDefault();
+        },
+        onClearButtonClick(event) {
+            this.updateModel(null);
+            this.overlayVisible = false;
+            this.$emit('clear-click', event);
+            event.preventDefault();
+        },
+        onTimePickerElementMouseDown(event, type, direction) {
+            if (this.isEnabled()) {
+                this.repeat(event, null, type, direction);
+                event.preventDefault();
+            }
+        },
+        onTimePickerElementMouseUp(event) {
+            if (this.isEnabled()) {
+                this.clearTimePickerTimer();
+                this.updateModelTime();
+                event.preventDefault();
+            }
+        },
+        onTimePickerElementMouseLeave() {
+            this.clearTimePickerTimer();
+        },
+        repeat(event, interval, type, direction) {
+            let i = interval || 500;
+
+            this.clearTimePickerTimer();
+            this.timePickerTimer = setTimeout(() => {
+                this.repeat(event, 100, type, direction);
+            }, i);
+
+            switch (type) {
+                case 0:
+                    if (direction === 1) this.incrementHour(event);
+                    else this.decrementHour(event);
+                    break;
+
+                case 1:
+                    if (direction === 1) this.incrementMinute(event);
+                    else this.decrementMinute(event);
+                    break;
+
+                case 2:
+                    if (direction === 1) this.incrementSecond(event);
+                    else this.decrementSecond(event);
+                    break;
+            }
+        },
+        convertTo24Hour(hours, pm) {
+            if (this.hourFormat == '12') {
+                if (hours === 12) {
+                    return pm ? 12 : 0;
+                } else {
+                    return pm ? hours + 12 : hours;
+                }
+            }
+
+            return hours;
+        },
+        validateTime(hour, minute, second, pm) {
+            let value = this.isComparable() ? this.modelValue : this.viewDate;
+            const convertedHour = this.convertTo24Hour(hour, pm);
+
+            if (this.isRangeSelection()) {
+                value = this.modelValue[1] || this.modelValue[0];
+            }
+
+            if (this.isMultipleSelection()) {
+                value = this.modelValue[this.modelValue.length - 1];
+            }
+
+            const valueDateString = value ? value.toDateString() : null;
+
+            if (this.minDate && valueDateString && this.minDate.toDateString() === valueDateString) {
+                if (this.minDate.getHours() > convertedHour) {
+                    return false;
+                }
+
+                if (this.minDate.getHours() === convertedHour) {
+                    if (this.minDate.getMinutes() > minute) {
+                        return false;
+                    }
+
+                    if (this.minDate.getMinutes() === minute) {
+                        if (this.minDate.getSeconds() > second) {
+                            return false;
+                        }
+                    }
+                }
+            }
+
+            if (this.maxDate && valueDateString && this.maxDate.toDateString() === valueDateString) {
+                if (this.maxDate.getHours() < convertedHour) {
+                    return false;
+                }
+
+                if (this.maxDate.getHours() === convertedHour) {
+                    if (this.maxDate.getMinutes() < minute) {
+                        return false;
+                    }
+
+                    if (this.maxDate.getMinutes() === minute) {
+                        if (this.maxDate.getSeconds() < second) {
+                            return false;
+                        }
+                    }
+                }
+            }
+
+            return true;
+        },
+        incrementHour(event) {
+            let prevHour = this.currentHour;
+            let newHour = this.currentHour + Number(this.stepHour);
+            let newPM = this.pm;
+
+            if (this.hourFormat == '24') newHour = newHour >= 24 ? newHour - 24 : newHour;
+            else if (this.hourFormat == '12') {
+                // Before the AM/PM break, now after
+                if (prevHour < 12 && newHour > 11) {
+                    newPM = !this.pm;
+                }
+
+                newHour = newHour >= 13 ? newHour - 12 : newHour;
+            }
+
+            if (this.validateTime(newHour, this.currentMinute, this.currentSecond, newPM)) {
+                this.currentHour = newHour;
+                this.pm = newPM;
+            }
+
+            event.preventDefault();
+        },
+        decrementHour(event) {
+            let newHour = this.currentHour - this.stepHour;
+            let newPM = this.pm;
+
+            if (this.hourFormat == '24') newHour = newHour < 0 ? 24 + newHour : newHour;
+            else if (this.hourFormat == '12') {
+                // If we were at noon/midnight, then switch
+                if (this.currentHour === 12) {
+                    newPM = !this.pm;
+                }
+
+                newHour = newHour <= 0 ? 12 + newHour : newHour;
+            }
+
+            if (this.validateTime(newHour, this.currentMinute, this.currentSecond, newPM)) {
+                this.currentHour = newHour;
+                this.pm = newPM;
+            }
+
+            event.preventDefault();
+        },
+        incrementMinute(event) {
+            let newMinute = this.currentMinute + Number(this.stepMinute);
+
+            if (this.validateTime(this.currentHour, newMinute, this.currentSecond, this.pm)) {
+                this.currentMinute = newMinute > 59 ? newMinute - 60 : newMinute;
+            }
+
+            event.preventDefault();
+        },
+        decrementMinute(event) {
+            let newMinute = this.currentMinute - this.stepMinute;
+
+            newMinute = newMinute < 0 ? 60 + newMinute : newMinute;
+
+            if (this.validateTime(this.currentHour, newMinute, this.currentSecond, this.pm)) {
+                this.currentMinute = newMinute;
+            }
+
+            event.preventDefault();
+        },
+        incrementSecond(event) {
+            let newSecond = this.currentSecond + Number(this.stepSecond);
+
+            if (this.validateTime(this.currentHour, this.currentMinute, newSecond, this.pm)) {
+                this.currentSecond = newSecond > 59 ? newSecond - 60 : newSecond;
+            }
+
+            event.preventDefault();
+        },
+        decrementSecond(event) {
+            let newSecond = this.currentSecond - this.stepSecond;
+
+            newSecond = newSecond < 0 ? 60 + newSecond : newSecond;
+
+            if (this.validateTime(this.currentHour, this.currentMinute, newSecond, this.pm)) {
+                this.currentSecond = newSecond;
+            }
+
+            event.preventDefault();
+        },
+        updateModelTime() {
+            this.timePickerChange = true;
+            let value = this.isComparable() ? this.modelValue : this.viewDate;
+
+            if (this.isRangeSelection()) {
+                value = this.modelValue[1] || this.modelValue[0];
+            }
+
+            if (this.isMultipleSelection()) {
+                value = this.modelValue[this.modelValue.length - 1];
+            }
+
+            value = value ? new Date(value.getTime()) : new Date();
+
+            if (this.hourFormat == '12') {
+                if (this.currentHour === 12) value.setHours(this.pm ? 12 : 0);
+                else value.setHours(this.pm ? this.currentHour + 12 : this.currentHour);
+            } else {
+                value.setHours(this.currentHour);
+            }
+
+            value.setMinutes(this.currentMinute);
+            value.setSeconds(this.currentSecond);
+
+            if (this.isRangeSelection()) {
+                if (this.modelValue[1]) value = [this.modelValue[0], value];
+                else value = [value, null];
+            }
+
+            if (this.isMultipleSelection()) {
+                value = [...this.modelValue.slice(0, -1), value];
+            }
+
+            this.updateModel(value);
+            this.$emit('date-select', value);
+            setTimeout(() => (this.timePickerChange = false), 0);
+        },
+        toggleAMPM(event) {
+            const validHour = this.validateTime(this.currentHour, this.currentMinute, this.currentSecond, !this.pm);
+
+            if (!validHour && (this.maxDate || this.minDate)) return;
+
+            this.pm = !this.pm;
+            this.updateModelTime();
+            event.preventDefault();
+        },
+        clearTimePickerTimer() {
+            if (this.timePickerTimer) {
+                clearInterval(this.timePickerTimer);
+            }
+        },
+        onMonthSelect(event, { month, index }) {
+            if (this.view === 'month') {
+                this.onDateSelect(event, { year: this.currentYear, month: index, day: 1, selectable: true });
+            } else {
+                this.currentMonth = index;
+                this.currentView = 'date';
+                this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
+            }
+
+            setTimeout(this.updateFocus, 0);
+        },
+        onYearSelect(event, year) {
+            if (this.view === 'year') {
+                this.onDateSelect(event, { year: year.value, month: 0, day: 1, selectable: true });
+            } else {
+                this.currentYear = year.value;
+                this.currentView = 'month';
+                this.$emit('year-change', { month: this.currentMonth + 1, year: this.currentYear });
+            }
+
+            setTimeout(this.updateFocus, 0);
+        },
+        updateCurrentMetaData() {
+            const viewDate = this.viewDate;
+
+            this.currentMonth = viewDate.getMonth();
+            this.currentYear = viewDate.getFullYear();
+
+            if (this.showTime || this.timeOnly) {
+                this.updateCurrentTimeMeta(viewDate);
+            }
+        },
+        isValidSelection(value) {
+            if (value == null) {
+                return true;
+            }
+
+            let isValid = true;
+
+            if (this.isSingleSelection()) {
+                if (!this.isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false)) {
+                    isValid = false;
+                }
+            } else if (value.every((v) => this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false))) {
+                if (this.isRangeSelection()) {
+                    isValid = value.length > 1 && value[1] > value[0] ? true : false;
+                }
+            }
+
+            return isValid;
+        },
+        parseValue(text) {
+            if (!text || text.trim().length === 0) {
+                return null;
+            }
+
+            let value;
+
+            if (this.isSingleSelection()) {
+                value = this.parseDateTime(text);
+            } else if (this.isMultipleSelection()) {
+                let tokens = text.split(',');
+
+                value = [];
+
+                for (let token of tokens) {
+                    value.push(this.parseDateTime(token.trim()));
+                }
+            } else if (this.isRangeSelection()) {
+                let tokens = text.split(' - ');
+
+                value = [];
+
+                for (let i = 0; i < tokens.length; i++) {
+                    value[i] = this.parseDateTime(tokens[i].trim());
+                }
+            }
+
+            return value;
+        },
+        parseDateTime(text) {
+            let date;
+            let parts = text.split(' ');
+
+            if (this.timeOnly) {
+                date = new Date();
+                this.populateTime(date, parts[0], parts[1]);
+            } else {
+                const dateFormat = this.datePattern;
+
+                if (this.showTime) {
+                    date = this.parseDate(parts[0], dateFormat);
+                    this.populateTime(date, parts[1], parts[2]);
+                } else {
+                    date = this.parseDate(text, dateFormat);
+                }
+            }
+
+            return date;
+        },
+        populateTime(value, timeString, ampm) {
+            if (this.hourFormat == '12' && !ampm) {
+                throw 'Invalid Time';
+            }
+
+            this.pm = ampm === this.$primevue.config.locale.pm || ampm === this.$primevue.config.locale.pm.toLowerCase();
+            let time = this.parseTime(timeString);
+
+            value.setHours(time.hour);
+            value.setMinutes(time.minute);
+            value.setSeconds(time.second);
+        },
+        parseTime(value) {
+            let tokens = value.split(':');
+            let validTokenLength = this.showSeconds ? 3 : 2;
+            let regex = /^[0-9][0-9]$/;
+
+            if (tokens.length !== validTokenLength || !tokens[0].match(regex) || !tokens[1].match(regex) || (this.showSeconds && !tokens[2].match(regex))) {
+                throw 'Invalid time';
+            }
+
+            let h = parseInt(tokens[0]);
+            let m = parseInt(tokens[1]);
+            let s = this.showSeconds ? parseInt(tokens[2]) : null;
+
+            if (isNaN(h) || isNaN(m) || h > 23 || m > 59 || (this.hourFormat == '12' && h > 12) || (this.showSeconds && (isNaN(s) || s > 59))) {
+                throw 'Invalid time';
+            } else {
+                if (this.hourFormat == '12' && h !== 12 && this.pm) {
+                    h += 12;
+                } else if (this.hourFormat == '12' && h == 12 && !this.pm) {
+                    h = 0;
+                }
+
+                return { hour: h, minute: m, second: s };
+            }
+        },
+        parseDate(value, format) {
+            if (format == null || value == null) {
+                throw 'Invalid arguments';
+            }
+
+            value = typeof value === 'object' ? value.toString() : value + '';
+
+            if (value === '') {
+                return null;
+            }
+
+            let iFormat,
+                dim,
+                extra,
+                iValue = 0,
+                shortYearCutoff = typeof this.shortYearCutoff !== 'string' ? this.shortYearCutoff : (new Date().getFullYear() % 100) + parseInt(this.shortYearCutoff, 10),
+                year = -1,
+                month = -1,
+                day = -1,
+                doy = -1,
+                literal = false,
+                date,
+                lookAhead = (match) => {
+                    let matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
+
+                    if (matches) {
+                        iFormat++;
+                    }
+
+                    return matches;
+                },
+                getNumber = (match) => {
+                    let isDoubled = lookAhead(match),
+                        size = match === '@' ? 14 : match === '!' ? 20 : match === 'y' && isDoubled ? 4 : match === 'o' ? 3 : 2,
+                        minSize = match === 'y' ? size : 1,
+                        digits = new RegExp('^\\d{' + minSize + ',' + size + '}'),
+                        num = value.substring(iValue).match(digits);
+
+                    if (!num) {
+                        throw 'Missing number at position ' + iValue;
+                    }
+
+                    iValue += num[0].length;
+
+                    return parseInt(num[0], 10);
+                },
+                getName = (match, shortNames, longNames) => {
+                    let index = -1;
+                    let arr = lookAhead(match) ? longNames : shortNames;
+                    let names = [];
+
+                    for (let i = 0; i < arr.length; i++) {
+                        names.push([i, arr[i]]);
+                    }
+
+                    names.sort((a, b) => {
+                        return -(a[1].length - b[1].length);
+                    });
+
+                    for (let i = 0; i < names.length; i++) {
+                        let name = names[i][1];
+
+                        if (value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
+                            index = names[i][0];
+                            iValue += name.length;
+                            break;
+                        }
+                    }
+
+                    if (index !== -1) {
+                        return index + 1;
+                    } else {
+                        throw 'Unknown name at position ' + iValue;
+                    }
+                },
+                checkLiteral = () => {
+                    if (value.charAt(iValue) !== format.charAt(iFormat)) {
+                        throw 'Unexpected literal at position ' + iValue;
+                    }
+
+                    iValue++;
+                };
+
+            if (this.currentView === 'month') {
+                day = 1;
+            }
+
+            for (iFormat = 0; iFormat < format.length; iFormat++) {
+                if (literal) {
+                    if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
+                        literal = false;
+                    } else {
+                        checkLiteral();
+                    }
+                } else {
+                    switch (format.charAt(iFormat)) {
+                        case 'd':
+                            day = getNumber('d');
+                            break;
+                        case 'D':
+                            getName('D', this.$primevue.config.locale.dayNamesShort, this.$primevue.config.locale.dayNames);
+                            break;
+                        case 'o':
+                            doy = getNumber('o');
+                            break;
+                        case 'm':
+                            month = getNumber('m');
+                            break;
+                        case 'M':
+                            month = getName('M', this.$primevue.config.locale.monthNamesShort, this.$primevue.config.locale.monthNames);
+                            break;
+                        case 'y':
+                            year = getNumber('y');
+                            break;
+                        case '@':
+                            date = new Date(getNumber('@'));
+                            year = date.getFullYear();
+                            month = date.getMonth() + 1;
+                            day = date.getDate();
+                            break;
+                        case '!':
+                            date = new Date((getNumber('!') - this.ticksTo1970) / 10000);
+                            year = date.getFullYear();
+                            month = date.getMonth() + 1;
+                            day = date.getDate();
+                            break;
+                        case "'":
+                            if (lookAhead("'")) {
+                                checkLiteral();
+                            } else {
+                                literal = true;
+                            }
+
+                            break;
+                        default:
+                            checkLiteral();
+                    }
+                }
+            }
+
+            if (iValue < value.length) {
+                extra = value.substr(iValue);
+
+                if (!/^\s+/.test(extra)) {
+                    throw 'Extra/unparsed characters found in date: ' + extra;
+                }
+            }
+
+            if (year === -1) {
+                year = new Date().getFullYear();
+            } else if (year < 100) {
+                year += new Date().getFullYear() - (new Date().getFullYear() % 100) + (year <= shortYearCutoff ? 0 : -100);
+            }
+
+            if (doy > -1) {
+                month = 1;
+                day = doy;
+
+                do {
+                    dim = this.getDaysCountInMonth(year, month - 1);
+
+                    if (day <= dim) {
+                        break;
+                    }
+
+                    month++;
+                    day -= dim;
+                    // eslint-disable-next-line
+                } while (true);
+            }
+
+            date = this.daylightSavingAdjust(new Date(year, month - 1, day));
+
+            if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
+                throw 'Invalid date'; // E.g. 31/02/00
+            }
+
+            return date;
+        },
+        getWeekNumber(date) {
+            let checkDate = new Date(date.getTime());
+
+            checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
+            let time = checkDate.getTime();
+
+            checkDate.setMonth(0);
+            checkDate.setDate(1);
+
+            return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
+        },
+        onDateCellKeydown(event, date, groupIndex) {
+            const cellContent = event.currentTarget;
+            const cell = cellContent.parentElement;
+
+            const cellIndex = DomHandler.index(cell);
+
+            switch (event.code) {
+                case 'ArrowDown': {
+                    cellContent.tabIndex = '-1';
+
+                    let nextRow = cell.parentElement.nextElementSibling;
+
+                    if (nextRow) {
+                        let tableRowIndex = DomHandler.index(cell.parentElement);
+                        const tableRows = Array.from(cell.parentElement.parentElement.children);
+                        const nextTableRows = tableRows.slice(tableRowIndex + 1);
+
+                        let hasNextFocusableDate = nextTableRows.find((el) => {
+                            let focusCell = el.children[cellIndex].children[0];
+
+                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                        });
+
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+
+                            focusCell.tabIndex = '0';
+                            focusCell.focus();
+                        } else {
+                            this.navigationState = { backward: false };
+                            this.navForward(event);
+                        }
+                    } else {
+                        this.navigationState = { backward: false };
+                        this.navForward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowUp': {
+                    cellContent.tabIndex = '-1';
+
+                    if (event.altKey) {
+                        this.overlayVisible = false;
+                        this.focused = true;
+                    } else {
+                        let prevRow = cell.parentElement.previousElementSibling;
+
+                        if (prevRow) {
+                            let tableRowIndex = DomHandler.index(cell.parentElement);
+                            const tableRows = Array.from(cell.parentElement.parentElement.children);
+                            const prevTableRows = tableRows.slice(0, tableRowIndex).reverse();
+
+                            let hasNextFocusableDate = prevTableRows.find((el) => {
+                                let focusCell = el.children[cellIndex].children[0];
+
+                                return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                            });
+
+                            if (hasNextFocusableDate) {
+                                let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+
+                                focusCell.tabIndex = '0';
+                                focusCell.focus();
+                            } else {
+                                this.navigationState = { backward: true };
+                                this.navBackward(event);
+                            }
+                        } else {
+                            this.navigationState = { backward: true };
+                            this.navBackward(event);
+                        }
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    cellContent.tabIndex = '-1';
+                    let prevCell = cell.previousElementSibling;
+
+                    if (prevCell) {
+                        const cells = Array.from(cell.parentElement.children);
+                        const prevCells = cells.slice(0, cellIndex).reverse();
+
+                        let hasNextFocusableDate = prevCells.find((el) => {
+                            let focusCell = el.children[0];
+
+                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                        });
+
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[0];
+
+                            focusCell.tabIndex = '0';
+                            focusCell.focus();
+                        } else {
+                            this.navigateToMonth(event, true, groupIndex);
+                        }
+                    } else {
+                        this.navigateToMonth(event, true, groupIndex);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    cellContent.tabIndex = '-1';
+                    let nextCell = cell.nextElementSibling;
+
+                    if (nextCell) {
+                        const cells = Array.from(cell.parentElement.children);
+                        const nextCells = cells.slice(cellIndex + 1);
+                        let hasNextFocusableDate = nextCells.find((el) => {
+                            let focusCell = el.children[0];
+
+                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                        });
+
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[0];
+
+                            focusCell.tabIndex = '0';
+                            focusCell.focus();
+                        } else {
+                            this.navigateToMonth(event, false, groupIndex);
+                        }
+                    } else {
+                        this.navigateToMonth(event, false, groupIndex);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Enter':
+                case 'NumpadEnter':
+
+                case 'Space': {
+                    this.onDateSelect(event, date);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Escape': {
+                    this.overlayVisible = false;
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Tab': {
+                    if (!this.inline) {
+                        this.trapFocus(event);
+                    }
+
+                    break;
+                }
+
+                case 'Home': {
+                    cellContent.tabIndex = '-1';
+                    let currentRow = cell.parentElement;
+                    let focusCell = currentRow.children[0].children[0];
+
+                    if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
+                        this.navigateToMonth(event, true, groupIndex);
+                    } else {
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'End': {
+                    cellContent.tabIndex = '-1';
+                    let currentRow = cell.parentElement;
+                    let focusCell = currentRow.children[currentRow.children.length - 1].children[0];
+
+                    if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
+                        this.navigateToMonth(event, false, groupIndex);
+                    } else {
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'PageUp': {
+                    cellContent.tabIndex = '-1';
+                    if (event.shiftKey) {
+                        this.navigationState = { backward: true };
+                        this.navBackward(event);
+                    } else this.navigateToMonth(event, true, groupIndex);
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'PageDown': {
+                    cellContent.tabIndex = '-1';
+                    if (event.shiftKey) {
+                        this.navigationState = { backward: false };
+                        this.navForward(event);
+                    } else this.navigateToMonth(event, false, groupIndex);
+
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        },
+        navigateToMonth(event, prev, groupIndex) {
+            if (prev) {
+                if (this.numberOfMonths === 1 || groupIndex === 0) {
+                    this.navigationState = { backward: true };
+                    this.navBackward(event);
+                } else {
+                    let prevMonthContainer = this.overlay.children[groupIndex - 1];
+                    let cells = DomHandler.find(prevMonthContainer, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
+                    let focusCell = cells[cells.length - 1];
+
+                    focusCell.tabIndex = '0';
+                    focusCell.focus();
+                }
+            } else {
+                if (this.numberOfMonths === 1 || groupIndex === this.numberOfMonths - 1) {
+                    this.navigationState = { backward: false };
+                    this.navForward(event);
+                } else {
+                    let nextMonthContainer = this.overlay.children[groupIndex + 1];
+                    let focusCell = DomHandler.findSingle(nextMonthContainer, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
+
+                    focusCell.tabIndex = '0';
+                    focusCell.focus();
+                }
+            }
+        },
+        onMonthCellKeydown(event, index) {
+            const cell = event.currentTarget;
+
+            switch (event.code) {
+                case 'ArrowUp':
+
+                case 'ArrowDown': {
+                    cell.tabIndex = '-1';
+                    var cells = cell.parentElement.children;
+                    var cellIndex = DomHandler.index(cell);
+                    let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 3 : cellIndex - 3];
+
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    cell.tabIndex = '-1';
+                    let prevCell = cell.previousElementSibling;
+
+                    if (prevCell) {
+                        prevCell.tabIndex = '0';
+                        prevCell.focus();
+                    } else {
+                        this.navigationState = { backward: true };
+                        this.navBackward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    cell.tabIndex = '-1';
+                    let nextCell = cell.nextElementSibling;
+
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    } else {
+                        this.navigationState = { backward: false };
+                        this.navForward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'PageUp': {
+                    if (event.shiftKey) return;
+                    this.navigationState = { backward: true };
+                    this.navBackward(event);
+
+                    break;
+                }
+
+                case 'PageDown': {
+                    if (event.shiftKey) return;
+                    this.navigationState = { backward: false };
+                    this.navForward(event);
+
+                    break;
+                }
+
+                case 'Enter':
+                case 'NumpadEnter':
+
+                case 'Space': {
+                    this.onMonthSelect(event, index);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Escape': {
+                    this.overlayVisible = false;
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Tab': {
+                    this.trapFocus(event);
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        },
+        onYearCellKeydown(event, index) {
+            const cell = event.currentTarget;
+
+            switch (event.code) {
+                case 'ArrowUp':
+
+                case 'ArrowDown': {
+                    cell.tabIndex = '-1';
+                    var cells = cell.parentElement.children;
+                    var cellIndex = DomHandler.index(cell);
+                    let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
+
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    cell.tabIndex = '-1';
+                    let prevCell = cell.previousElementSibling;
+
+                    if (prevCell) {
+                        prevCell.tabIndex = '0';
+                        prevCell.focus();
+                    } else {
+                        this.navigationState = { backward: true };
+                        this.navBackward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    cell.tabIndex = '-1';
+                    let nextCell = cell.nextElementSibling;
+
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    } else {
+                        this.navigationState = { backward: false };
+                        this.navForward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'PageUp': {
+                    if (event.shiftKey) return;
+                    this.navigationState = { backward: true };
+                    this.navBackward(event);
+
+                    break;
+                }
+
+                case 'PageDown': {
+                    if (event.shiftKey) return;
+                    this.navigationState = { backward: false };
+                    this.navForward(event);
+
+                    break;
+                }
+
+                case 'Enter':
+                case 'NumpadEnter':
+
+                case 'Space': {
+                    this.onYearSelect(event, index);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Escape': {
+                    this.overlayVisible = false;
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Tab': {
+                    this.trapFocus(event);
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        },
+        updateFocus() {
+            let cell;
+
+            if (this.navigationState) {
+                if (this.navigationState.button) {
+                    this.initFocusableCell();
+
+                    if (this.navigationState.backward) this.previousButton.focus();
+                    else this.nextButton.focus();
+                } else {
+                    if (this.navigationState.backward) {
+                        let cells;
+
+                        if (this.currentView === 'month') {
+                            cells = DomHandler.find(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"]:not([data-p-disabled="true"])');
+                        } else if (this.currentView === 'year') {
+                            cells = DomHandler.find(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"]:not([data-p-disabled="true"])');
+                        } else {
+                            cells = DomHandler.find(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
+                        }
+
+                        if (cells && cells.length > 0) {
+                            cell = cells[cells.length - 1];
+                        }
+                    } else {
+                        if (this.currentView === 'month') {
+                            cell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"]:not([data-p-disabled="true"])');
+                        } else if (this.currentView === 'year') {
+                            cell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"]:not([data-p-disabled="true"])');
+                        } else {
+                            cell = DomHandler.findSingle(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
+                        }
+                    }
+
+                    if (cell) {
+                        cell.tabIndex = '0';
+                        cell.focus();
+                    }
+                }
+
+                this.navigationState = null;
+            } else {
+                this.initFocusableCell();
+            }
+        },
+        initFocusableCell() {
+            let cell;
+
+            if (this.currentView === 'month') {
+                let cells = DomHandler.find(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"]');
+                let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"][data-p-highlight="true"]');
+
+                cells.forEach((cell) => (cell.tabIndex = -1));
+                cell = selectedCell || cells[0];
+            } else if (this.currentView === 'year') {
+                let cells = DomHandler.find(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"]');
+                let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"][data-p-highlight="true"]');
+
+                cells.forEach((cell) => (cell.tabIndex = -1));
+                cell = selectedCell || cells[0];
+            } else {
+                cell = DomHandler.findSingle(this.overlay, 'span[data-p-highlight="true"]');
+
+                if (!cell) {
+                    let todayCell = DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
+
+                    if (todayCell) cell = todayCell;
+                    else cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
+                }
+            }
+
+            if (cell) {
+                cell.tabIndex = '0';
+
+                if (!this.inline && (!this.navigationState || !this.navigationState.button) && !this.timePickerChange) {
+                    if (!this.manualInput) cell.focus();
+                }
+
+                this.preventFocus = false;
+            }
+        },
+        trapFocus(event) {
+            event.preventDefault();
+            let focusableElements = DomHandler.getFocusableElements(this.overlay);
+
+            if (focusableElements && focusableElements.length > 0) {
+                if (!document.activeElement) {
+                    focusableElements[0].focus();
+                } else {
+                    let focusedIndex = focusableElements.indexOf(document.activeElement);
+
+                    if (event.shiftKey) {
+                        if (focusedIndex === -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();
+                        else focusableElements[focusedIndex - 1].focus();
+                    } else {
+                        if (focusedIndex === -1) {
+                            if (this.timeOnly) {
+                                focusableElements[0].focus();
+                            } else {
+                                let spanIndex = null;
+
+                                for (let i = 0; i < focusableElements.length; i++) {
+                                    if (focusableElements[i].tagName === 'SPAN') spanIndex = i;
+                                }
+
+                                focusableElements[spanIndex].focus();
+                            }
+                        } else if (focusedIndex === focusableElements.length - 1) focusableElements[0].focus();
+                        else focusableElements[focusedIndex + 1].focus();
+                    }
+                }
+            }
+        },
+        onContainerButtonKeydown(event) {
+            switch (event.code) {
+                case 'Tab':
+                    this.trapFocus(event);
+                    break;
+
+                case 'Escape':
+                    this.overlayVisible = false;
+                    event.preventDefault();
+                    break;
+
+                default:
+                    //Noop
+                    break;
+            }
+
+            this.$emit('keydown', event);
+        },
+        onInput(event) {
+            try {
+                this.selectionStart = this.input.selectionStart;
+                this.selectionEnd = this.input.selectionEnd;
+
+                let value = this.parseValue(event.target.value);
+
+                if (this.isValidSelection(value)) {
+                    this.typeUpdate = true;
+                    this.updateModel(value);
+                }
+            } catch (err) {
+                /* NoOp */
+            }
+
+            this.$emit('input', event);
+        },
+        onInputClick() {
+            if (this.showOnFocus && this.isEnabled() && !this.overlayVisible) {
+                this.overlayVisible = true;
+            }
+        },
+        onFocus(event) {
+            if (this.showOnFocus && this.isEnabled()) {
+                this.overlayVisible = true;
+            }
+
+            this.focused = true;
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.$emit('blur', { originalEvent: event, value: event.target.value });
+
+            this.focused = false;
+            event.target.value = this.formatValue(this.modelValue);
+        },
+        onKeyDown(event) {
+            if (event.code === 'ArrowDown' && this.overlay) {
+                this.trapFocus(event);
+            } else if (event.code === 'ArrowDown' && !this.overlay) {
+                this.overlayVisible = true;
+            } else if (event.code === 'Escape') {
+                if (this.overlayVisible) {
+                    this.overlayVisible = false;
+                    event.preventDefault();
+                }
+            } else if (event.code === 'Tab') {
+                if (this.overlay) {
+                    DomHandler.getFocusableElements(this.overlay).forEach((el) => (el.tabIndex = '-1'));
+                }
+
+                if (this.overlayVisible) {
+                    this.overlayVisible = false;
+                }
+            } else if (event.code === 'Enter') {
+                if (this.manualInput && event.target.value !== null && event.target.value?.trim() !== '') {
+                    try {
+                        let value = this.parseValue(event.target.value);
+
+                        if (this.isValidSelection(value)) {
+                            this.overlayVisible = false;
+                        }
+                    } catch (err) {
+                        /* NoOp */
+                    }
+                }
+            }
+        },
+        overlayRef(el) {
+            this.overlay = el;
+        },
+        inputRef(el) {
+            this.input = el ? el.$el : undefined;
+        },
+        previousButtonRef(el) {
+            this.previousButton = el ? el.$el : undefined;
+        },
+        nextButtonRef(el) {
+            this.nextButton = el ? el.$el : undefined;
+        },
+        getMonthName(index) {
+            return this.$primevue.config.locale.monthNames[index];
+        },
+        getYear(month) {
+            return this.currentView === 'month' ? this.currentYear : month.year;
+        },
+        onOverlayClick(event) {
+            if (!this.inline) {
+                OverlayEventBus.emit('overlay-click', {
+                    originalEvent: event,
+                    target: this.$el
+                });
+            }
+        },
+        onOverlayKeyDown(event) {
+            switch (event.code) {
+                case 'Escape':
+                    if (!this.inline) {
+                        this.input.focus();
+                        this.overlayVisible = false;
+                    }
+
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onOverlayMouseUp(event) {
+            this.onOverlayClick(event);
+        },
+        createResponsiveStyle() {
+            if (this.numberOfMonths > 1 && this.responsiveOptions && !this.isUnstyled) {
+                if (!this.responsiveStyleElement) {
+                    this.responsiveStyleElement = document.createElement('style');
+                    this.responsiveStyleElement.type = 'text/css';
+                    DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
+                    document.body.appendChild(this.responsiveStyleElement);
+                }
+
+                let innerHTML = '';
+
+                if (this.responsiveOptions) {
+                    const comparer = ObjectUtils.localeComparator();
+                    let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * comparer(o1.breakpoint, o2.breakpoint));
+
+                    for (let i = 0; i < responsiveOptions.length; i++) {
+                        let { breakpoint, numMonths } = responsiveOptions[i];
+                        let styles = `
+                            .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${numMonths}) .p-datepicker-next {
+                                display: inline-flex;
+                            }
+                        `;
+
+                        for (let j = numMonths; j < this.numberOfMonths; j++) {
+                            styles += `
+                                .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${j + 1}) {
+                                    display: none;
+                                }
+                            `;
+                        }
+
+                        innerHTML += `
+                            @media screen and (max-width: ${breakpoint}) {
+                                ${styles}
+                            }
+                        `;
+                    }
+                }
+
+                this.responsiveStyleElement.innerHTML = innerHTML;
+            }
+        },
+        destroyResponsiveStyleElement() {
+            if (this.responsiveStyleElement) {
+                this.responsiveStyleElement.remove();
+                this.responsiveStyleElement = null;
+            }
+        }
+    },
+    computed: {
+        viewDate() {
+            let propValue = this.modelValue;
+
+            if (propValue && Array.isArray(propValue)) {
+                if (this.isRangeSelection()) {
+                    propValue = this.inline ? propValue[0] : propValue[1] || propValue[0];
+                } else if (this.isMultipleSelection()) {
+                    propValue = propValue[propValue.length - 1];
+                }
+            }
+
+            if (propValue && typeof propValue !== 'string') {
+                return propValue;
+            } else {
+                let today = new Date();
+
+                if (this.maxDate && this.maxDate < today) {
+                    return this.maxDate;
+                }
+
+                if (this.minDate && this.minDate > today) {
+                    return this.minDate;
+                }
+
+                return today;
+            }
+        },
+        inputFieldValue() {
+            return this.formatValue(this.modelValue);
+        },
+        months() {
+            let months = [];
+
+            for (let i = 0; i < this.numberOfMonths; i++) {
+                let month = this.currentMonth + i;
+                let year = this.currentYear;
+
+                if (month > 11) {
+                    month = (month % 11) - 1;
+                    year = year + 1;
+                }
+
+                let dates = [];
+                let firstDay = this.getFirstDayOfMonthIndex(month, year);
+                let daysLength = this.getDaysCountInMonth(month, year);
+                let prevMonthDaysLength = this.getDaysCountInPrevMonth(month, year);
+                let dayNo = 1;
+                let today = new Date();
+                let weekNumbers = [];
+                let monthRows = Math.ceil((daysLength + firstDay) / 7);
+
+                for (let i = 0; i < monthRows; i++) {
+                    let week = [];
+
+                    if (i == 0) {
+                        for (let j = prevMonthDaysLength - firstDay + 1; j <= prevMonthDaysLength; j++) {
+                            let prev = this.getPreviousMonthAndYear(month, year);
+
+                            week.push({ day: j, month: prev.month, year: prev.year, otherMonth: true, today: this.isToday(today, j, prev.month, prev.year), selectable: this.isSelectable(j, prev.month, prev.year, true) });
+                        }
+
+                        let remainingDaysLength = 7 - week.length;
+
+                        for (let j = 0; j < remainingDaysLength; j++) {
+                            week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year), selectable: this.isSelectable(dayNo, month, year, false) });
+                            dayNo++;
+                        }
+                    } else {
+                        for (let j = 0; j < 7; j++) {
+                            if (dayNo > daysLength) {
+                                let next = this.getNextMonthAndYear(month, year);
+
+                                week.push({
+                                    day: dayNo - daysLength,
+                                    month: next.month,
+                                    year: next.year,
+                                    otherMonth: true,
+                                    today: this.isToday(today, dayNo - daysLength, next.month, next.year),
+                                    selectable: this.isSelectable(dayNo - daysLength, next.month, next.year, true)
+                                });
+                            } else {
+                                week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year), selectable: this.isSelectable(dayNo, month, year, false) });
+                            }
+
+                            dayNo++;
+                        }
+                    }
+
+                    if (this.showWeek) {
+                        weekNumbers.push(this.getWeekNumber(new Date(week[0].year, week[0].month, week[0].day)));
+                    }
+
+                    dates.push(week);
+                }
+
+                months.push({
+                    month: month,
+                    year: year,
+                    dates: dates,
+                    weekNumbers: weekNumbers
+                });
+            }
+
+            return months;
+        },
+        weekDays() {
+            let weekDays = [];
+            let dayIndex = this.$primevue.config.locale.firstDayOfWeek;
+
+            for (let i = 0; i < 7; i++) {
+                weekDays.push(this.$primevue.config.locale.dayNamesMin[dayIndex]);
+                dayIndex = dayIndex == 6 ? 0 : ++dayIndex;
+            }
+
+            return weekDays;
+        },
+        ticksTo1970() {
+            return ((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000;
+        },
+        sundayIndex() {
+            return this.$primevue.config.locale.firstDayOfWeek > 0 ? 7 - this.$primevue.config.locale.firstDayOfWeek : 0;
+        },
+        datePattern() {
+            return this.dateFormat || this.$primevue.config.locale.dateFormat;
+        },
+        yearOptions() {
+            if (this.yearRange) {
+                let $vm = this;
+                const years = this.yearRange.split(':');
+                let yearStart = parseInt(years[0]);
+                let yearEnd = parseInt(years[1]);
+                let yearOptions = [];
+
+                if (this.currentYear < yearStart) {
+                    $vm.currentYear = yearEnd;
+                } else if (this.currentYear > yearEnd) {
+                    $vm.currentYear = yearStart;
+                }
+
+                for (let i = yearStart; i <= yearEnd; i++) {
+                    yearOptions.push(i);
+                }
+
+                return yearOptions;
+            } else {
+                return null;
+            }
+        },
+        monthPickerValues() {
+            let monthPickerValues = [];
+
+            const isSelectableMonth = (baseMonth) => {
+                if (this.minDate) {
+                    const minMonth = this.minDate.getMonth();
+                    const minYear = this.minDate.getFullYear();
+
+                    if (this.currentYear < minYear || (this.currentYear === minYear && baseMonth < minMonth)) {
+                        return false;
+                    }
+                }
+
+                if (this.maxDate) {
+                    const maxMonth = this.maxDate.getMonth();
+                    const maxYear = this.maxDate.getFullYear();
+
+                    if (this.currentYear > maxYear || (this.currentYear === maxYear && baseMonth > maxMonth)) {
+                        return false;
+                    }
+                }
+
+                return true;
+            };
+
+            for (let i = 0; i <= 11; i++) {
+                monthPickerValues.push({ value: this.$primevue.config.locale.monthNamesShort[i], selectable: isSelectableMonth(i) });
+            }
+
+            return monthPickerValues;
+        },
+        yearPickerValues() {
+            let yearPickerValues = [];
+            let base = this.currentYear - (this.currentYear % 10);
+
+            const isSelectableYear = (baseYear) => {
+                if (this.minDate) {
+                    if (this.minDate.getFullYear() > baseYear) return false;
+                }
+
+                if (this.maxDate) {
+                    if (this.maxDate.getFullYear() < baseYear) return false;
+                }
+
+                return true;
+            };
+
+            for (let i = 0; i < 10; i++) {
+                yearPickerValues.push({ value: base + i, selectable: isSelectableYear(base + i) });
+            }
+
+            return yearPickerValues;
+        },
+        formattedCurrentHour() {
+            return this.currentHour < 10 ? '0' + this.currentHour : this.currentHour;
+        },
+        formattedCurrentMinute() {
+            return this.currentMinute < 10 ? '0' + this.currentMinute : this.currentMinute;
+        },
+        formattedCurrentSecond() {
+            return this.currentSecond < 10 ? '0' + this.currentSecond : this.currentSecond;
+        },
+        todayLabel() {
+            return this.$primevue.config.locale.today;
+        },
+        clearLabel() {
+            return this.$primevue.config.locale.clear;
+        },
+        weekHeaderLabel() {
+            return this.$primevue.config.locale.weekHeader;
+        },
+        monthNames() {
+            return this.$primevue.config.locale.monthNames;
+        },
+        attributeSelector() {
+            return UniqueComponentId();
+        },
+        switchViewButtonDisabled() {
+            return this.numberOfMonths > 1 || this.disabled;
+        },
+        panelId() {
+            return this.d_id + '_panel';
+        }
+    },
+    components: {
+        InputText,
+        Button,
+        Portal,
+        CalendarIcon,
+        ChevronLeftIcon,
+        ChevronRightIcon,
+        ChevronUpIcon,
+        ChevronDownIcon
+    },
+    directives: {
+        ripple: Ripple
+    }
+};
+</script>
diff --git a/components/lib/datepicker/package.json b/components/lib/datepicker/package.json
new file mode 100644
index 000000000..ee343b508
--- /dev/null
+++ b/components/lib/datepicker/package.json
@@ -0,0 +1,9 @@
+{
+    "main": "./datepicker.cjs.js",
+    "module": "./datepicker.esm.js",
+    "unpkg": "./datepicker.min.js",
+    "types": "./DatePicker.d.ts",
+    "browser": {
+        "./sfc": "./DatePicker.vue"
+    }
+}
diff --git a/components/lib/datepicker/style/DatePickerStyle.d.ts b/components/lib/datepicker/style/DatePickerStyle.d.ts
new file mode 100644
index 000000000..94bd7f56d
--- /dev/null
+++ b/components/lib/datepicker/style/DatePickerStyle.d.ts
@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style';
+
+export interface DatePickerStyle extends BaseStyle {}
diff --git a/components/lib/datepicker/style/DatePickerStyle.js b/components/lib/datepicker/style/DatePickerStyle.js
new file mode 100644
index 000000000..80906eb53
--- /dev/null
+++ b/components/lib/datepicker/style/DatePickerStyle.js
@@ -0,0 +1,68 @@
+import BaseStyle from 'primevue/base/style';
+
+const inlineStyles = {
+    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
+};
+
+const classes = {
+    root: ({ props, state }) => [
+        'p-datepicker p-component p-inputwrapper',
+        {
+            'p-invalid': props.invalid,
+            'p-inputwrapper-filled': props.modelValue,
+            'p-inputwrapper-focus': state.focused,
+            'p-focus': state.focused || state.overlayVisible
+        }
+    ],
+    input: 'p-datepicker-input',
+    dropdownButton: 'p-datepicker-dropdown',
+    inputIconContainer: 'p-datepicker-input-icon-container',
+    inputIcon: 'p-datepicker-input-icon',
+    panel: ({ instance, props }) => [
+        'p-datepicker-panel p-component',
+        {
+            'p-datepicker-panel-inline': props.inline,
+            'p-disabled': props.disabled,
+            'p-datepicker-timeonly': props.timeOnly,
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    group: 'p-datepicker-calendar-container',
+    calendar: 'p-datepicker-calendar',
+    header: 'p-datepicker-header',
+    previousButton: 'p-datepicker-prev-button',
+    title: 'p-datepicker-title',
+    monthTitle: 'p-datepicker-view-month p-link',
+    yearTitle: 'p-datepicker-view-year p-link',
+    decadeTitle: 'p-datepicker-decade',
+    nextButton: 'p-datepicker-next-button',
+    grid: 'p-datepicker-day-view',
+    weekHeader: 'p-datepicker-weekheader p-disabled',
+    weekNumber: 'p-datepicker-weeknumber',
+    weekLabelContainer: 'p-disabled',
+    weekDay: 'p-datepicker-weekday-cell',
+    weekDayLabel: 'p-date-picker-weekday',
+    day: ({ date }) => ['p-datepicker-day-cell', { 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
+    dayLabel: ({ instance, props, date }) => ['p-datepicker-day', { 'p-datepicker-day-selected': instance.isSelected(date) && date.selectable, 'p-disabled': props.disabled || !date.selectable }],
+    monthPicker: 'p-datepicker-month-view',
+    month: ({ instance, props, month, index }) => ['p-datepicker-month', { 'p-datepicker-month-selected': instance.isMonthSelected(index), 'p-disabled': props.disabled || !month.selectable }],
+    yearPicker: 'p-datepicker-year-view',
+    year: ({ instance, props, year }) => ['p-datepicker-year', { 'p-datepicker-year-selected': instance.isYearSelected(year.value), 'p-disabled': props.disabled || !year.selectable }],
+    timePicker: 'p-datepicker-time-picker',
+    hourPicker: 'p-datepicker-hour-picker',
+    incrementButton: 'p-datepicker-increment-button',
+    decrementButton: 'p-datepicker-decrement-button',
+    separatorContainer: 'p-datepicker-separator',
+    minutePicker: 'p-minute-picker',
+    secondPicker: 'p-second-picker',
+    ampmPicker: 'p-ampm-picker',
+    buttonbar: 'p-datepicker-buttonbar',
+    todayButton: 'p-datepicker-today-button',
+    clearButton: 'p-datepicker-clear-button'
+};
+
+export default BaseStyle.extend({
+    name: 'datepicker',
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/datepicker/style/package.json b/components/lib/datepicker/style/package.json
new file mode 100644
index 000000000..b32933c11
--- /dev/null
+++ b/components/lib/datepicker/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./datepickerstyle.cjs.js",
+    "module": "./datepickerstyle.esm.js",
+    "unpkg": "./datepickerstyle.min.js",
+    "types": "./DatePickerStyle.d.ts"
+}
diff --git a/components/lib/themes/primeone/base/calendar/index.js b/components/lib/themes/primeone/base/datepicker/index.js
similarity index 69%
rename from components/lib/themes/primeone/base/calendar/index.js
rename to components/lib/themes/primeone/base/datepicker/index.js
index fe86a00b4..16af756f9 100644
--- a/components/lib/themes/primeone/base/calendar/index.js
+++ b/components/lib/themes/primeone/base/datepicker/index.js
@@ -24,27 +24,27 @@ export default {
     justify-content: center;
     overflow: hidden;
     position: relative;
-    width: ${dt('calendar.dropdown.width')};
+    width: ${dt('datepicker.dropdown.width')};
     border-top-right-radius: ${dt('rounded.base')};
     border-bottom-right-radius: ${dt('rounded.base')};
-    background: ${dt('calendar.dropdown.background')};
-    border: 1px solid ${dt('calendar.dropdown.border.color')};
+    background: ${dt('datepicker.dropdown.background')};
+    border: 1px solid ${dt('datepicker.dropdown.border.color')};
     border-left: 0 none;
-    background: ${dt('calendar.dropdown.background')};
+    background: ${dt('datepicker.dropdown.background')};
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 
 .p-datepicker-dropdown:not(:disabled):hover {
-    background: ${dt('calendar.dropdown.hover.background')};
-    border-color: ${dt('calendar.dropdown.hover.border.color')};
-    background: ${dt('calendar.dropdown.hover.background')};
+    background: ${dt('datepicker.dropdown.hover.background')};
+    border-color: ${dt('datepicker.dropdown.hover.border.color')};
+    background: ${dt('datepicker.dropdown.hover.background')};
 }
 
 .p-datepicker-dropdown:not(:disabled):active {
-    background: ${dt('calendar.dropdown.active.background')};
-    border-color: ${dt('calendar.dropdown.active.border.color')};
-    background: ${dt('calendar.dropdown.active.background')};
+    background: ${dt('datepicker.dropdown.active.background')};
+    border-color: ${dt('datepicker.dropdown.active.border.color')};
+    background: ${dt('datepicker.dropdown.active.background')};
 }
 
 .p-datepicker-dropdown:focus-visible {
@@ -83,9 +83,9 @@ export default {
 .p-datepicker-panel {
     width: auto;
     padding: 0.75rem;
-    background: ${dt('calendar.background')};
-    color: ${dt('calendar.color')};
-    border: 1px solid ${dt('calendar.border.color')};
+    background: ${dt('datepicker.background')};
+    color: ${dt('datepicker.color')};
+    border: 1px solid ${dt('datepicker.border.color')};
     border-radius: ${dt('rounded.base')};
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
 }
@@ -102,9 +102,9 @@ export default {
     justify-content: space-between;
     padding: 0 0 0.5rem 0;
     font-weight: 500;
-    background: ${dt('calendar.header.background')};
-    color: ${dt('calendar.header.color')};
-    border-bottom: 1px solid ${dt('calendar.header.border.color')};
+    background: ${dt('datepicker.header.background')};
+    color: ${dt('datepicker.header.color')};
+    border-bottom: 1px solid ${dt('datepicker.header.border.color')};
 }
 
 .p-datepicker-title {
@@ -121,43 +121,43 @@ export default {
 
 .p-datepicker-view-month {
     margin-right: 0.5rem;
-    color: ${dt('calendar.month.picker.color')};
+    color: ${dt('datepicker.month.picker.color')};
 }
 
 .p-datepicker-view-year {
     margin-right: 0.5rem;
-    color: ${dt('calendar.year.picker.color')};
+    color: ${dt('datepicker.year.picker.color')};
 }
 
 .p-datepicker-view-month:enabled:hover {
-    background: ${dt('calendar.month.picker.hover.background')};
-    color: ${dt('calendar.month.picker.hover.color')};
+    background: ${dt('datepicker.month.picker.hover.background')};
+    color: ${dt('datepicker.month.picker.hover.color')};
 }
 
 .p-datepicker-view-year:enabled:hover {
-    background: ${dt('calendar.year.picker.hover.background')};
-    color: ${dt('calendar.year.picker.hover.color')};
+    background: ${dt('datepicker.year.picker.hover.background')};
+    color: ${dt('datepicker.year.picker.hover.color')};
 }
 
-.p-datepicker-calendar-container {
+.p-datepicker-datepicker-container {
     display: flex;
 }
 
-.p-datepicker-calendar-container .p-datepicker-calendar {
+.p-datepicker-datepicker-container .p-datepicker-datepicker {
     flex: 1 1 auto;
-    border-left: 1px solid ${dt('calendar.group.border.color')};
+    border-left: 1px solid ${dt('datepicker.group.border.color')};
     padding-right: 0.75rem;
     padding-left: 0.75rem;
     padding-top: 0;
     padding-bottom: 0;
 }
 
-.p-datepicker-calendar-container .p-datepicker-calendar:first-child {
+.p-datepicker-datepicker-container .p-datepicker-datepicker:first-child {
     padding-left: 0;
     border-left: 0 none;
 }
 
-.p-datepicker-calendar-container .p-datepicker-calendar:last-child {
+.p-datepicker-datepicker-container .p-datepicker-datepicker:last-child {
     padding-right: 0;
 }
 
@@ -194,12 +194,12 @@ export default {
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     border: 1px solid transparent;
     outline-color: transparent;
-    color: ${dt('calendar.date.color')};
+    color: ${dt('datepicker.date.color')};
 }
 
 .p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {
-    background: ${dt('calendar.date.hover.background')};
-    color: ${dt('calendar.date.hover.color')};
+    background: ${dt('datepicker.date.hover.background')};
+    color: ${dt('datepicker.date.hover.color')};
 }
 
 .p-datepicker-day:focus-visible {
@@ -208,18 +208,18 @@ export default {
 }
 
 .p-datepicker-day-selected {
-    background: ${dt('calendar.date.selected.background')};
-    color: ${dt('calendar.date.selected.color')};
+    background: ${dt('datepicker.date.selected.background')};
+    color: ${dt('datepicker.date.selected.color')};
 }
 
 .p-datepicker-today > .p-datepicker-day {
-    background: ${dt('calendar.today.background')};
-    color: ${dt('calendar.today.color')};
+    background: ${dt('datepicker.today.background')};
+    color: ${dt('datepicker.today.color')};
 }
 
 .p-datepicker-today > .p-datepicker-day-selected {
-    background: ${dt('calendar.date.selected.background')};
-    color: ${dt('calendar.date.selected.color')};
+    background: ${dt('datepicker.date.selected.background')};
+    color: ${dt('datepicker.date.selected.color')};
 }
 
 .p-datepicker-month-view {
@@ -238,17 +238,17 @@ export default {
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     border-radius: ${dt('rounded.base')};
     outline-color: transparent;
-    color: ${dt('calendar.month.color')};
+    color: ${dt('datepicker.month.color')};
 }
 
 .p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
-    color:  ${dt('calendar.month.hover.color')};
-    background: ${dt('calendar.month.hover.background')};
+    color:  ${dt('datepicker.month.hover.color')};
+    background: ${dt('datepicker.month.hover.background')};
 }
 
 .p-datepicker-month-selected {
-    color: ${dt('calendar.month.selected.color')};
-    background: ${dt('calendar.month.selected.background')};
+    color: ${dt('datepicker.month.selected.color')};
+    background: ${dt('datepicker.month.selected.background')};
 }
 
 .p-datepicker-month:not(.p-disabled):focus-visible {
@@ -272,17 +272,17 @@ export default {
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     border-radius: ${dt('rounded.base')};
     outline-color: transparent;
-    color: ${dt('calendar.year.color')};
+    color: ${dt('datepicker.year.color')};
 }
 
 .p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
-    color:  ${dt('calendar.year.hover.color')};
-    background: ${dt('calendar.year.hover.background')};
+    color:  ${dt('datepicker.year.hover.color')};
+    background: ${dt('datepicker.year.hover.background')};
 }
 
 .p-datepicker-year-selected {
-    color: ${dt('calendar.year.selected.color')};
-    background: ${dt('calendar.year.selected.background')};
+    color: ${dt('datepicker.year.selected.color')};
+    background: ${dt('datepicker.year.selected.background')};
 }
 
 .p-datepicker-year:not(.p-disabled):focus-visible {
@@ -295,7 +295,7 @@ export default {
     justify-content: space-between;
     align-items: center;
     padding: 0.5rem 0 0 0;
-    border-top: 1px solid ${dt('calendar.buttonbar.border.color')};
+    border-top: 1px solid ${dt('datepicker.buttonbar.border.color')};
 }
 
 .p-datepicker-buttonbar .p-button {
@@ -306,11 +306,11 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    border-top: 1px solid ${dt('calendar.timepicker.border.color')};
+    border-top: 1px solid ${dt('datepicker.timepicker.border.color')};
     padding: 0;
 }
 
-.p-datepicker-calendar-group + .p-timepicker {
+.p-datepicker-datepicker-group + .p-timepicker {
     margin-top: 0.5rem;
     padding-top: 0.5rem;
 }
diff --git a/components/lib/themes/primeone/base/calendar/package.json b/components/lib/themes/primeone/base/datepicker/package.json
similarity index 100%
rename from components/lib/themes/primeone/base/calendar/package.json
rename to components/lib/themes/primeone/base/datepicker/package.json
diff --git a/components/lib/themes/primeone/base/index.js b/components/lib/themes/primeone/base/index.js
index c44ccf789..e05855290 100644
--- a/components/lib/themes/primeone/base/index.js
+++ b/components/lib/themes/primeone/base/index.js
@@ -6,23 +6,22 @@ import blockui from 'primevue/themes/primeone/base/blockui';
 import breadcrumb from 'primevue/themes/primeone/base/breadcrumb';
 import button from 'primevue/themes/primeone/base/button';
 import buttongroup from 'primevue/themes/primeone/base/buttongroup';
-import calendar from 'primevue/themes/primeone/base/calendar';
 import card from 'primevue/themes/primeone/base/card';
 import carousel from 'primevue/themes/primeone/base/carousel';
 import cascadeselect from 'primevue/themes/primeone/base/cascadeselect';
 import checkbox from 'primevue/themes/primeone/base/checkbox';
 import chip from 'primevue/themes/primeone/base/chip';
-import chips from 'primevue/themes/primeone/base/chips';
 import colorpicker from 'primevue/themes/primeone/base/colorpicker';
 import confirmdialog from 'primevue/themes/primeone/base/confirmdialog';
 import confirmpopup from 'primevue/themes/primeone/base/confirmpopup';
 import contextmenu from 'primevue/themes/primeone/base/contextmenu';
 import datatable from 'primevue/themes/primeone/base/datatable';
 import dataview from 'primevue/themes/primeone/base/dataview';
+import datepicker from 'primevue/themes/primeone/base/datepicker';
 import dialog from 'primevue/themes/primeone/base/dialog';
 import divider from 'primevue/themes/primeone/base/divider';
 import dock from 'primevue/themes/primeone/base/dock';
-import dropdown from 'primevue/themes/primeone/base/dropdown';
+import drawer from 'primevue/themes/primeone/base/drawer';
 import editor from 'primevue/themes/primeone/base/editor';
 import fieldset from 'primevue/themes/primeone/base/fieldset';
 import fileupload from 'primevue/themes/primeone/base/fileupload';
@@ -33,10 +32,10 @@ import iconfield from 'primevue/themes/primeone/base/iconfield';
 import image from 'primevue/themes/primeone/base/image';
 import inlinemessage from 'primevue/themes/primeone/base/inlinemessage';
 import inplace from 'primevue/themes/primeone/base/inplace';
+import inputchips from 'primevue/themes/primeone/base/inputchips';
 import inputgroup from 'primevue/themes/primeone/base/inputgroup';
 import inputnumber from 'primevue/themes/primeone/base/inputnumber';
 import inputotp from 'primevue/themes/primeone/base/inputotp';
-import inputswitch from 'primevue/themes/primeone/base/inputswitch';
 import inputtext from 'primevue/themes/primeone/base/inputtext';
 import knob from 'primevue/themes/primeone/base/knob';
 import listbox from 'primevue/themes/primeone/base/listbox';
@@ -48,20 +47,20 @@ import metergroup from 'primevue/themes/primeone/base/metergroup';
 import multiselect from 'primevue/themes/primeone/base/multiselect';
 import orderlist from 'primevue/themes/primeone/base/orderlist';
 import organizationchart from 'primevue/themes/primeone/base/organizationchart';
-import overlaypanel from 'primevue/themes/primeone/base/overlaypanel';
 import paginator from 'primevue/themes/primeone/base/paginator';
 import panel from 'primevue/themes/primeone/base/panel';
 import panelmenu from 'primevue/themes/primeone/base/panelmenu';
 import password from 'primevue/themes/primeone/base/password';
 import picklist from 'primevue/themes/primeone/base/picklist';
+import popover from 'primevue/themes/primeone/base/popover';
 import progressbar from 'primevue/themes/primeone/base/progressbar';
 import progressspinner from 'primevue/themes/primeone/base/progressspinner';
 import radiobutton from 'primevue/themes/primeone/base/radiobutton';
 import rating from 'primevue/themes/primeone/base/rating';
 import scrollpanel from 'primevue/themes/primeone/base/scrollpanel';
 import scrolltop from 'primevue/themes/primeone/base/scrolltop';
+import select from 'primevue/themes/primeone/base/select';
 import selectbutton from 'primevue/themes/primeone/base/selectbutton';
-import sidebar from 'primevue/themes/primeone/base/sidebar';
 import skeleton from 'primevue/themes/primeone/base/skeleton';
 import slider from 'primevue/themes/primeone/base/slider';
 import speeddial from 'primevue/themes/primeone/base/speeddial';
@@ -78,6 +77,7 @@ import tieredmenu from 'primevue/themes/primeone/base/tieredmenu';
 import timeline from 'primevue/themes/primeone/base/timeline';
 import toast from 'primevue/themes/primeone/base/toast';
 import togglebutton from 'primevue/themes/primeone/base/togglebutton';
+import toggleswitch from 'primevue/themes/primeone/base/toggleswitch';
 import toolbar from 'primevue/themes/primeone/base/toolbar';
 import tooltip from 'primevue/themes/primeone/base/tooltip';
 import tree from 'primevue/themes/primeone/base/tree';
@@ -95,22 +95,21 @@ export default {
         breadcrumb,
         button,
         buttongroup,
-        calendar,
         card,
         carousel,
         cascadeselect,
         checkbox,
         chip,
-        chips,
         colorpicker,
         confirmdialog,
         confirmpopup,
         contextmenu,
-        dataview,
         datatable,
+        dataview,
+        datepicker,
         dialog,
         divider,
-        dropdown,
+        drawer,
         dock,
         editor,
         fieldset,
@@ -121,10 +120,11 @@ export default {
         image,
         inlinemessage,
         inplace,
+        inputchips,
         inputgroup,
         inputnumber,
         inputotp,
-        inputswitch,
+        toggleswitch,
         inputtext,
         knob,
         listbox,
@@ -136,7 +136,7 @@ export default {
         multiselect,
         orderlist,
         organizationchart,
-        overlaypanel,
+        popover,
         paginator,
         password,
         panel,
@@ -148,9 +148,9 @@ export default {
         rating,
         scrollpanel,
         scrolltop,
+        select,
         selectbutton,
         skeleton,
-        sidebar,
         slider,
         speeddial,
         splitter,
diff --git a/components/lib/themes/primeone/presets/aura/calendar/index.js b/components/lib/themes/primeone/presets/aura/datepicker/index.js
similarity index 100%
rename from components/lib/themes/primeone/presets/aura/calendar/index.js
rename to components/lib/themes/primeone/presets/aura/datepicker/index.js
diff --git a/components/lib/themes/primeone/presets/aura/calendar/package.json b/components/lib/themes/primeone/presets/aura/datepicker/package.json
similarity index 100%
rename from components/lib/themes/primeone/presets/aura/calendar/package.json
rename to components/lib/themes/primeone/presets/aura/datepicker/package.json
diff --git a/components/lib/themes/primeone/presets/aura/index.js b/components/lib/themes/primeone/presets/aura/index.js
index 4565a79c2..e5195b58c 100644
--- a/components/lib/themes/primeone/presets/aura/index.js
+++ b/components/lib/themes/primeone/presets/aura/index.js
@@ -6,23 +6,22 @@ import blockui from 'primevue/themes/primeone/presets/aura/blockui';
 import breadcrumb from 'primevue/themes/primeone/presets/aura/breadcrumb';
 import button from 'primevue/themes/primeone/presets/aura/button';
 import buttongroup from 'primevue/themes/primeone/presets/aura/buttongroup';
-import calendar from 'primevue/themes/primeone/presets/aura/calendar';
 import card from 'primevue/themes/primeone/presets/aura/card';
 import carousel from 'primevue/themes/primeone/presets/aura/carousel';
 import cascadeselect from 'primevue/themes/primeone/presets/aura/cascadeselect';
 import checkbox from 'primevue/themes/primeone/presets/aura/checkbox';
 import chip from 'primevue/themes/primeone/presets/aura/chip';
-import chips from 'primevue/themes/primeone/presets/aura/chips';
 import colorpicker from 'primevue/themes/primeone/presets/aura/colorpicker';
 import confirmdialog from 'primevue/themes/primeone/presets/aura/confirmdialog';
 import confirmpopup from 'primevue/themes/primeone/presets/aura/confirmpopup';
 import contextmenu from 'primevue/themes/primeone/presets/aura/contextmenu';
 import datatable from 'primevue/themes/primeone/presets/aura/datatable';
 import dataview from 'primevue/themes/primeone/presets/aura/dataview';
+import datepicker from 'primevue/themes/primeone/presets/aura/datepicker';
 import dialog from 'primevue/themes/primeone/presets/aura/dialog';
 import divider from 'primevue/themes/primeone/presets/aura/divider';
 import dock from 'primevue/themes/primeone/presets/aura/dock';
-import dropdown from 'primevue/themes/primeone/presets/aura/dropdown';
+import drawer from 'primevue/themes/primeone/presets/aura/drawer';
 import editor from 'primevue/themes/primeone/presets/aura/editor';
 import fieldset from 'primevue/themes/primeone/presets/aura/fieldset';
 import fileupload from 'primevue/themes/primeone/presets/aura/fileupload';
@@ -32,10 +31,10 @@ import iconfield from 'primevue/themes/primeone/presets/aura/iconfield';
 import image from 'primevue/themes/primeone/presets/aura/image';
 import inlinemessage from 'primevue/themes/primeone/presets/aura/inlinemessage';
 import inplace from 'primevue/themes/primeone/presets/aura/inplace';
+import inputchips from 'primevue/themes/primeone/presets/aura/inputchips';
 import inputgroup from 'primevue/themes/primeone/presets/aura/inputgroup';
 import inputnumber from 'primevue/themes/primeone/presets/aura/inputnumber';
 import inputotp from 'primevue/themes/primeone/presets/aura/inputotp';
-import inputswitch from 'primevue/themes/primeone/presets/aura/inputswitch';
 import inputtext from 'primevue/themes/primeone/presets/aura/inputtext';
 import knob from 'primevue/themes/primeone/presets/aura/knob';
 import listbox from 'primevue/themes/primeone/presets/aura/listbox';
@@ -47,20 +46,20 @@ import metergroup from 'primevue/themes/primeone/presets/aura/metergroup';
 import multiselect from 'primevue/themes/primeone/presets/aura/multiselect';
 import orderlist from 'primevue/themes/primeone/presets/aura/orderlist';
 import organizationchart from 'primevue/themes/primeone/presets/aura/organizationchart';
-import overlaypanel from 'primevue/themes/primeone/presets/aura/overlaypanel';
 import paginator from 'primevue/themes/primeone/presets/aura/paginator';
 import panel from 'primevue/themes/primeone/presets/aura/panel';
 import panelmenu from 'primevue/themes/primeone/presets/aura/panelmenu';
 import password from 'primevue/themes/primeone/presets/aura/password';
 import picklist from 'primevue/themes/primeone/presets/aura/picklist';
+import popover from 'primevue/themes/primeone/presets/aura/popover';
 import progressbar from 'primevue/themes/primeone/presets/aura/progressbar';
 import progressspinner from 'primevue/themes/primeone/presets/aura/progressspinner';
 import radiobutton from 'primevue/themes/primeone/presets/aura/radiobutton';
 import rating from 'primevue/themes/primeone/presets/aura/rating';
 import scrollpanel from 'primevue/themes/primeone/presets/aura/scrollpanel';
 import scrolltop from 'primevue/themes/primeone/presets/aura/scrolltop';
+import select from 'primevue/themes/primeone/presets/aura/select';
 import selectbutton from 'primevue/themes/primeone/presets/aura/selectbutton';
-import sidebar from 'primevue/themes/primeone/presets/aura/sidebar';
 import skeleton from 'primevue/themes/primeone/presets/aura/skeleton';
 import slider from 'primevue/themes/primeone/presets/aura/slider';
 import speeddial from 'primevue/themes/primeone/presets/aura/speeddial';
@@ -77,6 +76,7 @@ import tieredmenu from 'primevue/themes/primeone/presets/aura/tieredmenu';
 import timeline from 'primevue/themes/primeone/presets/aura/timeline';
 import toast from 'primevue/themes/primeone/presets/aura/toast';
 import togglebutton from 'primevue/themes/primeone/presets/aura/togglebutton';
+import toggleswitch from 'primevue/themes/primeone/presets/aura/toggleswitch';
 import toolbar from 'primevue/themes/primeone/presets/aura/toolbar';
 import tooltip from 'primevue/themes/primeone/presets/aura/tooltip';
 import tree from 'primevue/themes/primeone/presets/aura/tree';
@@ -240,13 +240,12 @@ export default {
         breadcrumb,
         button,
         buttongroup,
-        calendar,
+        datepicker,
         card,
         carousel,
         cascadeselect,
         checkbox,
         chip,
-        chips,
         colorpicker,
         confirmdialog,
         confirmpopup,
@@ -256,7 +255,7 @@ export default {
         dialog,
         divider,
         dock,
-        dropdown,
+        drawer,
         editor,
         fieldset,
         fileupload,
@@ -266,10 +265,11 @@ export default {
         image,
         inlinemessage,
         inplace,
+        inputchips,
         inputgroup,
         inputnumber,
         inputotp,
-        inputswitch,
+        toggleswitch,
         inputtext,
         knob,
         listbox,
@@ -281,7 +281,7 @@ export default {
         multiselect,
         orderlist,
         organizationchart,
-        overlaypanel,
+        popover,
         paginator,
         password,
         panel,
@@ -293,9 +293,9 @@ export default {
         rating,
         scrollpanel,
         scrolltop,
+        select,
         selectbutton,
         skeleton,
-        sidebar,
         slider,
         speeddial,
         splitter,
diff --git a/modules/nuxt-primevue/runtime/core/components/index.js b/modules/nuxt-primevue/runtime/core/components/index.js
index 0f0b7277f..da87b0bab 100644
--- a/modules/nuxt-primevue/runtime/core/components/index.js
+++ b/modules/nuxt-primevue/runtime/core/components/index.js
@@ -5,10 +5,12 @@ const form = [
     'Checkbox',
     'Chips',
     'ColorPicker',
+    'DatePicker',
     'Dropdown',
     'Editor',
     'FloatLabel',
     'IconField',
+    'InputChips',
     'InputGroup',
     'InputGroupAddon',
     'InputIcon',
@@ -23,10 +25,12 @@ const form = [
     'Password',
     'RadioButton',
     'Rating',
+    'Select',
     'SelectButton',
     'Slider',
     'Textarea',
     'ToggleButton',
+    'ToggleSwitch',
     'TreeSelect'
 ];
 
@@ -36,7 +40,16 @@ const data = ['Column', 'Row', 'ColumnGroup', 'DataTable', 'DataView', 'OrderLis
 
 const panel = ['Accordion', 'AccordionTab', 'Card', 'DeferredContent', 'Divider', 'Fieldset', 'Panel', 'ScrollPanel', 'Splitter', 'SplitterPanel', 'Stepper', 'StepperPanel', 'TabView', 'TabPanel', 'Toolbar'];
 
-const overlay = [{ name: 'ConfirmDialog', use: { as: 'ConfirmationService' } }, { name: 'ConfirmPopup', use: { as: 'ConfirmationService' } }, 'Dialog', { name: 'DynamicDialog', use: { as: 'DialogService' } }, 'OverlayPanel', 'Sidebar'];
+const overlay = [
+    { name: 'ConfirmDialog', use: { as: 'ConfirmationService' } },
+    { name: 'ConfirmPopup', use: { as: 'ConfirmationService' } },
+    'Dialog',
+    'Drawer',
+    { name: 'DynamicDialog', use: { as: 'DialogService' } },
+    'OverlayPanel',
+    'Popover',
+    'Sidebar'
+];
 
 const file = ['FileUpload'];
 
diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js
index ab9e086bc..4346d1e56 100644
--- a/nuxt-vite.config.js
+++ b/nuxt-vite.config.js
@@ -34,10 +34,12 @@ const STYLE_ALIAS = {
     'primevue/contextmenu/style': path.resolve(__dirname, './components/lib/contextmenu/style/ContextMenuStyle.js'),
     'primevue/datatable/style': path.resolve(__dirname, './components/lib/datatable/style/DataTableStyle.js'),
     'primevue/dataview/style': path.resolve(__dirname, './components/lib/dataview/style/DataViewStyle.js'),
+    'primevue/datepicker/style': path.resolve(__dirname, './components/lib/datepicker/style/DatePickerStyle.js'),
     'primevue/deferredcontent/style': path.resolve(__dirname, './components/lib/deferredcontent/style/DeferredContentStyle.js'),
     'primevue/dialog/style': path.resolve(__dirname, './components/lib/dialog/style/DialogStyle.js'),
     'primevue/divider/style': path.resolve(__dirname, './components/lib/divider/style/DividerStyle.js'),
     'primevue/dock/style': path.resolve(__dirname, './components/lib/dock/style/DockStyle.js'),
+    'primevue/drawer/style': path.resolve(__dirname, './components/lib/drawer/style/DrawerStyle.js'),
     'primevue/dropdown/style': path.resolve(__dirname, './components/lib/dropdown/style/DropdownStyle.js'),
     'primevue/dynamicdialog/style': path.resolve(__dirname, './components/lib/dynamicdialog/style/DynamicDialogStyle.js'),
     'primevue/editor/style': path.resolve(__dirname, './components/lib/editor/style/EditorStyle.js'),
@@ -50,6 +52,7 @@ const STYLE_ALIAS = {
     'primevue/iconfield/style': path.resolve(__dirname, './components/lib/iconfield/style/IconFieldStyle.js'),
     'primevue/inlinemessage/style': path.resolve(__dirname, './components/lib/inlinemessage/style/InlineMessageStyle.js'),
     'primevue/inplace/style': path.resolve(__dirname, './components/lib/inplace/style/InplaceStyle.js'),
+    'primevue/inputchips/style': path.resolve(__dirname, './components/lib/inputchips/style/InputChipsStyle.js'),
     'primevue/inputgroup/style': path.resolve(__dirname, './components/lib/inputgroup/style/InputGroupStyle.js'),
     'primevue/inputgroupaddon/style': path.resolve(__dirname, './components/lib/inputgroupaddon/style/InputGroupAddonStyle.js'),
     'primevue/inputicon/style': path.resolve(__dirname, './components/lib/inputicon/style/InputIconStyle.js'),
@@ -74,6 +77,7 @@ const STYLE_ALIAS = {
     'primevue/panelmenu/style': path.resolve(__dirname, './components/lib/panelmenu/style/PanelMenuStyle.js'),
     'primevue/password/style': path.resolve(__dirname, './components/lib/password/style/PasswordStyle.js'),
     'primevue/picklist/style': path.resolve(__dirname, './components/lib/picklist/style/PickListStyle.js'),
+    'primevue/popover/style': path.resolve(__dirname, './components/lib/popover/style/PopoverStyle.js'),
     'primevue/portal/style': path.resolve(__dirname, './components/lib/portal/style/PortalStyle.js'),
     'primevue/progressbar/style': path.resolve(__dirname, './components/lib/progressbar/style/ProgressBarStyle.js'),
     'primevue/progressspinner/style': path.resolve(__dirname, './components/lib/progressspinner/style/ProgressSpinnerStyle.js'),
@@ -83,6 +87,7 @@ const STYLE_ALIAS = {
     'primevue/row/style': path.resolve(__dirname, './components/lib/row/style/RowStyle.js'),
     'primevue/scrollpanel/style': path.resolve(__dirname, './components/lib/scrollpanel/style/ScrollPanelStyle.js'),
     'primevue/scrolltop/style': path.resolve(__dirname, './components/lib/scrolltop/style/ScrollTopStyle.js'),
+    'primevue/select/style': path.resolve(__dirname, './components/lib/select/style/SelectStyle.js'),
     'primevue/selectbutton/style': path.resolve(__dirname, './components/lib/selectbutton/style/SelectButtonStyle.js'),
     'primevue/sidebar/style': path.resolve(__dirname, './components/lib/sidebar/style/SidebarStyle.js'),
     'primevue/skeleton/style': path.resolve(__dirname, './components/lib/skeleton/style/SkeletonStyle.js'),
@@ -105,6 +110,7 @@ const STYLE_ALIAS = {
     'primevue/timeline/style': path.resolve(__dirname, './components/lib/timeline/style/TimelineStyle.js'),
     'primevue/toast/style': path.resolve(__dirname, './components/lib/toast/style/ToastStyle.js'),
     'primevue/togglebutton/style': path.resolve(__dirname, './components/lib/togglebutton/style/ToggleButtonStyle.js'),
+    'primevue/toggleswitch/style': path.resolve(__dirname, './components/lib/toggleswitch/style/ToggleSwitchStyle.js'),
     'primevue/toolbar/style': path.resolve(__dirname, './components/lib/toolbar/style/ToolbarStyle.js'),
     'primevue/tooltip/style': path.resolve(__dirname, './components/lib/tooltip/style/TooltipStyle.js'),
     'primevue/tree/style': path.resolve(__dirname, './components/lib/tree/style/TreeStyle.js'),
@@ -164,7 +170,7 @@ const ICON_ALIAS = {
 };
 
 // prettier-ignore
-const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','calendar','card','carousel','cascadeselect','checkbox','chip','chips','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','dialog','divider','dock','dropdown','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputgroup','inputnumber','inputotp','inputswitch','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaypanel','paginator','panel','panelmenu','password','picklist','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','selectbutton','sidebar','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toolbar','tooltip','tree','treeselect','treetable'];
+const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable'];
 
 const createThemeAlias = (design, presets) => {
     const baseAlias = THEME_COMPONENTS.reduce((acc, name) => {
@@ -256,6 +262,12 @@ export default {
             'primevue/togglebutton': path.resolve(__dirname, './components/lib/togglebutton/ToggleButton.vue'),
             'primevue/listbox': path.resolve(__dirname, './components/lib/listbox/Listbox.vue'),
             'primevue/chip': path.resolve(__dirname, './components/lib/chip/Chip.vue'),
+            'primevue/popover': path.resolve(__dirname, './components/lib/popover/Popover.vue'),
+            'primevue/toggleswitch': path.resolve(__dirname, './components/lib/toggleswitch/ToggleSwitch.vue'),
+            'primevue/drawer': path.resolve(__dirname, './components/lib/drawer/Drawer.vue'),
+            'primevue/inputchips': path.resolve(__dirname, './components/lib/inputchips/InputChips.vue'),
+            'primevue/datepicker': path.resolve(__dirname, './components/lib/datepicker/DatePicker.vue'),
+            'primevue/select': path.resolve(__dirname, './components/lib/select/Select.vue'),
             'primevue/confirmationeventbus': path.resolve(__dirname, './components/lib/confirmationeventbus/ConfirmationEventBus.js'),
             'primevue/toasteventbus': path.resolve(__dirname, './components/lib/toasteventbus/ToastEventBus.js'),
             'primevue/overlayeventbus': path.resolve(__dirname, './components/lib/overlayeventbus/OverlayEventBus.js'),
diff --git a/rollup.config.js b/rollup.config.js
index f517461ad..138e132a2 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -98,10 +98,12 @@ const CORE_STYLE_DEPENDENCIES = {
     'primevue/contextmenu/style': 'primevue.contextmenu.style',
     'primevue/datatable/style': 'primevue.datatable.style',
     'primevue/dataview/style': 'primevue.dataview.style',
+    'primevue/datepicker/style': 'primevue.datepicker.style',
     'primevue/deferredcontent/style': 'primevue.deferredcontent.style',
     'primevue/dialog/style': 'primevue.dialog.style',
     'primevue/divider/style': 'primevue.divider.style',
     'primevue/dock/style': 'primevue.dock.style',
+    'primevue/drawer/style': 'primevue.drawer.style',
     'primevue/dropdown/style': 'primevue.dropdown.style',
     'primevue/dynamicdialog/style': 'primevue.dynamicdialog.style',
     'primevue/editor/style': 'primevue.editor.style',
@@ -112,6 +114,7 @@ const CORE_STYLE_DEPENDENCIES = {
     'primevue/image/style': 'primevue.image.style',
     'primevue/inlinemessage/style': 'primevue.inlinemessage.style',
     'primevue/inplace/style': 'primevue.inplace.style',
+    'primevue/inputchips/style': 'primevue.inputchips.style',
     'primevue/inputgroup/style': 'primevue.inputgroup.style',
     'primevue/inputgroupaddon/style': 'primevue.inputgroupaddon.style',
     'primevue/inputmask/style': 'primevue.inputmask.style',
@@ -135,6 +138,7 @@ const CORE_STYLE_DEPENDENCIES = {
     'primevue/panelmenu/style': 'primevue.panelmenu.style',
     'primevue/password/style': 'primevue.password.style',
     'primevue/picklist/style': 'primevue.picklist.style',
+    'primevue/popover/style': 'primevue.popover.style',
     'primevue/portal/style': 'primevue.portal.style',
     'primevue/progressbar/style': 'primevue.progressbar.style',
     'primevue/progressspinner/style': 'primevue.progressspinner.style',
@@ -144,6 +148,7 @@ const CORE_STYLE_DEPENDENCIES = {
     'primevue/row/style': 'primevue.row.style',
     'primevue/scrollpanel/style': 'primevue.scrollpanel.style',
     'primevue/scrolltop/style': 'primevue.scrolltop.style',
+    'primevue/select/style': 'primevue.select.style',
     'primevue/selectbutton/style': 'primevue.selectbutton.style',
     'primevue/sidebar/style': 'primevue.sidebar.style',
     'primevue/skeleton/style': 'primevue.skeleton.style',
@@ -166,6 +171,7 @@ const CORE_STYLE_DEPENDENCIES = {
     'primevue/timeline/style': 'primevue.timeline.style',
     'primevue/toast/style': 'primevue.toast.style',
     'primevue/togglebutton/style': 'primevue.togglebutton.style',
+    'primevue/toggleswitch/style': 'primevue.toggleswitch.style',
     'primevue/toolbar/style': 'primevue.toolbar.style',
     'primevue/tooltip/style': 'primevue.tooltip.style',
     'primevue/tree/style': 'primevue.tree.style',
@@ -175,7 +181,7 @@ const CORE_STYLE_DEPENDENCIES = {
 };
 
 // prettier-ignore
-const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','calendar','card','carousel','cascadeselect','checkbox','chip','chips','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','dialog','divider','dock','dropdown','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputgroup','inputnumber','inputotp','inputswitch','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaypanel','paginator','panel','panelmenu','password','picklist','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','selectbutton','sidebar','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toolbar','tooltip','tree','treeselect','treetable'];
+const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','toggleswitch','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaypanel','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable'];
 
 const createThemeDependencies = (design, presets) => {
     const baseDeps = THEME_COMPONENTS.reduce((acc, name) => {
@@ -267,6 +273,12 @@ const CORE_DEPENDENCIES = {
     'primevue/listbox': 'primevue.listbox',
     'primevue/chip': 'primevue.chip',
     'primevue/togglebutton': 'primevue.togglebutton',
+    'primevue/popover': 'primevue.popover',
+    'primevue/toggleswitch': 'primevue.toggleswitch',
+    'primevue/inputchips': 'primevue.inputchips',
+    'primevue/drawer': 'primevue.drawer',
+    'primevue/datepicker': 'primevue.datepicker',
+    'primevue/select': 'primevue.select',
     ...CORE_PASSTHROUGH_DEPENDENCIES,
     ...CORE_THEME_DEPENDENCIES
 };