DatePicker

DatePicker is an input component to select a date.

Import #


import { DatePicker } from 'primeng/datepicker';

Basic #

Two-way value binding is defined using the standard ngModel directive referencing to a Date property.


<p-datepicker [(ngModel)]="date" />

Reactive Forms #

DatePicker can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.


<form [formGroup]="formGroup">
    <p-datepicker formControlName="date" />
</form>

Format #

Default date format is mm/dd/yy which can be customized using the dateFormat property. Following options can be a part of the format.

d - day of month (no leading zero)
dd - day of month (two digit)
o - day of the year (no leading zeros)
oo - day of the year (three digit)
D - day name short
DD - day name long
m - month of year (no leading zero)
mm - month of year (two digit)
M - month name short
MM - month name long
y - year (two digit)
yy - year (four digit)
@ - Unix timestamp (ms since 01/01/1970)
! - Windows ticks (100ns since 01/01/0001)
'...' - literal text
'' - single quote
anything else - literal text


<p-datepicker [(ngModel)]="date" dateFormat="dd.mm.yy" />

Locale #

Locale for different languages and formats is defined globally, refer to the PrimeNG Locale configuration for more information.

Icon #

An additional icon is displayed next to the input field when showIcon is present.

Button

Default Icon

Custom Icon


<p-datepicker [(ngModel)]="date1" [showIcon]="true" inputId="buttondisplay" [showOnFocus]="false" />

<p-datepicker [(ngModel)]="date2" [iconDisplay]="'input'" [showIcon]="true" inputId="icondisplay" />

<p-datepicker [(ngModel)]="date3" [iconDisplay]="'input'" [showIcon]="true" [timeOnly]="true" inputId="templatedisplay">
    <ng-template pTemplate="inputicon" let-clickCallBack="clickCallBack">
        <i class="pi pi-clock" (click)="clickCallBack($event)"></i>
    </ng-template>
</p-datepicker>

Min / Max #

Boundaries for the permitted dates that can be entered are defined with minDate and maxDate properties.


<p-datepicker [(ngModel)]="date" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true" />

Multiple #

In order to choose multiple dates, set selectionMode as multiple. In this mode, the value binding should be an array.


<p-datepicker [(ngModel)]="dates" selectionMode="multiple" [readonlyInput]="true" />

Range #

A range of dates can be selected by defining selectionMode as range, in this case the bound value would be an array with two values where first date is the start of the range and second date is the end.


<p-datepicker [(ngModel)]="rangeDates" selectionMode="range" [readonlyInput]="true" />

Button Bar #

When showButtonBar is present, today and clear buttons are displayed at the footer.


<p-datepicker [(ngModel)]="date" [showButtonBar]="true" />

Time #

A time picker is displayed when showTime is enabled where 12/24 hour format is configured with hourFormat property. In case, only time needs to be selected, add timeOnly to hide the date section.

12h Format

24h Format

Time Only


<p-datepicker inputId="calendar-12h" [(ngModel)]="datetime12h" [showTime]="true" [hourFormat]="12" />

<p-datepicker inputId="calendar-24h" [(ngModel)]="datetime24h" [showTime]="true" [hourFormat]="24" />

<p-datepicker inputId="calendar-timeonly" [(ngModel)]="time" [timeOnly]="true" />

Month Picker #

Month only picker is enabled by specifying view as month in addition to a suitable dateFormat.


<p-datepicker [(ngModel)]="date" view="month" dateFormat="mm/yy" [readonlyInput]="true" />

Year Picker #

Specifying view as year in addition to a suitable dateFormat enables the year picker.


<p-datepicker [(ngModel)]="date" view="year" dateFormat="yy" />

Multiple Months #

Number of months to display is configured with the numberOfMonths property.


<p-datepicker [(ngModel)]="date" [numberOfMonths]="2" />

Date Template #

