primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
986 lines (982 loc) • 40.6 kB
TypeScript
import { DatePickerPassThrough, DatePickerIconDisplay, DatePickerSelectionMode, DatePickerResponsiveOptions, DatePickerViewType, DatePickerMonthChangeEvent, DatePickerYearChangeEvent, Month, DatePickerInputIconTemplateContext, DatePickerDecadeTemplateContext, DatePickerButtonBarTemplateContext, DatePickerDateMeta, DatePickerDateTemplateContext, DatePickerDisabledDateTemplateContext, NavigationState, LocaleSettings } from 'primeng/types/datepicker';
export * from 'primeng/types/datepicker';
import * as _angular_core from '@angular/core';
import { ElementRef, TemplateRef } from '@angular/core';
import { MotionOptions, MotionEvent } from '@primeuix/motion';
import * as i2 from 'primeng/api';
import { OverlayService } from 'primeng/api';
import { BaseInput } from 'primeng/baseinput';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { ConnectedOverlayScrollHandler } from 'primeng/dom';
import { Nullable, VoidListener } from 'primeng/ts-helpers';
import { CSSProperties, AppendTo } from 'primeng/types/shared';
import { Subscription } from 'rxjs';
import { BaseStyle } from 'primeng/base';
/**
*
* DatePicker is a form component to work with dates.
*
* [Live Demo](https://www.primeng.org/datepicker/)
*
* @module datepickerstyle
*
*/
declare enum DatePickerClasses {
/**
* Class name of the root element
*/
root = "p-datepicker",
/**
* Class name of the input element
*/
pcInputText = "p-datepicker-input",
/**
* Class name of the dropdown element
*/
dropdown = "p-datepicker-dropdown",
/**
* Class name of the input icon container element
*/
inputIconContainer = "p-datepicker-input-icon-container",
/**
* Class name of the input icon element
*/
inputIcon = "p-datepicker-input-icon",
/**
* Class name of the panel element
*/
panel = "p-datepicker-panel",
/**
* Class name of the calendar container element
*/
calendarContainer = "p-datepicker-calendar-container",
/**
* Class name of the calendar element
*/
calendar = "p-datepicker-calendar",
/**
* Class name of the header element
*/
header = "p-datepicker-header",
/**
* Class name of the previous button element
*/
pcPrevButton = "p-datepicker-prev-button",
/**
* Class name of the title element
*/
title = "p-datepicker-title",
/**
* Class name of the select month element
*/
selectMonth = "p-datepicker-select-month",
/**
* Class name of the select year element
*/
selectYear = "p-datepicker-select-year",
/**
* Class name of the decade element
*/
decade = "p-datepicker-decade",
/**
* Class name of the next button element
*/
pcNextButton = "p-datepicker-next-button",
/**
* Class name of the day view element
*/
dayView = "p-datepicker-day-view",
/**
* Class name of the week header element
*/
weekHeader = "p-datepicker-weekheader",
/**
* Class name of the week number element
*/
weekNumber = "p-datepicker-weeknumber",
/**
* Class name of the week label container element
*/
weekLabelContainer = "p-datepicker-weeklabel-container",
/**
* Class name of the week day cell element
*/
weekDayCell = "p-datepicker-weekday-cell",
/**
* Class name of the week day element
*/
weekDay = "p-datepicker-weekday",
/**
* Class name of the day cell element
*/
dayCell = "p-datepicker-day-cell",
/**
* Class name of the day element
*/
day = "p-datepicker-day",
/**
* Class name of the month view element
*/
monthView = "p-datepicker-month-view",
/**
* Class name of the month element
*/
month = "p-datepicker-month",
/**
* Class name of the year view element
*/
yearView = "p-datepicker-year-view",
/**
* Class name of the year element
*/
year = "p-datepicker-year",
/**
* Class name of the time picker element
*/
timePicker = "p-datepicker-time-picker",
/**
* Class name of the hour picker element
*/
hourPicker = "p-datepicker-hour-picker",
/**
* Class name of the increment button element
*/
pcIncrementButton = "p-datepicker-increment-button",
/**
* Class name of the decrement button element
*/
pcDecrementButton = "p-datepicker-decrement-button",
/**
* Class name of the separator element
*/
separator = "p-datepicker-separator",
/**
* Class name of the minute picker element
*/
minutePicker = "p-datepicker-minute-picker",
/**
* Class name of the second picker element
*/
secondPicker = "p-datepicker-second-picker",
/**
* Class name of the ampm picker element
*/
ampmPicker = "p-datepicker-ampm-picker",
/**
* Class name of the buttonbar element
*/
buttonbar = "p-datepicker-buttonbar",
/**
* Class name of the today button element
*/
pcTodayButton = "p-datepicker-today-button",
/**
* Class name of the clear button element
*/
pcClearButton = "p-datepicker-clear-button",
/**
* Class name of the clear icon
*/
clearIcon = "p-datepicker-clear-icon"
}
declare class DatePickerStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: ({ instance }: {
instance: any;
}) => (string | {
'p-invalid': any;
'p-inputwrapper-filled': any;
'p-inputwrapper-focus': any;
'p-focus': any;
'p-datepicker-fluid': any;
})[];
pcInputText: string;
clearIcon: string;
dropdown: string;
inputIconContainer: string;
inputIcon: string;
panel: ({ instance }: {
instance: any;
}) => (string | {
'p-datepicker-panel p-component': boolean;
'p-datepicker-panel-inline': any;
'p-disabled': any;
'p-datepicker-timeonly': any;
})[];
calendarContainer: string;
calendar: string;
header: string;
pcPrevButton: string;
title: string;
selectMonth: string;
selectYear: string;
decade: string;
pcNextButton: string;
dayView: string;
weekHeader: string;
weekNumber: string;
weekLabelContainer: string;
weekDayCell: string;
weekDay: string;
dayCell: ({ date }: {
date: any;
}) => (string | {
'p-datepicker-other-month': any;
'p-datepicker-today': any;
})[];
day: ({ instance, date }: {
instance: any;
date: any;
}) => {
[x: string]: any;
'p-datepicker-day': boolean;
'p-datepicker-day-selected': any;
'p-disabled': any;
};
monthView: string;
month: ({ instance, index }: {
instance: any;
index: any;
}) => (string | {
'p-datepicker-month-selected': any;
'p-disabled': any;
})[];
yearView: string;
year: ({ instance, year }: {
instance: any;
year: any;
}) => (string | {
'p-datepicker-year-selected': any;
'p-disabled': any;
})[];
timePicker: string;
hourPicker: string;
pcIncrementButton: string;
pcDecrementButton: string;
separator: string;
minutePicker: string;
secondPicker: string;
ampmPicker: string;
buttonbar: string;
pcTodayButton: string;
pcClearButton: string;
};
inlineStyles: {
root: () => {
position: string;
};
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatePickerStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<DatePickerStyle>;
}
interface DatePickerStyle extends BaseStyle {
}
declare const DATEPICKER_VALUE_ACCESSOR: any;
/**
* DatePicker is a form component to work with dates.
* @group Components
*/
declare class DatePicker extends BaseInput<DatePickerPassThrough> {
componentName: string;
bindDirectiveInstance: Bind;
$pcDatePicker: DatePicker | undefined;
/**
* Icon display mode.
* @group Props
*/
iconDisplay: _angular_core.InputSignal<DatePickerIconDisplay>;
/**
* Inline style of the input field.
* @group Props
*/
inputStyle: _angular_core.InputSignal<CSSProperties>;
/**
* Identifier of the focus input to match a label defined for the component.
* @group Props
*/
inputId: _angular_core.InputSignal<string | undefined>;
/**
* Style class of the input field.
* @group Props
*/
inputStyleClass: _angular_core.InputSignal<string | undefined>;
/**
* Placeholder text for the input.
* @group Props
*/
placeholder: _angular_core.InputSignal<string | undefined>;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
* @group Props
*/
ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
/**
* Defines a string that labels the input for accessibility.
* @group Props
*/
ariaLabel: _angular_core.InputSignal<string | undefined>;
/**
* Defines a string that labels the icon button for accessibility.
* @group Props
*/
iconAriaLabel: _angular_core.InputSignal<string | undefined>;
/**
* Format of the date which can also be defined at locale settings.
* @group Props
*/
dateFormat: _angular_core.InputSignal<string | undefined>;
/**
* Separator for multiple selection mode.
* @group Props
*/
multipleSeparator: _angular_core.InputSignal<string>;
/**
* Separator for joining start and end dates on range selection mode.
* @group Props
*/
rangeSeparator: _angular_core.InputSignal<string>;
/**
* When enabled, displays the datepicker as inline. Default is false for popup mode.
* @group Props
*/
inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* 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.
* @group Props
*/
showOtherMonths: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* 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.
* @group Props
*/
selectOtherMonths: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* When enabled, displays a button with icon next to input.
* @group Props
*/
showIcon: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Icon of the datepicker button.
* @group Props
*/
icon: _angular_core.InputSignal<string | undefined>;
/**
* When specified, prevents entering the date manually with keyboard.
* @group Props
*/
readonlyInput: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* The cutoff year for determining the century for a date.
* @group Props
*/
shortYearCutoff: _angular_core.InputSignal<any>;
/**
* Specifies 12 or 24 hour format.
* @group Props
*/
hourFormat: _angular_core.InputSignal<string>;
/**
* Whether to display timepicker only.
* @group Props
*/
timeOnly: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Hours to change per step.
* @group Props
*/
stepHour: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Minutes to change per step.
* @group Props
*/
stepMinute: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Seconds to change per step.
* @group Props
*/
stepSecond: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Whether to show the seconds in time picker.
* @group Props
*/
showSeconds: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* When disabled, datepicker will not be visible with input focus.
* @group Props
*/
showOnFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* When enabled, datepicker will show week numbers.
* @group Props
*/
showWeek: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* When enabled, datepicker will start week numbers from first day of the year.
* @group Props
*/
startWeekFromFirstDayOfYear: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* When enabled, a clear icon is displayed to clear the value.
* @group Props
*/
showClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Type of the value to write back to ngModel, default is date and alternative is string.
* @group Props
*/
dataType: _angular_core.InputSignal<string>;
/**
* Defines the quantity of the selection, valid values are "single", "multiple" and "range".
* @group Props
*/
selectionMode: _angular_core.InputSignal<DatePickerSelectionMode>;
/**
* Maximum number of selectable dates in multiple mode.
* @group Props
*/
maxDateCount: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
/**
* Whether to display today and clear buttons at the footer
* @group Props
*/
showButtonBar: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Style class of the today button.
* @group Props
*/
todayButtonStyleClass: _angular_core.InputSignal<string | undefined>;
/**
* Style class of the clear button.
* @group Props
*/
clearButtonStyleClass: _angular_core.InputSignal<string | undefined>;
/**
* When present, it specifies that the component should automatically get focus on load.
* @group Props
*/
autofocus: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Whether to automatically manage layering.
* @group Props
*/
autoZIndex: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Base zIndex value to use in layering.
* @group Props
*/
baseZIndex: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Style class of the datetimepicker container element.
* @group Props
*/
panelStyleClass: _angular_core.InputSignal<string | undefined>;
/**
* Inline style of the datetimepicker container element.
* @group Props
*/
panelStyle: _angular_core.InputSignal<any>;
/**
* Keep invalid value when input blur.
* @group Props
*/
keepInvalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Whether to hide the overlay on date selection.
* @group Props
*/
hideOnDateTimeSelect: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* When enabled, datepicker overlay is displayed as optimized for touch devices.
* @group Props
*/
touchUI: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Separator of time selector.
* @group Props
*/
timeSeparator: _angular_core.InputSignal<string>;
/**
* When enabled, can only focus on elements inside the datepicker.
* @group Props
*/
focusTrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
/**
* The minimum selectable date.
* @group Props
*/
minDate: _angular_core.InputSignal<Date | null | undefined>;
/**
* The maximum selectable date.
* @group Props
*/
maxDate: _angular_core.InputSignal<Date | null | undefined>;
/**
* Array with dates that should be disabled (not selectable).
* @group Props
*/
disabledDates: _angular_core.InputSignal<Date[] | undefined>;
/**
* Array with weekday numbers that should be disabled (not selectable).
* @group Props
*/
disabledDays: _angular_core.InputSignal<number[] | undefined>;
/**
* Whether to display timepicker.
* @group Props
*/
showTime: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* An array of options for responsive design.
* @group Props
*/
responsiveOptions: _angular_core.InputSignal<DatePickerResponsiveOptions[] | undefined>;
/**
* Number of months to display.
* @group Props
*/
numberOfMonths: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Defines the first of the week for various date calculations.
* @group Props
*/
firstDayOfWeek: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
/**
* Type of view to display, valid values are "date" for datepicker and "month" for month picker.
* @group Props
*/
view: _angular_core.InputSignal<DatePickerViewType>;
/**
* Set the date to highlight on first opening if the field is blank.
* @group Props
*/
defaultDate: _angular_core.InputSignal<Date | null | undefined>;
/**
* Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
* @defaultValue 'self'
* @group Props
*/
appendTo: _angular_core.InputSignal<AppendTo>;
/**
* The motion options.
* @group Props
*/
motionOptions: _angular_core.InputSignal<MotionOptions | undefined>;
computedMotionOptions: _angular_core.Signal<MotionOptions>;
/**
* Callback to invoke on focus of input field.
* @param {Event} event - browser event.
* @group Emits
*/
onFocus: _angular_core.OutputEmitterRef<Event>;
/**
* Callback to invoke on blur of input field.
* @param {Event} event - browser event.
* @group Emits
*/
onBlur: _angular_core.OutputEmitterRef<Event>;
/**
* Callback to invoke when date panel closed.
* @param {HTMLDivElement} element - The element being transitioned/animated.
* @group Emits
*/
onClose: _angular_core.OutputEmitterRef<HTMLElement>;
/**
* Callback to invoke on date select.
* @param {Date} date - date value.
* @group Emits
*/
onSelect: _angular_core.OutputEmitterRef<Date>;
/**
* Callback to invoke when input field cleared.
* @group Emits
*/
onClear: _angular_core.OutputEmitterRef<any>;
/**
* Callback to invoke when input field is being typed.
* @param {Event} event - browser event
* @group Emits
*/
onInput: _angular_core.OutputEmitterRef<any>;
/**
* Callback to invoke when today button is clicked.
* @param {Date} date - today as a date instance.
* @group Emits
*/
onTodayClick: _angular_core.OutputEmitterRef<Date>;
/**
* Callback to invoke when clear button is clicked.
* @param {Event} event - browser event.
* @group Emits
*/
onClearClick: _angular_core.OutputEmitterRef<any>;
/**
* Callback to invoke when a month is changed using the navigators.
* @param {DatePickerMonthChangeEvent} event - custom month change event.
* @group Emits
*/
onMonthChange: _angular_core.OutputEmitterRef<DatePickerMonthChangeEvent>;
/**
* Callback to invoke when a year is changed using the navigators.
* @param {DatePickerYearChangeEvent} event - custom year change event.
* @group Emits
*/
onYearChange: _angular_core.OutputEmitterRef<DatePickerYearChangeEvent>;
/**
* Callback to invoke when clicked outside of the date panel.
* @group Emits
*/
onClickOutside: _angular_core.OutputEmitterRef<any>;
/**
* Callback to invoke when datepicker panel is shown.
* @param {HTMLDivElement} element - The element being transitioned/animated.
* @group Emits
*/
onShow: _angular_core.OutputEmitterRef<HTMLElement>;
inputfieldViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
contentWrapperViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
_componentStyle: DatePickerStyle;
contentViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
value: any;
dates: Nullable<Date[]>;
months: _angular_core.WritableSignal<Month[]>;
weekDays: _angular_core.WritableSignal<string[]>;
currentMonth: number;
currentYear: number;
currentHour: _angular_core.WritableSignal<number | null>;
currentMinute: _angular_core.WritableSignal<number | null>;
currentSecond: _angular_core.WritableSignal<number | null>;
formattedHour: _angular_core.Signal<string>;
formattedMinute: _angular_core.Signal<string>;
formattedSecond: _angular_core.Signal<string>;
private onButtonClickCallback;
private onTodayButtonClickCallback;
private onClearButtonClickCallback;
inputIconTemplateContext: _angular_core.Signal<DatePickerInputIconTemplateContext>;
decadeTemplateContext: _angular_core.Signal<DatePickerDecadeTemplateContext>;
buttonBarTemplateContext: _angular_core.Signal<DatePickerButtonBarTemplateContext>;
getDateTemplateContext(date: DatePickerDateMeta): DatePickerDateTemplateContext;
pm: _angular_core.WritableSignal<boolean | null>;
mask: Nullable<HTMLDivElement>;
maskClickListener: VoidListener;
overlay: Nullable<HTMLElement>;
responsiveStyleElement: HTMLStyleElement | undefined | null;
overlayVisible: _angular_core.WritableSignal<boolean>;
overlayRendered: _angular_core.WritableSignal<boolean>;
overlayMinWidth: Nullable<number>;
$appendTo: _angular_core.Signal<AppendTo>;
calendarElement: Nullable<HTMLElement | ElementRef>;
timePickerTimer: any;
documentClickListener: VoidListener;
animationEndListener: VoidListener;
ticksTo1970: Nullable<number>;
yearOptions: Nullable<number[]>;
focus: _angular_core.WritableSignal<boolean>;
isKeydown: Nullable<boolean>;
preventDocumentListener: Nullable<boolean>;
requiredAttr: _angular_core.Signal<"" | undefined>;
readonlyAttr: _angular_core.Signal<"" | undefined>;
disabledAttr: _angular_core.Signal<"" | undefined>;
switchViewButtonDisabledAttr: _angular_core.Signal<"" | undefined>;
inputModeAttr: _angular_core.Signal<"off" | null>;
/**
* The clear icon stays in the DOM whenever clearing is enabled — hidden via
* `visibility` while there is no value — so the base `:has(.p-datepicker-clear-icon)`
* rules reserve its footprint constantly and the control width does not jump
* when the icon appears (#6).
*/
clearIconEnabled: _angular_core.Signal<boolean>;
showClearIcon: _angular_core.Signal<boolean>;
showIconButton: _angular_core.Signal<boolean | undefined>;
showInputIcon: _angular_core.Signal<boolean | undefined>;
showTimePicker: _angular_core.Signal<boolean | undefined>;
isHourFormat12: _angular_core.Signal<boolean>;
ariaControlsAttr: _angular_core.Signal<Nullable<string>>;
isOverlayVisible: _angular_core.Signal<boolean>;
roleAttr: _angular_core.Signal<"dialog" | null>;
ariaModalAttr: _angular_core.Signal<"true" | null>;
ampmLabel: _angular_core.Signal<"PM" | "AM">;
dayClass(date: any): {
[x: string]: any;
'p-datepicker-day': boolean;
'p-datepicker-day-selected': any;
'p-disabled': any;
};
getPrevButtonStyle(index: number): {
visibility: string;
};
getNextButtonStyle(index: number): {
visibility: string;
};
/**
* Custom template for date cells.
* @param {DatePickerDateTemplateContext} context - date template context.
* @group Templates
*/
dateTemplate: _angular_core.Signal<TemplateRef<DatePickerDateTemplateContext> | undefined>;
/**
* Custom template for header section.
* @group Templates
*/
headerTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom template for footer section.
* @group Templates
*/
footerTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom template for disabled date cells.
* @param {DatePickerDisabledDateTemplateContext} context - disabled date template context.
* @group Templates
*/
disabledDateTemplate: _angular_core.Signal<TemplateRef<DatePickerDisabledDateTemplateContext> | undefined>;
/**
* Custom template for decade view.
* @param {DatePickerDecadeTemplateContext} context - decade template context.
* @group Templates
*/
decadeTemplate: _angular_core.Signal<TemplateRef<DatePickerDecadeTemplateContext> | undefined>;
/**
* Custom template for previous month icon.
* @group Templates
*/
previousIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom template for next month icon.
* @group Templates
*/
nextIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom template for trigger icon.
* @group Templates
*/
triggerIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom template for clear icon.
* @group Templates
*/
clearIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom template for decrement icon.
* @group Templates
*/
decrementIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom template for increment icon.
* @group Templates
*/
incrementIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom template for input icon.
* @param {DatePickerInputIconTemplateContext} context - input icon template context.
* @group Templates
*/
inputIconTemplate: _angular_core.Signal<TemplateRef<DatePickerInputIconTemplateContext> | undefined>;
/**
* Custom template for button bar.
* @param {DatePickerButtonBarTemplateContext} context - button bar template context.
* @group Templates
*/
buttonBarTemplate: _angular_core.Signal<TemplateRef<DatePickerButtonBarTemplateContext> | undefined>;
selectElement: Nullable;
todayElement: Nullable;
focusElement: Nullable;
scrollHandler: Nullable<ConnectedOverlayScrollHandler>;
documentResizeListener: VoidListener;
navigationState: Nullable<NavigationState>;
isMonthNavigate: Nullable<boolean>;
initialized: Nullable<boolean>;
translationSubscription: Nullable<Subscription>;
_locale: LocaleSettings;
currentView: _angular_core.WritableSignal<string | null>;
attributeSelector: Nullable<string>;
panelId: Nullable<string>;
preventFocus: Nullable<boolean>;
_focusKey: Nullable<string>;
private window;
get locale(): LocaleSettings;
get iconButtonAriaLabel(): any;
get prevIconAriaLabel(): any;
get nextIconAriaLabel(): any;
overlayService: OverlayService;
constructor();
onInit(): void;
onAfterViewInit(): void;
onAfterViewChecked(): void;
populateYearOptions(start: number, end: number): void;
createWeekDays(): void;
monthPickerValues(): any[];
yearPickerValues(): any[];
createMonths(month: number, year: number): void;
getWeekNumber(date: Date): number;
createMonth(month: number, year: number): Month;
initTime(date: Date): void;
navBackward(event: any): void;
navForward(event: any): void;
decrementYear(): void;
decrementDecade(): void;
incrementDecade(): void;
incrementYear(): void;
switchToMonthView(event: Event): void;
switchToYearView(event: Event): void;
onDateSelect(event: Event, dateMeta: any): void;
shouldSelectDate(dateMeta: any): boolean;
onMonthSelect(event: Event, index: number): void;
onYearSelect(event: Event, year: number): void;
updateInputfield(): void;
inputFieldValue: _angular_core.WritableSignal<string | null>;
formatDateTime(date: any): any;
formatDateMetaToDate(dateMeta: any): Date;
formatDateKey(date: Date): string;
setCurrentHourPM(hours: number): void;
setCurrentView(currentView: DatePickerViewType): void;
selectDate(dateMeta: any): void;
updateModel(value: any): void;
getFirstDayOfMonthIndex(month: number, year: number): number;
getDaysCountInMonth(month: number, year: number): number;
getDaysCountInPrevMonth(month: number, year: number): number;
getPreviousMonthAndYear(month: number, year: number): {
month: any;
year: any;
};
getNextMonthAndYear(month: number, year: number): {
month: any;
year: any;
};
getSundayIndex(): number;
isSelected(dateMeta: any): boolean | undefined;
isComparable(): boolean;
isMonthSelected(month: any): any;
isMonthDisabled(month: number, year?: number): boolean;
isYearDisabled(year: number): boolean;
isYearSelected(year: number): boolean;
isDateEquals(value: any, dateMeta: any): boolean;
isDateBetween(start: Date, end: Date, dateMeta: any): boolean;
isSingleSelection(): boolean;
isRangeSelection(): boolean;
isMultipleSelection(): boolean;
isToday(today: Date, day: number, month: number, year: number): boolean;
isSelectable(day: any, month: any, year: any, otherMonth: any): boolean;
isDateDisabled(day: number, month: number, year: number): boolean;
isDayDisabled(day: number, month: number, year: number): boolean;
onInputFocus(event: Event): void;
onInputClick(): void;
onInputBlur(event: Event): void;
onButtonClick(event: Event, inputfield?: any): void;
clear(): void;
onOverlayClick(event: Event): void;
getMonthName(index: number): any;
getYear(month: any): any;
getDateCellAriaLabel(dateMeta: any): string;
getMonthSelectAriaLabel(month: any): string;
/**
* Accessible name for the year-select button. It mirrors the button's visible text (the year,
* e.g. "2026") so the accessible name matches the visible label, avoiding an axe-core
* `label-content-name-mismatch` violation and keeping speech-input targeting reliable.
*/
getYearSelectAriaLabel(month: any): string;
private focusAdjacentRowDayCell;
private getFirstDayCellOfRow;
private getLastDayCellOfRow;
switchViewButtonDisabled(): boolean;
onPrevButtonClick(event: Event): void;
onNextButtonClick(event: Event): void;
onContainerButtonKeydown(event: KeyboardEvent): void;
onInputKeydown(event: any): void;
onDateCellKeydown(event: any, dateMeta: any, groupIndex: number): void;
onMonthCellKeydown(event: any, index: number): void;
onYearCellKeydown(event: any, index: number): void;
navigateToMonth(prev: boolean, groupIndex: number, focusKey?: string): void;
updateFocus(): void;
initFocusableCell(): void;
trapFocus(event: any): void;
onMonthDropdownChange(m: string): void;
onYearDropdownChange(y: string): void;
convertTo24Hour(hours: number, pm: boolean): number;
constrainTime(hour: number, minute: number, second: number, pm: boolean): number[];
incrementHour(event: any): void;
toggleAMPMIfNotMinDate(newPM: boolean): void;
onTimePickerElementMouseDown(event: Event, type: number, direction: number): void;
onTimePickerElementMouseUp(event: Event): void;
onTimePickerElementMouseLeave(): void;
repeat(event: Event | null, interval: number | null, type: number | null, direction: number | null): void;
clearTimePickerTimer(): void;
decrementHour(event: any): void;
incrementMinute(event: any): void;
decrementMinute(event: any): void;
incrementSecond(event: any): void;
decrementSecond(event: any): void;
updateTime(): void;
toggleAMPM(event: any): void;
onUserInput(event: KeyboardEvent | any): void;
isValidSelection(value: any): boolean;
parseValueFromString(text: string): Date | Date[] | null;
parseDateTime(text: any): Date;
populateTime(value: any, timeString: any, ampm: any): void;
isValidDate(date: any): boolean;
updateUI(): void;
showOverlay(): void;
hideOverlay(): void;
toggle(): void;
onOverlayBeforeEnter(event: MotionEvent): void;
onOverlayAfterLeave(event: MotionEvent): void;
appendOverlay(): void;
restoreOverlayAppend(): void;
alignOverlay(): void;
bindListeners(): void;
setZIndex(): void;
enableModality(element: any): void;
disableModality(): void;
destroyMask(): void;
unbindMaskClickListener(): void;
unbindAnimationEndListener(): void;
getDateFormat(): any;
getFirstDateOfWeek(): any;
formatDate(date: any, format: any): string;
formatTime(date: any): string;
parseTime(value: any): {
hour: number;
minute: number;
second: number | null;
};
parseDate(value: any, format: any): any;
daylightSavingAdjust(date: any): any;
isValidDateForTimeConstraints(selectedDate: Date): boolean;
onTodayButtonClick(event: any): void;
onClearButtonClick(event: any): void;
createResponsiveStyle(): void;
destroyResponsiveStyleElement(): void;
bindDocumentClickListener(): void;
unbindDocumentClickListener(): void;
bindDocumentResizeListener(): void;
unbindDocumentResizeListener(): void;
bindScrollListener(): void;
unbindScrollListener(): void;
isOutsideClicked(event: Event): boolean;
isNavIconClicked(event: any): boolean;
onWindowResize(): void;
onOverlayHide(): void;
/**
* @override
*
* @see {@link BaseEditableHolder.writeControlValue}
* Writes the value to the control.
*/
writeControlValue(value: any): void;
onDestroy(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatePicker, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePicker, "p-datepicker, p-date-picker", never, { "iconDisplay": { "alias": "iconDisplay"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "inputStyleClass": { "alias": "inputStyleClass"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "iconAriaLabel": { "alias": "iconAriaLabel"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "multipleSeparator": { "alias": "multipleSeparator"; "required": false; "isSignal": true; }; "rangeSeparator": { "alias": "rangeSeparator"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "showOtherMonths": { "alias": "showOtherMonths"; "required": false; "isSignal": true; }; "selectOtherMonths": { "alias": "selectOtherMonths"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; "isSignal": true; }; "shortYearCutoff": { "alias": "shortYearCutoff"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "timeOnly": { "alias": "timeOnly"; "required": false; "isSignal": true; }; "stepHour": { "alias": "stepHour"; "required": false; "isSignal": true; }; "stepMinute": { "alias": "stepMinute"; "required": false; "isSignal": true; }; "stepSecond": { "alias": "stepSecond"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "showOnFocus": { "alias": "showOnFocus"; "required": false; "isSignal": true; }; "showWeek": { "alias": "showWeek"; "required": false; "isSignal": true; }; "startWeekFromFirstDayOfYear": { "alias": "startWeekFromFirstDayOfYear"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "dataType": { "alias": "dataType"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "maxDateCount": { "alias": "maxDateCount"; "required": false; "isSignal": true; }; "showButtonBar": { "alias": "showButtonBar"; "required": false; "isSignal": true; }; "todayButtonStyleClass": { "alias": "todayButtonStyleClass"; "required": false; "isSignal": true; }; "clearButtonStyleClass": { "alias": "clearButtonStyleClass"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "autoZIndex": { "alias": "autoZIndex"; "required": false; "isSignal": true; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; "isSignal": true; }; "panelStyleClass": { "alias": "panelStyleClass"; "required": false; "isSignal": true; }; "panelStyle": { "alias": "panelStyle"; "required": false; "isSignal": true; }; "keepInvalid": { "alias": "keepInvalid"; "required": false; "isSignal": true; }; "hideOnDateTimeSelect": { "alias": "hideOnDateTimeSelect"; "required": false; "isSignal": true; }; "touchUI": { "alias": "touchUI"; "required": false; "isSignal": true; }; "timeSeparator": { "alias": "timeSeparator"; "required": false; "isSignal": true; }; "focusTrap": { "alias": "focusTrap"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "disabledDays": { "alias": "disabledDays"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "responsiveOptions": { "alias": "responsiveOptions"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "defaultDate": { "alias": "defaultDate"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "motionOptions": { "alias": "motionOptions"; "required": false; "isSignal": true; }; }, { "onFocus": "onFocus"; "onBlur": "onBlur"; "onClose": "onClose"; "onSelect": "onSelect"; "onClear": "onClear"; "onInput": "onInput"; "onTodayClick": "onTodayClick"; "onClearClick": "onClearClick"; "onMonthChange": "onMonthChange"; "onYearChange": "onYearChange"; "onClickOutside": "onClickOutside"; "onShow": "onShow"; }, ["dateTemplate", "headerTemplate", "footerTemplate", "disabledDateTemplate", "decadeTemplate", "previousIconTemplate", "nextIconTemplate", "triggerIconTemplate", "clearIconTemplate", "decrementIconTemplate", "incrementIconTemplate", "inputIconTemplate", "buttonBarTemplate"], ["p-header", "p-footer"], true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class DatePickerModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatePickerModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<DatePickerModule, never, [typeof DatePicker, typeof i2.SharedModule], [typeof DatePicker, typeof i2.SharedModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<DatePickerModule>;
}
export { DATEPICKER_VALUE_ACCESSOR, DatePicker, DatePickerClasses, DatePickerModule, DatePickerStyle };