Next.js Integration Guide

Complete guide for integrating FlexiDatepicker into your Next.js applications

Installation

Install the package via npm, yarn, or pnpm

npm install flexidatepicker

App Router (Client Component)

Use 'use client' directive for client-side initialization

'use client';

import { useEffect, useRef } from 'react';
import FlexiDatepicker from 'flexidatepicker';
import 'flexidatepicker/dist/flexidatepicker.min.css';

export default function DatePickerComponent() {
  const inputRef = useRef<HTMLInputElement>(null);
  const pickerRef = useRef<FlexiDatepicker | null>(null);

  useEffect(() => {
    // Only initialize on client-side
    if (typeof window !== 'undefined' && inputRef.current && !pickerRef.current) {
      pickerRef.current = new FlexiDatepicker(inputRef.current, {
        mode: 'range',
        dualCalendar: true,
        dateFormat: 'MMM d, yyyy'
      });
    }

    return () => {
      pickerRef.current = null;
    };
  }, []);

  return <input ref={inputRef} type="text" readOnly placeholder="Select dates" />;
}

Server + Client Component Pattern

Combine server and client components for optimal performance

// Server Component (page.tsx)
import DatePickerClient from '@/components/DatePickerClient';

export default function Page() {
  return (
    <div>
      <h1>My Page</h1>
      <DatePickerClient />
    </div>
  );
}

// Client Component (DatePickerClient.tsx)
'use client';

import { useEffect, useRef } from 'react';
import FlexiDatepicker from 'flexidatepicker';
import 'flexidatepicker/dist/flexidatepicker.min.css';

export default function DatePickerClient() {
  const inputRef = useRef<HTMLInputElement>(null);
  const pickerRef = useRef<FlexiDatepicker | null>(null);

  useEffect(() => {
    if (inputRef.current && !pickerRef.current) {
      pickerRef.current = new FlexiDatepicker(inputRef.current, {
        mode: 'single',
        dateFormat: 'MMM d, yyyy'
      });
    }

    return () => {
      pickerRef.current = null;
    };
  }, []);

  return <input ref={inputRef} type="text" readOnly />;
}

Global CSS Import

Import CSS once in your global styles

/* app/globals.css */
@import 'flexidatepicker/dist/flexidatepicker.min.css';

/* Your other global styles */

Important Notes

Client Components: Always use 'use client' directive when using FlexiDatepicker
SSR Check: Use typeof window !== 'undefined' to ensure client-side execution
CSS Import: Import CSS in globals.css or directly in the client component
Refs: Use useRef to maintain datepicker instance across re-renders

Ready to get started?

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