Custom content can be placed inside date cells with the ng-template property that takes a Date as a parameter.


<p-datepicker [(ngModel)]="date">
    <ng-template pTemplate="date" let-date>
        <strong *ngIf="date.day > 10 && date.day < 15; else elseBlock" style="text-decoration: line-through">{{ date.day }}</strong>
        <ng-template #elseBlock>{{ date.day }}</ng-template>
    </ng-template>
</p-datepicker>

Inline #

DatePicker is displayed as a popup by default, add inline property to customize this behavior.

Wk	Su	Mo	Tu	We	Th	Fr	Sa
48	1	2	3	4	5	6	7
49	8	9	10	11	12	13	14
50	15	16	17	18	19	20	21
51	22	23	24	25	26	27	28
52	29	30	31	1	2	3	4


<p-datepicker class="max-w-full" [(ngModel)]="date" [inline]="true" [showWeek]="true" />

Float Label #

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.

Over Label

In Label

On Label


<p-floatlabel>
    <p-datepicker [(ngModel)]="value1" inputId="over_label" showIcon iconDisplay="input" />
    <label for="over_label">Over Label</label>
</p-floatlabel>

<p-floatlabel variant="in">
    <p-datepicker [(ngModel)]="value2" inputId="in_label" showIcon iconDisplay="input" />
    <label for="in_label">In Label</label>
</p-floatlabel>

<p-floatlabel variant="on">
    <p-datepicker [(ngModel)]="value3" inputId="on_label" showIcon iconDisplay="input" />
    <label for="on_label">On Label</label>
</p-floatlabel>

Ifta Label #

IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.

Date


<p-floatlabel>
    <p-datepicker [(ngModel)]="value1" inputId="over_label" showIcon iconDisplay="input" />
    <label for="over_label">Over Label</label>
</p-floatlabel>

<p-floatlabel variant="in">
    <p-datepicker [(ngModel)]="value2" inputId="in_label" showIcon iconDisplay="input" />
    <label for="in_label">In Label</label>
</p-floatlabel>

<p-floatlabel variant="on">
    <p-datepicker [(ngModel)]="value3" inputId="on_label" showIcon iconDisplay="input" />
    <label for="on_label">On Label</label>
</p-floatlabel>

Sizes #

DatePicker provides small and large sizes as alternatives to the base.


<p-datepicker [(ngModel)]="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
<p-datepicker [(ngModel)]="value2" placeholder="Normal" showIcon iconDisplay="input" />
<p-datepicker [(ngModel)]="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />

Filled #

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.


<p-datepicker [(ngModel)]="date" variant="filled" />

Invalid #

Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.


<p-datepicker [(ngModel)]="date" class="ng-invalid ng-dirty" />

Disabled #

When disabled is present, the element cannot be edited and focused.


<p-datepicker [(ngModel)]="date" [disabled]="true" />

Accessibility #

Screen Reader

Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition to aria-autocomplete as "none", aria-haspopup as "dialog" and aria-expanded attributes. The relation between the input and the popup is created with aria-controls attribute that refers to the id of the popup.

The optional DatePicker button requires includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button. The value to read is retrieved from the chooseDate key of the aria property from the locale API. This label is also used for the aria-label of the popup as well. When there is a value selected, it is formatted and appended to the label to be able to notify users about the current value.

Popup has a dialog role along with aria-modal and aria-label. The navigation buttons at the header has an aria-label retrieved from the prevYear, nextYear, prevMonth, nextMonth,prevDecade and nextDecade keys of the locale aria API. Similarly month picker button uses the chooseMonth and year picker button uses the chooseYear keys.

Main date table uses grid role that contains th elements with col as the scope along with abbr tag resolving to the full name of the month. Each date cell has an aria-label referring to the full date value. Buttons at the footer utilize their readable labels as aria-label as well. Selected date also receives the aria-selected attribute.

