Getting StartedInstallation and setup guides 6
FormInput and selection components 26
LayoutWorkflow and structural layout components 10
NavigationMenu surfaces and hierarchical actions 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 6
UtilityGeneral-purpose interface utilities 7
Overview API Styling Examples

Yearpicker overview

TailNG Yearpicker is a year-only selection surface built on the shared datepicker component. It opens directly on the year grid, emits a plain number on selection, and closes automatically — making it ideal for fiscal year fields, filter panels, and settings where month and day are not relevant.

Simple sample

Compare the stock wrapper in its default plain-CSS presentation and in a theme-aware Tailwind shell.

Simple sample (Plain-CSS)

Import

Add TngYearpickerComponent to your component's imports array.

Wrapper import

ts
import { TngYearpickerComponent } from '@tailng-ui/components';

Quick start

Default wrapper usage

html
<tng-yearpicker
  [defaultValue]="2024"
  [minYear]="2000"
  [maxYear]="2030"
  placeholder="YYYY"
></tng-yearpicker>

How it works

The yearpicker wraps the shared datepicker with a custom adapter that formats dates as plain four-digit years and parses YYYY strings back into a Date. The fixedMonth and fixedDay inputs pin the internal date to a consistent anchor — useful when the downstream system expects a full date but only cares about the year. On open, the popup jumps directly to the year grid; when the user picks a year, the popup closes and valueChange emits the number.

Behavior baseline

  • Supports both uncontrolled (defaultValue) and controlled (value) selection modes.
  • The text input accepts a four-digit YYYY string; invalid input is discarded.
  • minYear and maxYear constrain the year grid and keyboard navigation.
  • The popup opens directly on the year grid and closes automatically after selection.
  • yearPageSize controls how many years appear per page (default 24).
  • Integrates with tng-form-field via the TNG_FORM_FIELD_CONTROL token.
  • Theme changes flow through semantic tokens so the field and portaled overlay stay in sync.