Datepicker component added

Token-friendly, form-ready, and built for real-world Angular applications.

TailNG Datepicker provides a practical date input experience for Angular forms. It is designed to work with TailNG form-field patterns, token-based themes, and flexible styling — whether your application uses plain CSS, Tailwind utilities, or its own design system.

What this component focuses on

Theme safety: uses token-friendly styling patterns instead of hard-coded visual assumptions.
Form integration: designed to work cleanly with Angular forms and TailNG form-field layouts.
Flexible styling: works with plain CSS, Tailwind utilities, or custom design-system classes.
Application-ready UX: built for common business forms where date input needs to be clear, predictable, and reusable.

Not Tailwind-only

TailNG provides Tailwind examples because many Angular teams prefer utility-first styling. But the Datepicker is not limited to Tailwind. You can style it with normal CSS classes, Tailwind utilities, theme tokens, or your own design system.

Styling options

Plain CSS: use your own class names and stylesheet rules.
Tailwind: compose layout, spacing, and states with utilities.
Design tokens: keep colors and modes consistent across the app.

Install

yarn add @tailng-ui/components @tailng-ui/theme @tailng-ui/cdk

Datepicker ships as part of @tailng-ui/components.

Usage example

Use the Datepicker directly, or compose it with TailNG form-field for labels, hints, and validation messages.

Template

<tng-form-field label="Invoice date">
  <tng-datepicker formControlName="invoiceDate" />
</tng-form-field>

With local styling

<tng-form-field
  label="Due date"
  [slot]="{
    root: 'mb-4',
    label: 'font-semibold',
    control: 'bg-bg text-fg border-border'
  }"
>
  <tng-datepicker formControlName="dueDate" />
</tng-form-field>

Notes

Use your preferred styling approach for width, spacing, and layout.
Prefer token-based classes in shared examples so dark mode and themes remain safe.
Keep date parsing, display format, and backend format explicit in application code.

Built for business forms

Date inputs appear everywhere in real applications: invoices, due dates, financial years, reports, filters, reconciliation screens, subscription periods, and audit workflows. TailNG Datepicker is designed to fit these screens without forcing a heavy visual framework.

Form screens

Use it inside create/edit forms with labels, hints, validation, and predictable layout.

Filter screens

Use it for report filters, date-based search, and business workflows that depend on date ranges.

Explore the docs, try the component, and follow upcoming form-control updates.

Open docs Back to updates