TailNG logo TailNG Docs
Home / News / Datepicker
Component New generation UI

Datepicker component added

Month + date + year in one screen — adapter-based, format-flexible, and theme-safe.

Preview
New Datepicker UI
TailNG Datepicker - month, date and year in a single screen

Save the image at platform/news/assets/datepicker-gen2.png.

New generation design

Unlike traditional pickers that force multiple views (month view → year view → month view), TailNG Datepicker shows month, date grid, and year selector together in a single screen — making selection fast and predictable.

  • Single-screen flow: month list + date grid + year list visible at once.
  • Fewer clicks: quick navigation across months/years without context switching.
  • Theme-safe styling: intended to work with TailNG tokens + modes.

Use any date library (adapter-based)

TailNG Datepicker is designed with a date adapter approach, so applications can plug in the date engine they already use.

Supported by design
  • Date-fns
  • Day.js
  • Luxon
  • Moment (if needed)
  • Native Date
What adapter controls
  • Parsing and formatting
  • Date add/subtract
  • Start of week, month boundaries
  • Comparisons & validation
  • Locale behaviors

(Docs page will describe the adapter interface and provide example adapters.)

Custom display formats

Your application can display the selected date in any format. The UI selection remains consistent, and formatting is delegated to the adapter/format config.

Examples
// Common formats
DD/MM/YYYY   → 25/02/2026
YYYY-MM-DD   → 2026-02-25
DD MMM YYYY  → 25 Feb 2026
MMM DD, YYYY → Feb 25, 2026
Why this matters
  • Enterprise requirements: different regions, different standards.
  • Consistency: format controlled centrally (not scattered in templates).
  • Library freedom: pick the date library you prefer.

Next

Explore docs, usage patterns, and related form components.

Open docs Back to updates