@rozie-ui/flatpickr-solid

Idiomatic solid Flatpickr — a cross-framework date picker compiled from one Rozie source wrapping flatpickr. This package is generated; do not edit src/ by hand.

Install

npm i @rozie-ui/flatpickr-solid

Peer dependencies: flatpickr ^4.6 + solid-js. Install them alongside this package, and import flatpickr's stylesheet (import 'flatpickr/dist/flatpickr.css') once in your app.

Also installed: @rozie/runtime-solid — Rozie's small, tree-shaken runtime helper package (controllable state, keyboard navigation, event modifiers, and safe interpolation). It arrives as a regular dependency, so npm pulls it for you. Your bundler keeps only the helpers this component actually uses — typically a few hundred bytes to a few KB, minified and gzipped. What's in it and what it costs.

Usage

import { createSignal } from 'solid-js';
import { Flatpickr } from '@rozie-ui/flatpickr-solid';
import 'flatpickr/dist/flatpickr.css';

export function Demo() {
  const [date, setDate] = createSignal('2026-05-17');
  return (
    <Flatpickr
      date={date()}
      onDateChange={setDate}
      onChange={(e) => console.log(e.value, e.selectedDates)}
    />
  );
}

Props

| Name | Type | Default | Two-way (model) | Required | | --- | --- | --- | :---: | :---: | | date | String | "" | ✓ | | | mode | String | "single" | | | | dateFormat | String | "Y-m-d" | | | | altInput | Boolean | false | | | | altFormat | String | "F j, Y" | | | | enableTime | Boolean | false | | | | enableSeconds | Boolean | false | | | | time24hr | Boolean | false | | | | noCalendar | Boolean | false | | | | minDate | String | null | | | | maxDate | String | null | | | | placeholder | String | "Select a date…" | | | | disabled | Boolean | false | | | | commitOn | String | "complete" | | | | options | Object | {} | | | | name | String | "" | | | | inline | Boolean | false | | | | staticPosition | Boolean | false | | | | position | String | "auto" | | | | appendTo | Object | null | | | | showMonths | Number | 1 | | | | weekNumbers | Boolean | false | | | | monthSelectorType | String | "dropdown" | | | | prevArrow | String | null | | | | nextArrow | String | null | | | | allowInput | Boolean | false | | | | disable | Array | [] | | | | enable | Array | [] | | | | locale | Object | null | | | | firstDayOfWeek | Number | 0 | | | | parseDate | Function | null | | | | formatDate | Function | null | | | | plugins | Array | [] | | |

Events

| Event | Description | | --- | --- | | change | Fired when the selected date(s) change. Payload { value, selectedDates }. In range mode the bound string commits only when the range is complete (2 dates) unless commitOn: "change". | | ready | Fired once the calendar is initialised and mounted. Payload { value, selectedDates }. | | open | Fired when the calendar popover opens. | | close | Fired when the calendar popover closes. | | monthChange | Fired when the displayed month changes. | | yearChange | Fired when the displayed year changes. | | valueUpdate | Fired on every internal value update (including partial range clicks), before the change commit. Payload { value, selectedDates }. | | dayCreate | Fired for each day cell as the calendar renders. Payload is the day HTMLElement, for per-day decoration. |

Imperative handle

Beyond props/events, the component exposes imperative methods (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call them directly:

import { Flatpickr, type FlatpickrHandle } from '@rozie-ui/flatpickr-solid';

let handle: FlatpickrHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Flatpickr ref={(h) => (handle = h)} />;
handle?.openPicker();

| Method | Description | | --- | --- | | clear | Clear the selected date(s) and the bound input. | | openPicker | Open the calendar popover. | | closePicker | Close the calendar popover. | | selectDate | Set the selected date programmatically — selectDate(date, triggerChange?). Pass true as the second argument to also fire change. | | jumpToDate | Navigate the calendar view to a date — jumpToDate(date) — without changing the selection. | | getSelectedDates | Return the currently selected dates as a Date[] on demand (the two-way date model is a formatted string; the parsed dates are otherwise only on the change payload). [] before mount. | | togglePicker | Open the calendar if closed, close it if open — togglePicker() (single-trigger button). | | changeMonth | Move the calendar by value months (or to an absolute month) — changeMonth(value, isOffset?) (isOffset defaults to true). | | changeYear | Jump the calendar to an absolute year — changeYear(year). |