Flatpickr libraries comparison

Date pickers are one of the most-wrapped vanilla-JS engines in the front-end ecosystem, and flatpickr is the engine the community keeps reaching for. But every framework gets its own wrapper, versioned and maintained separately, and the cross-framework story is whoever happened to publish a binding for your framework this year.

Rozie's @rozie-ui/flatpickr ships the same date picker to every framework in your stack: the same two-way date model, the same managed runtime reconcile, the same imperative handle, and an Angular ControlValueAccessor, on React, Vue, Svelte, Angular, Solid, and Lit alike. Each framework installs a pre-compiled @rozie-ui/flatpickr-* package with no Rozie toolchain required — where the existing ecosystem ships five separate per-framework wrappers and leaves Solid with no flatpickr binding at all.

Every wrapper on this page, including Rozie's, depends on the same flatpickr core engine, version 4.6.13, last published 2022-04-14. The engine itself is effectively frozen, so this comparison is purely about the per-framework binding layer: how each wrapper handles two-way binding, runtime reconcile, imperative access, forms, and which framework versions it supports today.

Comparison matrix

Cell legend: ✓ = documented out-of-the-box · ✗ = not supported / not present · ~ = partial / consumer-glue-required / not documented. ("Not documented" is scored ~, never ✗: absence of documentation is not evidence of absence.)

Wrapper	Frameworks	Last maintained	Latest-framework support	Two-way binding	Runtime reconcile	Imperative handle	Angular CVA	rangePlugin
Rozie @rozie-ui/flatpickr	6 — React + Vue + Svelte + Angular + Solid + Lit	pre-1.0, released together	R18+ / V3.4+ / Sv5 / Ng19+ / Solid / Lit	✓ r-model:date	✓ managed	✓ $expose	✓	✓
react-flatpickr	React	2025-07	React 19 (peer >= 16 <= 19)	✓ value + onChange	~ useMemo	✓ .flatpickr ref	n/a	~
vue-flatpickr-component	Vue 3	✗ archived 2025-03	Vue 3 only	✓ v-model	✓ watches config	~ not documented	n/a	~
angularx-flatpickr	Angular	2024-11	"Angular 17+" (19 in range)	✓ ngModel / CVA	~ not documented	~ via directive	✓	~
svelte-flatpickr	Svelte 3	2024-12	Svelte < 5.0 only	✓ bind:value	~ not documented	~ not documented	n/a	~
lit-flatpickr	Lit 2	2025-03	Lit 2 only (pre-1.0)	✓ attr + set()	~ set() only	✓ rich methods	n/a	~
Solid	—	—	no flatpickr wrapper exists	✗	✗	✗	n/a	✗

Weekly downloads (npm, snapshot 2026-08-03→08-09, dated color rather than a quality verdict): react-flatpickr 237.4k · vue-flatpickr-component 108.8k · angularx-flatpickr 47.3k · svelte-flatpickr 9.3k · lit-flatpickr 1.0k · Rozie @rozie-ui/flatpickr: new.

The matrix scores each wrapper against what it documents out of the box, without consumer-authored glue. All competitor facts were verified against the npm registry, the GitHub API, and each project's README on 2026-08-10; re-check the dates before relying on them.

Where Rozie wins today

• First-class packages for all six frameworks, including the one the ecosystem leaves empty: there is no flatpickr wrapper for Solid on npm. (Native Solid date pickers exist; none of them wrap flatpickr, so a team standardizing on flatpickr across frameworks has nothing for Solid.) The existing ecosystem is five independently-versioned wrappers, one per framework, plus that hole. Rozie fills the whole row with the same component, each target consumed as a pre-compiled @rozie-ui/flatpickr-* package with no Rozie toolchain required.