Timepicker spinner buttons get their labels for aria-label from the aria locale API using the prevHour, nextHour, prevMinute, nextMinute, prevSecond, nextSecond, am and pm keys.

DatePicker also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.


<label for="date1">Date</label>
<p-datepicker inputId="date1"/>

<span id="date2">Date</span>
<p-datepicker ariaLabelledBy="date2"/>

<p-datepicker ariaLabel="Date"/>

Choose Date Button Keyboard Support

Key	Function
space	Opens popup and moves focus to the selected date, if there is none focuses on today.
enter	Opens popup and moves focus to the selected date, if there is none focuses on today.

Popup Keyboard Support

Key	Function
escape	Closes the popup and moves focus to the input element.
tab	Moves focus to the next focusable element within the popup.
shift + tab	Moves focus to the next focusable element within the popup.

Header Buttons Keyboard Support

Key	Function
enter	Triggers the button action.
space	Triggers the button action.

Date Grid Keyboard Support

Key	Function
enter	Selects the date, closes the popup and moves focus to the input element.
space	Selects the date, closes the popup and moves focus to the input element.
up arrow	Moves focus to the same day of the previous week.
down arrow	Moves focus to the same day of the next week.
right arrow	Moves focus to the next day.
left arrow	Moves focus to the previous day.
home	Moves focus to the first day of the current week.
end	Moves focus to the last day of the current week.
page up	Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker.
shift + page up	Changes the date to previous year in date picker mode. Has no effect in month or year picker
page down	Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.
shift + page down	Changes the date to next year in date picker mode. Has no effect in month or year picker

Footer Buttons Keyboard Support

Key	Function
enter	Triggers the button action.
space	Triggers the button action.

