Date Input for Angular

import { AuiDateInput } from '@absoluteui/angular/date-input';

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

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

Example

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

@Component({
  selector: 'app-applicant',
  imports: [ReactiveFormsModule, AuiDateInput],
  template: `
    <form [formGroup]="applicant">
      <aui-date-input label="Date of birth" [max]="latest" [required]="true" formControlName="birthDate"></aui-date-input>
    </form>`,
})
export class ApplicantComponent {
  readonly latest = plainDate(2026, 9, 27);
  readonly applicant = new FormGroup({ birthDate: new FormControl<PlainDate | null>(null, { validators: [Validators.required] }) });
}

`<aui-date-input>`

Class AuiDateInput; template reference #ref="auiDateInput".

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

Angular forms: implements ControlValueAccessor and Validator; the form value is DateInputValue \| 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. Group label and accessible name.
`min`	`DateInputValue \| null`		Inclusive lower bound.
`max`	`DateInputValue \| null`		Inclusive upper bound.
`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 all segments.
`readOnly`	`boolean`	`false`	Prevents editing.
`granularity`	`DateInputGranularity`	`'date'`	Value type and segments.
`hourCycle`	`HourCycle`	`'auto'`	12/24-hour clock; auto follows the locale.
`locale`	`string`	`'en-US'`	Segment order, labels, messages, formatting.
`timezone`	`string`	`'UTC'`	Zone for minute granularity.
`disambiguation`	`Disambiguation`	`'compatible'`	DST policy for nonexistent/ambiguous local times.
`direction`	`"ltr" \| "rtl"`	`'ltr'`	Arrow-key segment navigation direction.

Two-way bindings

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

Outputs

Output	Payload	Description
`(changed)`	`DateInputChangeDetail`	User edit changed the value or validity. Re-emits `aui-change`.

Methods

Call them through a viewChild query or a template reference.

Method	Description
`setLocalValue(value: PlainDateTime \| null): void`	Minute granularity, for composite controls: write a wall-clock date-time resolved as if typed (timezone, disambiguation, DST hint or error). No aui-change.
`reportValidity(): boolean \| undefined`	Show messages immediately; returns validity.
`setCustomError(message: string \| null): void`	External error (server, cross-field rule); cleared when the user changes the value.
`focus(): void`	Focus the control.
`reset(): void`	Restore the initial value and clear touched/submitted state (no aui-change).
`getFormValue(): string \| null \| undefined`	ISO 8601 value (YYYY-MM-DD or instant with Z), or null when empty or invalid.