Date Picker for Angular

import { AuiDatePicker } from '@absoluteui/angular/date-picker';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Date Picker page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { datePicker: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { plainDate, type PlainDate } from '@absoluteui/core';
import { AuiDatePicker } from '@absoluteui/angular/date-picker';

@Component({
  selector: 'app-trip',
  imports: [ReactiveFormsModule, AuiDatePicker],
  template: `<aui-date-picker label="Departure" [min]="today" [required]="true" [formControl]="departure"></aui-date-picker>`,
})
export class TripComponent {
  readonly today = plainDate(2026, 9, 27);
  readonly departure = new FormControl<PlainDate | null>(null, { validators: [Validators.required] });
}

`<aui-date-picker>`

Class AuiDatePicker; template reference #ref="auiDatePicker".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Angular forms: implements ControlValueAccessor and Validator; the form value is PlainDate \| null. Bind [formControl], formControlName, or [(ngModel)]; validation messages of the component report through the aui error key. See Forms.

Inputs

Input	Type	Default	Description
`label`	`string`		Required. Field label and accessible name of the segment group.
`min`	`PlainDate \| null`		Inclusive lower bound (validation and calendar).
`max`	`PlainDate \| null`		Inclusive upper bound (validation and calendar).
`name`	`string`		Form field name for the ISO 8601 hidden input.
`description`	`string`		Help text referenced by aria-describedby.
`required`	`boolean`	`false`	Empty value is invalid (value-missing).
`disabled`	`boolean`	`false`	Disables the segments and the calendar button.
`readOnly`	`boolean`	`false`	Prevents editing; the calendar button is disabled.
`isDateDisabled`	`(date: PlainDate) => boolean`		Disable days in the calendar; a typed disabled day is invalid (‘This date is not available.’).
`businessCalendar`	`BusinessCalendarEngine \| null`		Business calendar (since 0.9.0): non-working days and holidays are marked and named in the calendar.
`disableNonWorking`	`boolean`	`false`	With businessCalendar: non-working days cannot be picked or typed (since 0.9.0).
`firstDayOfWeek`	`Weekday`		First calendar column (ISO weekday). Default: the locale’s first day of week.
`icons`	`Partial<DatePickerIcons>`		Icon slot overrides.
`closeOnSelect`	`boolean`	`true`	Close the popup after a day is picked.
`locale`	`string`	`'en-US'`	Segment order, calendar, messages, formatting; forwarded to both children.
`timezone`	`string`	`'UTC'`	Zone used only to determine today in the calendar.
`direction`	`"ltr" \| "rtl"`	`'ltr'`	Arrow-key mirroring, calendar direction, and popup alignment.

Two-way bindings

Model	Type	Change output	Description
`[(value)]`	`PlainDate \| null`	`(valueChange)`	The value: `[(value)]` without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
`(changed)`	`DatePickerChangeDetail`	User typing or picking changed the value or validity. Dispatched from the picker host. Re-emits `aui-change`.
`(navigate)`	`{ month: { year: number; month: number } }`	Bubbles from the inner Calendar when the user changes the visible month. Re-emits `aui-navigate`.
`(opened)`	`null`	The popup opened. Re-emits `aui-open`.
`(closed)`	`null`	The popup closed. Re-emits `aui-close`.

Read-only state

Property	Type	Description
`isOpen`	`Signal<boolean>`	Whether the popup is open.

Methods

Call them through a viewChild query or a template reference.

Method	Description
`open(): void`	Open the calendar and focus the selected day (or today). No-op when disabled or read-only.
`close(): void`	Close the calendar; focus inside the popup returns to the calendar button.
`reportValidity(): boolean \| undefined`	Show messages now and return validity.
`setCustomError(message: string \| null): void`	External error (server, cross-field rule); cleared when the user changes the value.
`getFormValue(): string \| null \| undefined`	ISO 8601 YYYY-MM-DD, or null when empty or invalid.
`focus(): void`	Focus the first date segment.
`reset(): void`	Close, restore the initial value, and clear touched/submitted state (no aui-change).

Test harness

AuiDatePickerHarness from @absoluteui/angular/testing. <aui-date-picker>: typed segments and the calendar popup.