name	type	default	description
style	Object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
inputStyle	Object	null	Inline style of the input field.
inputId	string	null	Identifier of the focus input to match a label defined for the component.
name	string	null	Name of the input element.
inputStyleClass	string	null	Style class of the input field.
placeholder	string	null	Placeholder text for the input.
ariaLabelledBy	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
ariaLabel	string	null	Defines a string that labels the input for accessibility.
iconAriaLabel	string	null	Defines a string that labels the icon button for accessibility.
disabled	boolean	false	When specified, disables the component.
dateFormat	string	null	Format of the date which can also be defined at locale settings.
multipleSeparator	string	,	Separator for multiple selection mode.
rangeSeparator	string	-	Separator for joining start and end dates on range selection mode.
inline	boolean	false	When enabled, displays the datepicker as inline. Default is false for popup mode.
showOtherMonths	boolean	true	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.
selectOtherMonths	boolean	false	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.
showIcon	boolean	false	When enabled, displays a button with icon next to input.
fluid	boolean	false	Whether the component should span the full width of its parent.
icon	string	null	Icon of the datepicker button.
appendTo	any	null	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).
readonlyInput	boolean	false	When specified, prevents entering the date manually with keyboard.
shortYearCutoff	any	+10	The cutoff year for determining the century for a date.
monthNavigator	boolean	false	Whether the month should be rendered as a dropdown instead of text.
yearNavigator	boolean	false	Whether the year should be rendered as a dropdown instead of text.
hourFormat	string	24	Specifies 12 or 24 hour format.
timeOnly	boolean	false	Whether to display timepicker only.
stepHour	number	1	Hours to change per step.
stepMinute	number	1	Minutes to change per step.
stepSecond	number	1	Seconds to change per step.
showSeconds	boolean	false	Whether to show the seconds in time picker.
required	boolean	false	When present, it specifies that an input field must be filled out before submitting the form.
showOnFocus	boolean	true	When disabled, datepicker will not be visible with input focus.
showWeek	boolean	false	When enabled, datepicker will show week numbers.
startWeekFromFirstDayOfYear	boolean	false	When enabled, datepicker will start week numbers from first day of the year.
showClear	boolean	false	When enabled, a clear icon is displayed to clear the value.
dataType	string	date	Type of the value to write back to ngModel, default is date and alternative is string.
selectionMode	"range" \| "single" \| "multiple"	single	Defines the quantity of the selection, valid values are "single", "multiple" and "range".
maxDateCount	number	null	Maximum number of selectable dates in multiple mode.
showButtonBar	boolean	false	Whether to display today and clear buttons at the footer
todayButtonStyleClass	string	null	Style class of the today button.
clearButtonStyleClass	string	null	Style class of the clear button.
autofocus	boolean	false	When present, it specifies that the component should automatically get focus on load.
autoZIndex	boolean	true	Whether to automatically manage layering.
baseZIndex	number	0	Base zIndex value to use in layering.
panelStyleClass	string	null	Style class of the datetimepicker container element.
panelStyle	any	null	Inline style of the datetimepicker container element.
keepInvalid	boolean	false	Keep invalid value when input blur.
hideOnDateTimeSelect	boolean	true	Whether to hide the overlay on date selection.
touchUI	boolean	false	When enabled, datepicker overlay is displayed as optimized for touch devices.
timeSeparator	string	:	Separator of time selector.
focusTrap	boolean	true	When enabled, can only focus on elements inside the datepicker.
showTransitionOptions	string	.12s cubic-bezier(0, 0, 0.2, 1)	Transition options of the show animation.
hideTransitionOptions	string	.1s linear	Transition options of the hide animation.
tabindex	number	null	Index of the element in tabbing order.
variant	"outlined" \| "filled"	null	Specifies the input variant of the component.
size	"small" \| "large"	null	Defines the size of the component.
minDate	Date	null	The minimum selectable date.
maxDate	Date	null	The maximum selectable date.
disabledDates	Date[]	null	Array with dates that should be disabled (not selectable).
disabledDays	number[]	null	Array with weekday numbers that should be disabled (not selectable).
yearRange	string	null	The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).
showTime	boolean	null	Whether to display timepicker.
responsiveOptions	DatePickerResponsiveOptions[]	null	An array of options for responsive design.
numberOfMonths	number	null	Number of months to display.
firstDayOfWeek	number	null	Defines the first of the week for various date calculations.
locale	LocaleSettings	null	Option to set datepicker locale.
view	DatePickerTypeView	null	Type of view to display, valid values are "date" for datepicker and "month" for month picker.
defaultDate	Date	null	Set the date to highlight on first opening if the field is blank.

name	parameters	description
onFocus	event : Event	Callback to invoke on focus of input field.
onBlur	event : Event	Callback to invoke on blur of input field.
onClose	event : AnimationEvent_2	Callback to invoke when date panel closed.
onSelect	value : Date	Callback to invoke on date select.
onClear	value : any	Callback to invoke when input field cleared.
onInput	value : any	Callback to invoke when input field is being typed.
onTodayClick	value : Date	Callback to invoke when today button is clicked.
onClearClick	value : any	Callback to invoke when clear button is clicked.
onMonthChange	event : DatePickerMonthChangeEvent	Callback to invoke when a month is changed using the navigators.
onYearChange	event : DatePickerYearChangeEvent	Callback to invoke when a year is changed using the navigators.
onClickOutside	value : any	Callback to invoke when clicked outside of the date panel.
onShow	value : any	Callback to invoke when datepicker panel is shown.

