Year Picker for Angular

import { AuiYearPicker } from '@absoluteui/angular/year-picker';

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

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

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { AuiYearPicker } from '@absoluteui/angular/year-picker';

@Component({
  selector: 'app-vehicle',
  imports: [ReactiveFormsModule, AuiYearPicker],
  template: `<aui-year-picker label="Model year" [min]="1990" [required]="true" [formControl]="year"></aui-year-picker>`,
})
export class VehicleComponent {
  readonly year = new FormControl<number | null>(null, { validators: [Validators.required] });
}

<aui-year-picker>

Class AuiYearPicker; template reference #ref="auiYearPicker".

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

Angular forms: implements ControlValueAccessor and Validator; the form value is number \| 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 label and accessible name of the group (via aria-labelledby). Must be a non-empty string.
hideLabel	boolean	false	Visually hide the label; it remains the accessible name.
min	number | null	null	Inclusive lower bound (integer year; validation and popup). Must not be after max.
max	number | null	null	Inclusive upper bound (integer year; validation and popup).
name	string		Form field name; a hidden input carries the year as zero-padded YYYY.
description	string		Help text (text only) referenced by the group’s aria-describedby.
required	boolean	false	An empty entry is invalid (value-missing); the segment is required and the required indicator is shown.
disabled	boolean	false	Disables the segment and the button; the popup does not open and the value is not submitted.
readOnly	boolean	false	Focusable and submitted, but not editable; the popup does not open.
validate	(value: number | null) => string | null		Consumer validation after the built-in checks; return a non-empty message to mark the value invalid (error ‘custom’).
isYearDisabled	(year: number) => boolean		Return true to disable a year: focusable in the popup but not selectable; typed, it is invalid (error ‘unavailable’).
today	PlainDate		Advanced: fixed today instead of the current date in timezone; it decides the current year. For tests, server rendering, and demos with a fixed clock.
icons	Partial<PeriodPickerIcons>		Icon slot overrides: calendar, previous, next, error.
validationTiming	ValidationTiming	'blur'	When validation messages first appear; afterwards they update live.
closeOnSelect	boolean	true	Close the popup after a year is picked.
locale	string	'en-US'	Year formatting, headings, labels, and messages.
timezone	string	'UTC'	Zone used only to determine the current year (aria-current, default focus, and the start of stepping an empty segment).
direction	"ltr" | "rtl"	'ltr'	Popup and grid direction: grid arrow-key mirroring, chevrons, and popup alignment (applied when the popup opens).

Two-way bindings

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

Outputs

Output	Payload	Description
(changed)	YearPickerChangeDetail	The user changed the value or its validity error (typing, stepping, or picking a year). Re-emits aui-change.
(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 year (or the current year), clamped to min/max. No-op when open, disabled, or read-only.
close(): void	Close the popup; focus inside it returns to the button.
reportValidity(): boolean | undefined	Show messages now (for every validation timing) and return validity.
setCustomError(message: string | null): void	External error (server, cross-field rule); null or ‘’ clears it; cleared when the user edits.
getFormValue(): string | null | undefined	Zero-padded YYYY, or null when the value is null.
focus(): void	Focus the year segment.
reset(): void	Close, restore the initial value, and clear dirty/touched/submitted state (no events).