• Maintenance currency. vue-flatpickr-component has been archived / read-only since 2025-03-14 (the repo's verified state; it still works, but takes no future Vue-version maintenance); angularx-flatpickr last shipped 2024-11-28; svelte-flatpickr last shipped 2024-12-02. Those are the published dates. Rozie's port ships from one living source in this repository.

• Latest-framework-version support, the cleanest peer-dep-objective differentiator. svelte-flatpickr's peer range is >= 3.31.0 < 5.0, so it does not support Svelte 5; Rozie targets Svelte 5 runes. lit-flatpickr declares lit ^2.0.0, Lit 2 only, and it is pre-1.0 (v0.4.1), while Rozie targets current Lit. vue-flatpickr-component is Vue-3-only and frozen. react-flatpickr, by contrast, does support React 19 (peer >= 16 <= 19), so its column is a clean ✓ on version support; its real gotcha is reconcile (below), not React-version coverage.

• Managed runtime reconcile, applied uniformly. Rozie reconciles disable / enable / locale / minDate / maxDate / mode / dateFormat / disabled live via flatpickr's set(), with no remount, and this is behaviorally verified (6/6 green, this repo). The standalone story varies per wrapper, and the comparison is fair about it: vue-flatpickr-component also claims dynamic reconcile ("watches config, redraws itself", kept as a ✓), and react-flatpickr requires the consumer to useMemo their props or the picker remounts on every render (its README troubleshooting calls this out). Rozie manages reconcile the same way everywhere; with the standalone wrappers it's per-wrapper, and sometimes the consumer's job.

• Angular reactive-forms CVA, at parity with angularx-flatpickr. angularx-flatpickr ships a real ControlValueAccessor plus NG_VALUE_ACCESSOR registration (confirmed in its flatpickr.directive.ts), giving full ngModel / reactive-forms integration. Rozie's wrapper does too: the Angular compile target auto-generates a ControlValueAccessor from the single two-way date model (registered via NG_VALUE_ACCESSOR on the component, no wrapper directive), so [(ngModel)], [formControl], and formControlName bind directly. See the formControlName recipe + coexistence semantics. The two wrappers reach the same Angular-forms cell; Rozie additionally ships the same component to five other frameworks. The behavior is proven at runtime by flatpickr-cva.spec.ts (7/7 green: null-default round-trip, the setValue/reset/disable/enable/touched/zero-echo battery, [(date)]-vs-form coexistence, and the no-crash baselines, all binding forms directives directly to the emitted component, with zero hand-written CVA in the harness).

• The range partial-commit guard. Rozie defaults to commitOn="complete", so a range only commits once both endpoints are chosen, a guard the standalone wrappers leave to the consumer. See Range mode and commit semantics.

• Uniform imperative handle + two-way string value. Rozie's $expose handle gives the same API — clear / openPicker / closePicker / togglePicker / selectDate / jumpToDate / changeMonth / changeYear / getSelectedDates — on every target. react-flatpickr exposes the raw instance via a .flatpickr ref and lit-flatpickr ships a rich method set, but vue-flatpickr-component and svelte-flatpickr don't document an instance accessor (scored ~). And Rozie's r-model:date binds the formatted string, whereas react-flatpickr and svelte-flatpickr surface Date[] by default.

The ✓ cells in Rozie's row are backed by flatpickr-behavior.spec.ts (6/6 targets green, this repo), which measures Rozie's behavior across targets and says nothing measured about the competitors' behavior.

What Rozie defers

• react-hook-form spread limitation. You cannot spread the full register('field') object onto the component: register's onChange, onBlur, and ref collide with the component's own onChange emit-prop. Wire the value through date / onDateChange and forward only name. See Forms drop-in.

• Shadow-DOM rangePlugin caveat. rangePlugin's second-input option must be passed the element, not a selector string, in any shadow-DOM / custom-element (Lit) context: document.querySelector cannot see into shadow DOM and fails silently. The warning callout lives in Two-input range via rangePlugin.

• Single-framework ergonomics are not the contest. The matrix scores out-of-the-box, cross-framework capability. On its home framework each of these is a solid pick: react-flatpickr (237.4k downloads/wk, React-19-ready), angularx-flatpickr (real CVA), and the others. The case for Rozie is one date picker to learn, document, and migrate across your whole stack.

Try the live demo

The Flatpickr example page shows the live demo alongside its per-target compiled output — the same .rozie source that powers every target cell in the matrix above.

Ready to ship it? The @rozie-ui/flatpickr showcase + API reference documents the @rozie-ui/flatpickr-* packages — one pre-compiled, per-framework install (npm i @rozie-ui/flatpickr-react, etc.) with no Rozie toolchain required.