Month Picker for Angular

import { AuiMonthPicker } from '@absoluteui/angular/month-picker';

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

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

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { plainYearMonth, type PlainYearMonth } from '@absoluteui/core';
import { AuiMonthPicker } from '@absoluteui/angular/month-picker';

@Component({
  selector: 'app-billing',
  imports: [ReactiveFormsModule, AuiMonthPicker],
  template: `<aui-month-picker label="Billing month" [min]="min" [required]="true" [formControl]="month"></aui-month-picker>`,
})
export class BillingComponent {
  readonly min = plainYearMonth(2024, 1);
  readonly month = new FormControl<PlainYearMonth | null>(null, { validators: [Validators.required] });
}

<aui-month-picker>

Class AuiMonthPicker; template reference #ref="auiMonthPicker".

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

Angular forms: implements ControlValueAccessor and Validator; the form value is PlainYearMonth \| 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	PlainYearMonth | null	null	Inclusive lower bound (validation and popup). Must not be after max.
max	PlainYearMonth | null	null	Inclusive upper bound (validation and popup).
name	string		Form field name; a hidden input carries the ISO 8601 month (YYYY-MM).
description	string		Help text (text only) referenced by the group’s aria-describedby.
required	boolean	false	An empty entry is invalid (value-missing); segments are required and the required indicator is shown.
disabled	boolean	false	Disables the segments 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: PlainYearMonth | null) => string | null		Consumer validation after the built-in checks; return a non-empty message to mark the value invalid (error ‘custom’).
isMonthDisabled	(value: PlainYearMonth) => boolean		Return true to disable a month: 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 month. 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 month is picked.
locale	string	'en-US'	Segment order and separators, month names, headings, labels, and messages. A change rebuilds the segments and keeps the entry.
timezone	string	'UTC'	Zone used only to determine the current month (aria-current and default focus).
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)]	PlainYearMonth | null	(valueChange)	The value: [(value)] without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
(changed)	MonthPickerChangeDetail	The user changed the value or its validity error (typing, stepping, a separator, or picking a month). 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 month (or the current month), 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	ISO 8601 YYYY-MM, or null when the value is null.
focus(): void	Focus the first segment.
reset(): void	Close, restore the initial value, and clear dirty/touched/submitted state (no events).