DateTime Picker for Angular

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

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

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

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { parseInstant, type Instant } from '@absoluteui/core';
import { AuiDateTimePicker } from '@absoluteui/angular/date-time-picker';

@Component({
  selector: 'app-flight',
  imports: [ReactiveFormsModule, AuiDateTimePicker],
  template: `<aui-date-time-picker label="Departure" timezone="America/New_York" [min]="earliest" [step]="15" [required]="true" [formControl]="departure"></aui-date-time-picker>`,
})
export class FlightComponent {
  readonly earliest = parseInstant('2026-09-27T12:00:00Z');
  readonly departure = new FormControl<Instant | null>(null, { validators: [Validators.required] });
}

<aui-date-time-picker>

Class AuiDateTimePicker; template reference #ref="auiDateTimePicker".

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

Angular forms: implements ControlValueAccessor and Validator; the form value is Instant \| 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	Instant | null		Inclusive lower bound (validation, calendar days, and suggested times).
max	Instant | null		Inclusive upper bound (validation, calendar days, and suggested times).
name	string		Form field name for the hidden input carrying the ISO 8601 instant (Z).
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 trigger button.
readOnly	boolean	false	Prevents editing; the trigger 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<DateTimePickerIcons>		Icon slot overrides.
closeOnSelect	boolean	true	Close the popup after a time is picked (picking a day keeps it open).
step	number	'30'	Minutes between suggested times, from midnight.
hourCycle	HourCycle	'auto'	Clock of the segments and the suggested times; ‘auto’ follows the locale.
locale	string	'en-US'	Segment order, calendar, time labels, messages, formatting; forwarded to both children.
timezone	string	'UTC'	Zone in which wall-clock input is resolved and values are displayed; also today in the calendar.
disambiguation	Disambiguation	'compatible'	DST policy for nonexistent and repeated wall-clock times (typed or picked).
direction	"ltr" | "rtl"	'ltr'	Arrow-key mirroring, calendar direction, and popup alignment.

Two-way bindings

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

Outputs

Output	Payload	Description
(changed)	DateTimePickerChangeDetail	User typing or picking changed the value, validity, or DST status. 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 popup and focus the selected day (or today). No-op when disabled or read-only.
close(): void	Close the popup; focus inside the popup returns to the trigger 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 instant with Z, or null when empty or invalid.
focus(): void	Focus the first segment.
reset(): void	Close, restore the initial value, and clear touched/submitted state (no aui-change).