Appearance
DatePicker vs the per-framework date pickers
Date pickers are one of the most-reimplemented widgets in front-end, and almost every option a design-system author can reach for is single-framework. The accessible, headless ones (React Aria, Melt/Bits UI) are locked to one framework; the styled, feature-deep ones (MUI X, @vuepic/vue-datepicker, flatpickr) are likewise React-only, Vue-only, or a vanilla engine you re-wrap per target. So a team shipping a design system across React + Vue + Svelte + Angular (+ Solid + Lit) adopts and maintains a different date picker per framework, with divergent APIs, divergent theming, and wildly divergent accessibility quality.
@rozie-ui/date-picker takes the other path: six accessible packages with one API (value model, min/max/disabledDates, roving-grid keyboard nav, a #header slot, a focus/goToToday/clear handle). It does less than the feature-deep incumbents on purpose: single-date or range selection (with preset shortcuts), headless, token-themed. That scope is spelled out below.
Research snapshot: 2026-08-10. Versions, publish dates, and weekly-download figures were verified live against the npm registry (
registry.npmjs.org) and the npm downloads API. The date-picker landscape moves; re-check before relying on a specific number. Download counts are a single-week sample and bounce week to week — treat them as rough order-of-magnitude, not a quality verdict.
The landscape at a glance
Cell legend: ✓ = yes / documented · ✗ = no / not present · ~ = partial / stale / lightly-documented.
| Library | Framework(s) | Headless? | WAI-ARIA a11y | Maintained (latest / date) | Range / time | Notes |
|---|---|---|---|---|---|---|
@rozie-ui/date-picker | React + Vue + Svelte + Angular + Solid + Lit | ✓ token-themed | ✓ ARIA grid + roving keyboard | pre-1.0, released together | range ✓ / time ✗ | Same API, six packages. Single + range selection with presets; no time-of-day. |
| react-datepicker | React | ✗ styled | ~ keyboard, partial ARIA | 9.1.0 / 2025-12 | ✓ / ✓ | ~5.0M wk. The popular default; opinionated CSS. |
| react-day-picker | React | ~ restyleable | ✓ follows APG | 10.0.1 / 2026-05 | range ✓ / time ✗ | Strong a11y; non-Gregorian calendars. Powers shadcn/ui's calendar. |
| @mui/x-date-pickers | React | ✗ Material | ✓ documented WCAG/ARIA | 9.11.0 / 2026-08 | time ✓ / range Pro-only | Date/time/datetime free; range pickers are commercial. |
react-aria (useDatePicker/useCalendar) | React | ✓ hooks | ✓ best-in-class | 3.51.0 / 2026-07 | ✓ / ✓ | Adobe; the accessibility gold standard. React-only. |
| Ariakit | React | ✓ | n/a | 0.4.37 / 2026-08 | — | No date/calendar primitive at all — build it from Popover yourself. |
| @vuepic/vue-datepicker | Vue 3 | ✗ styled | ✓ documented | 14.0.0 / 2026-06 | ✓ / ✓ | Deepest Vue option: range, time, month/year/week, multi-cal. |
| v-calendar | Vue (3.x via @next) | ✗ styled | ~ weak | 3.1.2 / 2023-10 | range ✓ / time ✗ | Vue-3 build ~3 yrs stale; a11y long-flagged. |
| vue-datepicker-next | Vue 3 | ✗ styled | ✗ undocumented | 1.0.3 / 2023-03 | ✓ / ✓ | Unmaintained (>3 yrs). |
| bits-ui | Svelte 5 | ✓ headless | ✓ (on @internationalized/date) | 2.18.1 / 2026-05 | ✓ / ✓ | The live, maintained Svelte choice; wraps Melt internally. |
| @melt-ui/svelte | Svelte 3/4/5 | ✓ builders | ✓ strongest Svelte a11y docs | 0.86.6 / 2025-03 | ✓ / ✓ | Builder API; momentum shifted to bits-ui. |
| date-picker-svelte | Svelte 5 | ✗ styled | ~ undocumented | 3.0.0 / 2026-07 | time ✓ / range ✗ | Small, single-date + time. |
| svelty-picker | Svelte 5 | ~ themable | ~ keyboard claimed | 6.1.6 / 2025-09 | range ✓ / time ✓ | Niche (~5k wk), Bootstrap-flavored. |
| @angular/material (MatDatepicker) | Angular | ✗ Material | ✓ documented | 22.1.1 / 2026-08 | range ✓ / sep. timepicker | First-party; tracks the Angular release train. |
| PrimeNG DatePicker | Angular | ✗ themed | ✓ documented | 22.0.0 / 2026-07 | ✓ / ✓ | Deepest Angular feature set (range/time/month/year). |
| ng-bootstrap (NgbDatepicker) | Angular | ✗ Bootstrap | ~ gaps reported | 21.0.0 / 2026-06 | range ✓ / time ✗ | Needs Bootstrap CSS; documented screen-reader gaps. |
| flatpickr | vanilla (re-wrapped) | ✗ styled | ✗ known weak spot | 4.6.13 / 2022-04 | ✓ / ✓ | Huge usage (~1.8M wk) but 4+ yrs stale; a11y a known pain point. |
| air-datepicker | vanilla | ✗ styled | ~ thin | 3.6.0 / 2025-05 | ✓ / ✓ | Dependency-free; ARIA not comprehensively documented. |
| duet-date-picker | web component | ✗ themable | ✓ a11y was its pitch | 1.4.0 / 2021-06 | ✗ single-date | Repo archived read-only 2024-09 — not maintained. |
| Cally | framework-agnostic WC | ~ CSS parts | ✓ a11y a core goal | 0.9.2 / 2026-02 | range ✓ / time ✗ | The modern up-and-comer; pre-1.0, framework-independent. |
On its home framework each of these is a solid pick, and Rozie does not claim to out-feature MUI X on React or @vuepic on Vue. The case for Rozie is coverage and consistency, addressed next.
The cross-framework parity argument
Line the landscape up by framework and the gap is structural, not cosmetic:
- React has the richest set — but the accessible headless one (react-aria) is React-only, and even the popular default (react-datepicker) ships opinionated CSS. Ariakit — a headless accessible toolkit you might assume covers this — has no date primitive at all.
- Vue's only actively-maintained, a11y-documented option is @vuepic/vue-datepicker; the other two are stale (v-calendar's Vue-3 build last shipped 2023-10; vue-datepicker-next over three years ago). Different API, different theming model than anything on React.
- Svelte is its own ecosystem again — bits-ui (headless, built on Adobe's
@internationalized/date) with Melt beneath it. Builders and snippets, nothing like the React or Vue surface. - Angular hands you styled, framework-locked components (Material, PrimeNG, ng-bootstrap) wired through
ControlValueAccessor— a fourth API and a fourth theming story. - Solid and Lit have essentially nothing first-class. The closest cross-framework answer is a vanilla engine like flatpickr (stale since 2022, a11y a known weak spot) or the promising web component Cally — but flatpickr still needs a per-framework wrapper, and Cally is pre-1.0.
So a single design system today binds react-aria on React, @vuepic on Vue, bits-ui on Svelte, a MatDatepicker on Angular, and hand-rolls Solid/Lit: five APIs, five theming models, and accessibility that ranges from best-in-class (react-aria) to a documented pain point (flatpickr). @rozie-ui/date-picker authors the WAI-ARIA grid pattern, the roving keyboard focus, the min/max/disabledDates gating, the two-way ISO value model, and the token theme once, and ships the same<DatePicker> to all six, including an Angular ControlValueAccessor generated from the single value model, so [(ngModel)] and reactive forms bind directly. See the API reference for the exact surface.
Where each alternative is the better pick
- You ship one framework and want maximum features. If you're React-only and need time-of-day, month/year picker modes, or non-Gregorian systems, @mui/x-date-pickers or react-datepicker out-feature Rozie outright (note MUI's range pickers are a commercial Pro tier — Rozie's range is free). Vue-only? @vuepic/vue-datepicker is deeper. Angular-only with a time requirement? PrimeNG.
- You need a date-time or multi-date picker today. Rozie ships single-date and date-range selection (with presets), but not time-of-day or arbitrary multi-date. Reach for flatpickr, @vuepic, MUI X, or PrimeNG (time) instead.
- You want the absolute accessibility ceiling on React.react-aria's date hooks are the gold standard (13 calendar systems, touch screen-reader support). Rozie targets a solid, audited WAI-ARIA grid — not Adobe's research budget.
- You're framework-agnostic and want one web component.Cally is a genuinely good, accessible, sub-10KB framework-independent calendar — if a single custom element across all your apps is acceptable (and you don't need an idiomatic React/Vue/Angular component surface), it's a real alternative to Rozie's "idiomatic per framework" approach.
What @rozie-ui/date-picker deliberately is not
Rozie's scope is narrow on purpose.
- Not a date-time or arbitrary multi-date picker. It selects a single date or a date range —
valueis one ISOYYYY-MM-DDstring in single mode, or{ start, end }inselectionMode="range", with optional preset shortcuts (presetRanges+ a#presetsslot). Time-of-day and arbitrary multi-date (3+ discrete dates) remain out of scope, areas where flatpickr, @vuepic, MUI X, and PrimeNG lead. (See theselectionMode+valueprop notes.) - Not a popover/input combo. It is the calendar surface — compose it inside your own field + popover (e.g.
@rozie-ui/popover) when you want a dropdown date field. Staying headless is what lets it drop into any field pattern. - Not the deepest localization story. It uses
Intl.DateTimeFormatfor the month-year heading, weekday labels, day-cell accessible names, and each multi-month panel's own grid caption in any BCP-47locale— plus an optionallabelsprop to translate the 10 static English chrome phrases (Intlcan localize a date, not the phrase "Previous month") — but it does not ship the non-Gregorian calendar systems that react-day-picker, react-aria, bits-ui, and Melt inherit from Adobe's@internationalized/date. - Not a date library. It carries a tiny UTC-safe internal grid helper, not a general date toolkit — bring
date-fns/dayjs/Temporalfor arithmetic elsewhere in your app. The upside: no date-library dependency in the bundle, where the styled incumbents frequently pulldate-fns/dayjs/luxon.
What it does ship
What Rozie does cover, it covers identically everywhere. That uniformity is the point:
| Capability | @rozie-ui/date-picker | Per-framework incumbents |
|---|---|---|
| Cross-framework parity | ✓ same API, 6 packages | ✗ a different library per framework |
| Headless / restyleable | ✓ token-themed + #header / #footer / #presets slots | ~ varies; usually opinionated CSS |
min / max / disabled dates | ✓ built in; a range can neither preview nor commit across a disabled day (pointer + keyboard) | ✓ usually |
| Roving-grid keyboard a11y | ✓ WAI-ARIA grid (arrows / Home / End / PageUp / PageDown / Enter / Space) | ~ ranges from best-in-class to a known weak spot |
| Localized labels | ✓ Intl.DateTimeFormat (day cells, per-panel captions, weekday header, month-year heading) + optional labels prop for the 10 static chrome strings | ✓ usually (often via a date lib) |
| Two-way value + form binding | ✓ ISO value model + Angular ControlValueAccessor on all six | ~ per-framework idiom |
| Imperative handle | ✓ uniform focus() / goToToday() / clear() | ~ varies per library |
| Date-library dependency | ✓ none (UTC-safe internal helper) | ~ frequently date-fns / dayjs / luxon |
| Range selection + presets | ✓ selectionMode="range" + presetRanges/#presets, all six | ✓ many lead here |
| Multi-month view + month/year drill nav | ✓ numberOfMonths (two-up/three-up) + monthYearNav (days → months → years) | ~ varies |
| Time-of-day / arbitrary multi-date | ✗ out of scope (deliberate) | ✓ many lead here |
See also
- DatePicker showcase — the family, packages, and quick start
- API reference — props, events, the
#headerslot, the imperative handle - Live demo — the running calendar with per-target output
- All components — the rest of the
@rozie-uifamilies