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

Datepicker overview

TailNG Datepicker ships as a compact wrapper with editable input, keyboard-first calendar navigation, adapter-driven formatting, and bounded month, year, and day selection.

Simple sample

Compare the stock wrapper in its default plain-CSS presentation and in a theme-aware Tailwind shell. Headless composition is covered in the separate headless Datepicker docs.

Simple sample (Plain-CSS)

Imports

Use TngDatepickerComponent for the default wrapper. Reach for createDatepickerController plus bindTngDatepicker when you need custom layout while keeping the same calendar logic, focus behavior, and public slot/state contract.

Wrapper import

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

Headless binding imports

ts
import { TngIcon } from '@tailng-ui/icons';
import {
  bindTngDatepicker,
  createDatepickerController,
  TngDatepickerDayCell,
  TngDatepickerDayGrid,
  TngDatepickerHost,
  TngDatepickerInput,
  TngDatepickerMonthGrid,
  TngDatepickerMonthOption,
  TngDatepickerNextButton,
  TngDatepickerOverlay,
  TngDatepickerPeriodButton,
  TngDatepickerPrevButton,
  TngDatepickerTrigger,
  TngDatepickerYearGrid,
  TngDatepickerYearOption,
} from '@tailng-ui/primitives';

Quick start

Default wrapper usage

html
<tng-datepicker
  [defaultValue]="'2024-04-22'"
  [today]="'2024-04-18'"
  [minDate]="'2024-04-01'"
  [maxDate]="'2026-03-31'"
  ariaLabel="Invoice date"
></tng-datepicker>

Headless orchestration

The wrapper keeps the material drill-down flow by default. Headless implementations should start with bindTngDatepicker(...) and the helper directives so the template keeps the same ARIA, keyboard, and overlay behavior without repeating low-level event plumbing.

Controller + binding setup

ts
readonly controller = createDatepickerController<Date>({
  ownerDocument: document,
  value: '2024-04-22',
  today: '2024-04-18',
  minDate: '2024-04-01',
  maxDate: '2026-03-31',
  closeOnSelect: true,
  trapFocus: true,
  showOutsideDays: true,
});

readonly datepicker = bindTngDatepicker(this.controller);

Behavior baseline

  • The wrapper supports uncontrolled and controlled selection through defaultValue and value.
  • selectionMode switches the same wrapper between single, range, and multiple selection flows.
  • The centered month-year button drills from year to month to day while navigation keeps bounds intact.
  • minDate, maxDate, and disableDate all feed the same availability model.
  • Theme changes should flow through semantic tokens so the field and the portaled overlay stay visually in sync.