name	parameters	description
date	context : { $implicit: Date, // Date value of the component. }	Custom header template.
decade	context : { $implicit: Date, // An array containing the start and and year of a decade to display at header of the year picker. }	Custom decade template
disabledDate		Custom disabled date template.
header		Custom header template.
inputIconTemplate	context : { clickCallBack: undefined, // Click callback }	Custom input icon template.
previousicon		Custom previous icon template.
nexticon		Custom next icon template.
triggericon		Custom dropdown trigger icon template.
clearicon		Custom clear icon template.
decrementicon		Custom decrement icon template.
incrementicon		Custom increment icon template.
footer		Custom footer template.

name	type	description
firstDayOfWeek	number	Day value.
dayNames	string[]	Day names.
dayNamesShort	string[]	Shortened day names.
dayNamesMin	string[]	Minimum days names.
monthNames	string[]	Month names.
monthNamesShort	string[]	Shortened month names.
today	string	Value of today date string.
clear	string	Clear.
dateFormat	string	Date format.
weekHeader	string	Week header.

name	type	description
month	number	Mont value.
year	number	Year value.
dates	Date[]	Array of dates.
weekNumbers	number[]	Array of week numbers.

Wk	Su	Mo	Tu	We	Th	Fr	Sa
48	1	2	3	4	5	6	7
49	8	9	10	11	12	13	14
50	15	16	17	18	19	20	21
51	22	23	24	25	26	27	28
52	29	30	31	1	2	3	4

name	type	description
breakpoint	string	Breakpoint for responsive mode. Exp;
numMonths	number	The number of visible months on breakpoint.

class	description
p-datepicker	Class name of the root element
p-datepicker-input	Class name of the input element
p-datepicker-dropdown	Class name of the dropdown element
p-datepicker-input-icon-container	Class name of the input icon container element
p-datepicker-input-icon	Class name of the input icon element
p-datepicker-panel	Class name of the panel element
p-datepicker-calendar-container	Class name of the calendar container element
p-datepicker-calendar	Class name of the calendar element
p-datepicker-header	Class name of the header element
p-datepicker-prev-button	Class name of the previous button element
p-datepicker-title	Class name of the title element
p-datepicker-select-month	Class name of the select month element
p-datepicker-select-year	Class name of the select year element
p-datepicker-decade	Class name of the decade element
p-datepicker-next-button	Class name of the next button element
p-datepicker-day-view	Class name of the day view element
p-datepicker-weekheader	Class name of the week header element
p-datepicker-weeknumber	Class name of the week number element
p-datepicker-weeklabel-container	Class name of the week label container element
p-datepicker-weekday-cell	Class name of the week day cell element
p-datepicker-weekday	Class name of the week day element
p-datepicker-day-cell	Class name of the day cell element
p-datepicker-day	Class name of the day element
p-datepicker-month-view	Class name of the month view element
p-datepicker-month	Class name of the month element
p-datepicker-year-view	Class name of the year view element
p-datepicker-year	Class name of the year element
p-datepicker-time-picker	Class name of the time picker element
p-datepicker-hour-picker	Class name of the hour picker element
p-datepicker-increment-button	Class name of the increment button element
p-datepicker-decrement-button	Class name of the decrement button element
p-datepicker-separator	Class name of the separator element
p-datepicker-minute-picker	Class name of the minute picker element
p-datepicker-second-picker	Class name of the second picker element
p-datepicker-ampm-picker	Class name of the ampm picker element
p-datepicker-buttonbar	Class name of the buttonbar element
p-datepicker-today-button	Class name of the today button element
p-datepicker-clear-button	Class name of the clear button element

token	variable	description
datepicker.transition.duration	--p-datepicker-transition-duration	Transition duration of root
datepicker.panel.background	--p-datepicker-panel-background	Background of panel
datepicker.panel.border.color	--p-datepicker-panel-border-color	Border color of panel
datepicker.panel.color	--p-datepicker-panel-color	Color of panel
datepicker.panel.border.radius	--p-datepicker-panel-border-radius	Border radius of panel
datepicker.panel.shadow	--p-datepicker-panel-shadow	Shadow of panel
datepicker.panel.padding	--p-datepicker-panel-padding	Padding of panel
datepicker.header.background	--p-datepicker-header-background	Background of header
datepicker.header.border.color	--p-datepicker-header-border-color	Border color of header
datepicker.header.color	--p-datepicker-header-color	Color of header
datepicker.header.padding	--p-datepicker-header-padding	Padding of header
datepicker.header.font.weight	--p-datepicker-header-font-weight	Font weight of header
datepicker.header.gap	--p-datepicker-header-gap	Gap of header
datepicker.title.gap	--p-datepicker-title-gap	Gap of title
datepicker.title.font.weight	--p-datepicker-title-font-weight	Font weight of title
datepicker.dropdown.width	--p-datepicker-dropdown-width	Width of dropdown
datepicker.dropdown.border.color	--p-datepicker-dropdown-border-color	Border color of dropdown
datepicker.dropdown.hover.border.color	--p-datepicker-dropdown-hover-border-color	Hover border color of dropdown
datepicker.dropdown.active.border.color	--p-datepicker-dropdown-active-border-color	Active border color of dropdown
datepicker.dropdown.border.radius	--p-datepicker-dropdown-border-radius	Border radius of dropdown
datepicker.dropdown.focus.ring.width	--p-datepicker-dropdown-focus-ring-width	Focus ring width of dropdown
datepicker.dropdown.focus.ring.style	--p-datepicker-dropdown-focus-ring-style	Focus ring style of dropdown
datepicker.dropdown.focus.ring.color	--p-datepicker-dropdown-focus-ring-color	Focus ring color of dropdown
datepicker.dropdown.focus.ring.offset	--p-datepicker-dropdown-focus-ring-offset	Focus ring offset of dropdown
datepicker.dropdown.focus.ring.shadow	--p-datepicker-dropdown-focus-ring-shadow	Focus ring shadow of dropdown
datepicker.dropdown.background	--p-datepicker-dropdown-background	Background of dropdown
datepicker.dropdown.hover.background	--p-datepicker-dropdown-hover-background	Hover background of dropdown
datepicker.dropdown.active.background	--p-datepicker-dropdown-active-background	Active background of dropdown
datepicker.dropdown.color	--p-datepicker-dropdown-color	Color of dropdown
datepicker.dropdown.hover.color	--p-datepicker-dropdown-hover-color	Hover color of dropdown
datepicker.dropdown.active.color	--p-datepicker-dropdown-active-color	Active color of dropdown
datepicker.input.icon.color	--p-datepicker-input-icon-color	Color of input icon
datepicker.select.month.hover.background	--p-datepicker-select-month-hover-background	Hover background of select month
datepicker.select.month.color	--p-datepicker-select-month-color	Color of select month
datepicker.select.month.hover.color	--p-datepicker-select-month-hover-color	Hover color of select month
datepicker.select.month.padding	--p-datepicker-select-month-padding	Padding of select month
datepicker.select.month.border.radius	--p-datepicker-select-month-border-radius	Border radius of select month
datepicker.select.year.hover.background	--p-datepicker-select-year-hover-background	Hover background of select year
datepicker.select.year.color	--p-datepicker-select-year-color	Color of select year
datepicker.select.year.hover.color	--p-datepicker-select-year-hover-color	Hover color of select year
datepicker.select.year.padding	--p-datepicker-select-year-padding	Padding of select year
datepicker.select.year.border.radius	--p-datepicker-select-year-border-radius	Border radius of select year
datepicker.group.border.color	--p-datepicker-group-border-color	Border color of group
datepicker.group.gap	--p-datepicker-group-gap	Gap of group
datepicker.day.view.margin	--p-datepicker-day-view-margin	Margin of day view
datepicker.week.day.padding	--p-datepicker-week-day-padding	Padding of week day
datepicker.week.day.font.weight	--p-datepicker-week-day-font-weight	Font weight of week day
datepicker.week.day.color	--p-datepicker-week-day-color	Color of week day
datepicker.date.hover.background	--p-datepicker-date-hover-background	Hover background of date
datepicker.date.selected.background	--p-datepicker-date-selected-background	Selected background of date
datepicker.date.range.selected.background	--p-datepicker-date-range-selected-background	Range selected background of date
datepicker.date.color	--p-datepicker-date-color	Color of date
datepicker.date.hover.color	--p-datepicker-date-hover-color	Hover color of date
datepicker.date.selected.color	--p-datepicker-date-selected-color	Selected color of date
datepicker.date.range.selected.color	--p-datepicker-date-range-selected-color	Range selected color of date
datepicker.date.width	--p-datepicker-date-width	Width of date
datepicker.date.height	--p-datepicker-date-height	Height of date
datepicker.date.border.radius	--p-datepicker-date-border-radius	Border radius of date
datepicker.date.padding	--p-datepicker-date-padding	Padding of date
datepicker.date.focus.ring.width	--p-datepicker-date-focus-ring-width	Focus ring width of date
datepicker.date.focus.ring.style	--p-datepicker-date-focus-ring-style	Focus ring style of date
datepicker.date.focus.ring.color	--p-datepicker-date-focus-ring-color	Focus ring color of date
datepicker.date.focus.ring.offset	--p-datepicker-date-focus-ring-offset	Focus ring offset of date
datepicker.date.focus.ring.shadow	--p-datepicker-date-focus-ring-shadow	Focus ring shadow of date
datepicker.month.view.margin	--p-datepicker-month-view-margin	Margin of month view
datepicker.month.padding	--p-datepicker-month-padding	Padding of month
datepicker.month.border.radius	--p-datepicker-month-border-radius	Border radius of month
datepicker.year.view.margin	--p-datepicker-year-view-margin	Margin of year view
datepicker.year.border.radius	--p-datepicker-year-border-radius	Border radius of year
datepicker.buttonbar.padding	--p-datepicker-buttonbar-padding	Padding of buttonbar
datepicker.buttonbar.border.color	--p-datepicker-buttonbar-border-color	Border color of buttonbar
datepicker.time.picker.padding	--p-datepicker-time-picker-padding	Padding of time picker
datepicker.time.picker.border.color	--p-datepicker-time-picker-border-color	Border color of time picker
datepicker.time.picker.gap	--p-datepicker-time-picker-gap	Gap of time picker
datepicker.time.picker.button.gap	--p-datepicker-time-picker-button-gap	Button gap of time picker
datepicker.today.background	--p-datepicker-today-background	Background of today
datepicker.today.color	--p-datepicker-today-color	Color of today

Wk	Su	Mo	Tu	We	Th	Fr	Sa
48	1	2	3	4	5	6	7
49	8	9	10	11	12	13	14
50	15	16	17	18	19	20	21
51	22	23	24	25	26	27	28
52	29	30	31	1	2	3	4

DatePicker

Import #

Basic #

Reactive Forms #

Format #

Locale #

Icon #

Min / Max #

Multiple #

Range #

Button Bar #

Time #

Month Picker #

Year Picker #

Multiple Months #

Date Template #

Inline #

Float Label #

Ifta Label #

Sizes #

Filled #

Invalid #

Disabled #

Accessibility #

Screen Reader

Choose Date Button Keyboard Support

Popup Keyboard Support

Header Buttons Keyboard Support

Date Grid Keyboard Support

Footer Buttons Keyboard Support

DatePicker API

DatePicker #

Properties #

Emitters #

Templates #

Events #

DatePickerYearChangeEvent #

DatePickerMonthChangeEvent #

Interfaces #

LocaleSettings #

Month #

DatePickerResponsiveOptions #

Types #

DatePickerTypeView #

NavigationState #

DatePicker Theming

CSS Classes #

DatePicker Design Tokens #

Wk	Su	Mo	Tu	We	Th	Fr	Sa
48	1	2	3	4	5	6	7
49	8	9	10	11	12	13	14
50	15	16	17	18	19	20	21
51	22	23	24	25	26	27	28
52	29	30	31	1	2	3	4