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

Date Range Picker overview

TailNG Date Range Picker ships as a compact single-calendar wrapper with optional dual-month start/end editing, 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 Date Range Picker docs.

Simple sample (Plain-CSS)

Imports

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

Wrapper import

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

Headless binding imports

ts
import { TngIcon } from '@tailng-ui/icons';
import {
  bindTngDateRangePicker,
  createDateRangePickerController,
  TngDateRangePickerDayCell,
  TngDateRangePickerDayGrid,
  TngDateRangePickerHost,
  TngDateRangePickerInput,
  TngDateRangePickerMonthGrid,
  TngDateRangePickerMonthOption,
  TngDateRangePickerNextButton,
  TngDateRangePickerOverlay,
  TngDateRangePickerPeriodButton,
  TngDateRangePickerPrevButton,
  TngDateRangePickerTrigger,
  TngDateRangePickerYearGrid,
  TngDateRangePickerYearOption,
} from '@tailng-ui/primitives';

Quick start

Default wrapper usage

html
<tng-date-range-picker
  calendarLayout="dual"
  [defaultValue]="{ start: '2024-04-22', end: '2024-04-26' }"
  [today]="'2024-04-18'"
  [minDate]="'2024-04-01'"
  [maxDate]="'2026-03-31'"
  ariaLabel="Invoice period"
></tng-date-range-picker>

Headless orchestration

The wrapper keeps the material drill-down flow by default. Headless implementations should start with bindTngDateRangePicker(...) 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 = createDateRangePickerController<Date>({
  ownerDocument: document,
  value: { start: '2024-04-22', end: '2024-04-26' },
  today: '2024-04-18',
  minDate: '2024-04-01',
  maxDate: '2026-03-31',
  closeOnSelect: true,
  trapFocus: true,
  showOutsideDays: true,
});

readonly dateRangePicker = bindTngDateRangePicker(this.controller);

Behavior baseline

  • The wrapper supports uncontrolled and controlled selection through defaultValue and value.
  • calendarLayout defaults to Material-style single selection. In dual, the left calendar edits start and the right calendar edits end while enforcing end >= start. Responsive mode switches panel count at 40rem.
  • Range selection commits a { start, end } value and keeps hover preview state on day cells.
  • 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.