Flatpickr — usage examples

Flatpickr ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

React

import { useState } from 'react';
import { Flatpickr } from '@rozie-ui/flatpickr-react';
import 'flatpickr/dist/flatpickr.css';

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

Vue

<script setup lang="ts">
import { ref } from 'vue';
import Flatpickr from '@rozie-ui/flatpickr-vue';
import 'flatpickr/dist/flatpickr.css';

const date = ref('2026-05-17');
</script>

<template>
  <Flatpickr v-model:date="date" @change="(e) => console.log(e.value, e.selectedDates)" />
</template>

Svelte

<script lang="ts">
  import Flatpickr from '@rozie-ui/flatpickr-svelte';
  import 'flatpickr/dist/flatpickr.css';

  let date = $state('2026-05-17');
</script>

<Flatpickr bind:date onchange={(e) => console.log(e.value, e.selectedDates)} />

Angular

import { Component } from '@angular/core';
import { Flatpickr } from '@rozie-ui/flatpickr-angular';
import 'flatpickr/dist/flatpickr.css';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Flatpickr],
  template: `
    <Flatpickr [(date)]="date" (change)="onChange($event)" />
  `,
})
export class DemoComponent {
  date = '2026-05-17';
  onChange(e: { value: string; selectedDates: Date[] }) {
    console.log(e.value, e.selectedDates);
  }
}

Solid

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)}
    />
  );
}

Lit

import '@rozie-ui/flatpickr-lit';
import 'flatpickr/dist/flatpickr.css';

// <rozie-flatpickr> is a custom element. Bind `date` as a property and
// listen for the `date-change` event to receive the formatted string.
const el = document.querySelector('rozie-flatpickr');
el.date = '2026-05-17';
el.addEventListener('date-change', (e) => {
  el.date = e.detail;
});
el.addEventListener('change', (e) => {
  console.log(e.detail.value, e.detail.selectedDates);
});

Imperative handle

Beyond props and events, Flatpickr exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

React

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

const fp = useRef<FlatpickrHandle>(null);
// <Flatpickr ref={fp} ... />
fp.current?.openPicker();

Vue

<script setup>
import { ref } from 'vue';
const fp = ref();          // template ref
</script>

<template>
  <Flatpickr ref="fp" />
  <button @click="fp.openPicker()">Open</button>
</template>

Svelte

<script>
  let fp;                  // component instance via bind:this
</script>

<Flatpickr bind:this={fp} />
<button onclick={() => fp.openPicker()}>Open</button>

Angular

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Flatpickr) fp!: Flatpickr;  // or the viewChild() signal
  open() { this.fp.openPicker(); }
}

Solid

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();

Lit

// The custom element IS the handle — its exposed methods are public
// element methods.
document.querySelector('rozie-flatpickr').openPicker();

See also

• Flatpickr — showcase & API — the full prop / event / slot / handle reference, theming, and accessibility.
• Flatpickr comparison — how it stacks up against the per-framework libraries.
• Flatpickr — live demo — the real package running in the page, plus the one .rozie source and all six generated outputs.