Svelte Integration Guide

Complete guide for integrating FlexiDatepicker into your Svelte or SvelteKit applications

Installation

Install the package via npm, yarn, or pnpm

npm install flexidatepicker

Basic Usage (Svelte Component)

Initialize FlexiDatepicker inside your component using onMount

<script>
  import { onMount } from 'svelte';
  import 'flexidatepicker/dist/flexidatepicker.min.css';
  import FlexiDatepicker from 'flexidatepicker';

  let inputEl;
  let picker;

  onMount(() => {
    picker = new FlexiDatepicker(inputEl, {
      mode: 'range',
      dualCalendar: true,
      dateFormat: 'MMM d, yyyy'
    });
  });
</script>

<input bind:this={inputEl} type="text" readonly placeholder="Select dates" />

Global CSS Import (SvelteKit)

Import FlexiDatepicker CSS globally in your layout

<!-- src/routes/+layout.svelte -->
<script>
  import 'flexidatepicker/dist/flexidatepicker.min.css';
</script>

<slot />

SSR Notes (SvelteKit)

Ensure FlexiDatepicker initializes only on the client

// SvelteKit SSR
// Ensure FlexiDatepicker only runs on the client
// by using onMount or dynamically importing it inside onMount.

Important Notes

onMount: Always initialize FlexiDatepicker inside Svelte’s onMount for client-only execution.
Refs: Use bind:this to attach the input element to your datepicker instance.
Global Styles: Import FlexiDatepicker CSS in your layout or specific components.
SSR Safety: Avoid running FlexiDatepicker outside onMount or client-only blocks.

Ready to get started?

FlexiDatepicker is free, open-source, and ready to use in your projects.