Date Range Picker for Angular

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

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

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

Example

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

@Component({
  selector: 'app-stay',
  imports: [ReactiveFormsModule, AuiDateRangePicker],
  template: `<aui-date-range-picker label="Stay" [min]="today" [maxDays]="14" [required]="true" [formControl]="stay"></aui-date-range-picker>`,
})
export class StayComponent {
  readonly today = plainDate(2026, 9, 27);
  readonly stay = new FormControl<Range<PlainDate> | null>(null, { validators: [Validators.required] });
}

<aui-date-range-picker>

Class AuiDateRangePicker; template reference #ref="auiDateRangePicker".

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

Angular forms: implements ControlValueAccessor and Validator; the form value is Range<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. Visible group label and accessible name of the role=group around both fields.
startLabel	string		Accessible name of the start field (visually hidden). Default: localized ‘Start date’.
endLabel	string		Accessible name of the end field (visually hidden). Default: localized ‘End date’.
min	PlainDate | null		Inclusive lower bound for both dates (validation and calendar).
max	PlainDate | null		Inclusive upper bound for both dates (validation and calendar).
minDays	number		Minimum range length in days, counting the start and end day (integer 1-100000).
maxDays	number		Maximum range length in days, counting the start and end day (integer 1-100000).
name	string		Form field name; Form and the hidden input carry the ISO 8601 interval YYYY-MM-DD/YYYY-MM-DD.
startName	string		Field name of the start date’s own hidden input (YYYY-MM-DD) for native form posts.
endName	string		Field name of the end date’s own hidden input (YYYY-MM-DD) for native form posts.
description	string		Help text referenced by the group’s aria-describedby.
required	boolean	false	Both dates are required (value-missing).
disabled	boolean	false	Disables both fields and the calendar button; a disabled picker is not submitted.
readOnly	boolean	false	Prevents editing; the calendar button is disabled.
isDateDisabled	(date: PlainDate) => boolean		Disable days in the calendar; a typed disabled start or end day is invalid (‘date-unavailable’). Days between the ends are not checked.
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).
validate	(value: Range<PlainDate> | null) => string | null		Consumer validation, run when the field and range constraints pass; return a message to mark the value invalid (error ‘custom’).
firstDayOfWeek	Weekday		First calendar column (ISO weekday). Default: the locale’s first day of week.
icons	Partial<DateRangePickerIcons>		Icon slot overrides.
closeOnSelect	boolean	true	Close the popup after the last day of the range is picked.
months	DateRangePickerMonths	'auto'	Months in the popup. ‘auto’: two when the viewport is at least 40rem wide when the popup opens, else one. Applied on the next open.
locale	string	'en-US'	Segment order, calendar, messages, formatting; forwarded to all 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)]	Range<PlainDate> | null	(valueChange)	The value: [(value)] without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
(changed)	DateRangePickerChangeDetail	User typing or a completed calendar pick changed the value or validity. Dispatched from the picker host; the inner Date Input and Calendar change events are not exposed. Re-emits aui-change.
(navigate)	{ month: { year: number; month: number } }	Bubbles from the inner Calendar when the user changes the visible months; month is the first 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 on the range start (else the typed start date, else today) and focus it. No-op when disabled or read-only.
close(): void	Close the calendar; an unfinished pick is discarded. Focus inside the popup returns to the calendar button.
reportValidity(): boolean | undefined	Show both fields’ messages now and return validity.
setCustomError(message: string | null): void	External error (server, cross-field rule), shown on the end field; cleared when the user changes either date. null or ‘’ clears it.
getFormValue(): string | null | undefined	ISO 8601 interval YYYY-MM-DD/YYYY-MM-DD, or null when there is no valid range.
focus(): void	Focus the first segment of the start date.
reset(): void	Close, restore the initial range, and clear the custom error and touched/submitted state (no aui-change).