vue-flatpickr-component

vue-flatpickr-component wraps the framework-agnostic Flatpickr date-time picker in a Vue 3 component, so applications get a native-feeling <flat-pickr v-model="date" :config="config" /> element instead of manually mounting and syncing a third-party DOM widget.

It keeps flatpickr’s instance in sync with Vue’s reactivity system: changing modelValue updates the picker programmatically, changing the config object triggers a redraw with the new options, and every Flatpickr hook (onChange, onOpen, onClose, etc.) is re-emitted as a Vue event, so consumers can use Flatpickr’s full feature set through familiar Vue patterns.

What You Get

• A <FlatPickr> component with a required modelValue prop supporting string, number, Date, array, or null date values
• A reactive config prop that triggers fp.set() calls and redraws when Flatpickr options change at runtime
• Automatic re-emission of all Flatpickr hooks (onChange, onOpen, onClose, onReady, etc.) as kebab-case Vue events
• Support for Flatpickr’s ‘wrapped’ mode for use with custom-styled input groups (e.g. Bootstrap input groups)
• A disabled prop that is watched reactively to enable/disable the underlying picker instance

Common Use Cases

• Adding a date or date-range picker to a Vue 3 form with two-way v-model binding
• Building booking/scheduling UIs that need Flatpickr’s range, multi-date, or time-only picker modes
• Integrating a themed date picker into a Bootstrap or custom CSS framework via Flatpickr’s wrapped mode
• Reacting to picker lifecycle events (open, close, month change) via emitted Vue events instead of raw callbacks
• Dynamically changing min/max dates or locale on an already-mounted picker via the reactive config prop

Under The Hood

Architecture - src/component.ts defines a single Vue 3 component via defineComponent that renders a plain <input> and, on mounted(), instantiates a Flatpickr instance against that DOM node; a prepareConfig() method merges the modelValue/config props into Flatpickr’s options object, and $watch calls on modelValue, config, and disabled push changes back into the live Flatpickr instance via fp.set()/fp.setDate() rather than remounting. src/events.ts maintains the list of Flatpickr hook names that get proxied into Vue’s emits array, and src/util.ts provides small helpers (camelToKebab, nullify, arrayify) used to bridge naming and value conventions between the two libraries. Tech Stack - TypeScript targeting Vue 3 (^3.2.0 peer dependency) with flatpickr as its sole runtime dependency, built with both Webpack (UMD bundle) and tsc (ESM output with declaration files), tested with Jest and @vue/test-utils under jsdom. Code Quality - A __test__/ suite with dedicated spec files for props, events, emits, watchers, the plugin entry point, and instance lifecycle gives solid behavioral coverage of the reactivity bridge, backed by Codecov reporting in CI; an istanbul ignore if comment on one guard clause shows deliberate, documented coverage exclusions rather than untested gaps. API Design - The component mirrors native <input> ergonomics via v-model and exposes Flatpickr’s entire options object as a single passthrough config prop rather than re-declaring dozens of individual props, keeping the wrapper thin while still surfacing every Flatpickr capability; a documented version matrix (8.x for Vue 2, 12.x for Vue 3) makes migration expectations explicit.