React Integration Guide

Complete guide for integrating FlexiDatepicker into your React applications

Installation

Install the package via npm, yarn, or pnpm

npm install flexidatepicker

Basic Usage

Simple React component with FlexiDatepicker

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

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

  useEffect(() => {
    if (inputRef.current && !pickerRef.current) {
      pickerRef.current = new FlexiDatepicker(inputRef.current, {
        mode: 'range',
        dateFormat: 'MMM d, yyyy',
        onSelectionChange: (data) => {
          console.log('Selected:', data);
        }
      });
    }

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

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

TypeScript Support

Fully typed React component with FlexiDatepicker

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

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

  useEffect(() => {
    if (inputRef.current && !pickerRef.current) {
      const options: FlexiDatepickerOptions = {
        mode: 'range',
        dateFormat: 'MMM d, yyyy',
        dualCalendar: true,
        onSelectionChange: (data: FlexiDatepickerSelection) => {
          console.log('Ranges:', data.ranges);
          console.log('Dates:', data.dates);
        }
      };

      pickerRef.current = new FlexiDatepicker(inputRef.current, options);
    }

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

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

Reusable Component

Create a reusable DatePicker component for your app

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

interface DatePickerProps {
  options?: FlexiDatepickerOptions;
  placeholder?: string;
  className?: string;
}

export const DatePickerComponent = forwardRef<HTMLInputElement, DatePickerProps>(
  ({ options, placeholder = "Select date", className = "" }, ref) => {
    const inputRef = useRef<HTMLInputElement>(null);
    const pickerRef = useRef<FlexiDatepicker | null>(null);

    useEffect(() => {
      if (inputRef.current && !pickerRef.current) {
        pickerRef.current = new FlexiDatepicker(inputRef.current, options);
      }

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

    return (
      <input
        ref={inputRef}
        type="text"
        readOnly
        placeholder={placeholder}
        className={className}
      />
    );
  }
);

DatePickerComponent.displayName = 'DatePickerComponent';

// Usage
function App() {
  return (
    <DatePickerComponent
      options={{
        mode: 'range',
        dualCalendar: true,
        dateFormat: 'MMM d, yyyy'
      }}
      placeholder="Select date range"
      className="w-full px-4 py-2 border rounded"
    />
  );
}

Best Practices

Use refs properly: Always store the datepicker instance in a ref to prevent multiple initializations
Cleanup on unmount: Set the picker ref to null in the cleanup function to prevent memory leaks
Import CSS once: Import the CSS file in your root component or global styles
TypeScript types: Use the provided TypeScript types for better IDE support and type safety

Ready to get started?

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