React Flatpickr

A flexible and reusable React wrapper component for the flatpickr date picker library.

Inspired by react-flatpickr, but written from scratch.

Support me

If you like what I'm doing, please support me: https://ko-fi.com/mykeshato

Installation

npm install react-flatpickr-wrapper flatpickr
# or
yarn add react-flatpickr-wrapper flatpickr

Usage

Basic Usage

import React, { useState } from 'react';
import ReactFlatpickr from './ReactFlatpickr';
import 'flatpickr/dist/flatpickr.css'; // Import flatpickr styles from flatpickr repository

const DatePickerExample: React.FC = () => {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <ReactFlatpickr
      value={date}
      onChange={(selectedDates) => {
        setDate(selectedDates[0]);
      }}
      placeholder="Select a date..."
    />
  );
};

export default DatePickerExample;

With Options

import React, { useState } from 'react';
import ReactFlatpickr from './ReactFlatpickr';
import 'flatpickr/dist/flatpickr.css';

const AdvancedDatePickerExample: React.FC = () => {
  const [date, setDate] = useState<Date>(new Date());

  return (
    <ReactFlatpickr
      value={date}
      options={{
        mode: 'range',
        dateFormat: 'Y-m-d',
        allowInput: true,
        minDate: 'today',
        maxDate: new Date().fp_incr(30), // 30 days from now
        disable: [
          function(date) {
            // Return true to disable Saturdays and Sundays
            return date.getDay() === 0 || date.getDay() === 6;
          }
        ]
      }}
      onChange={(selectedDates) => {
        setDate(selectedDates[0]);
      }}
    />
  );
};

Custom Render

import React, { useState } from 'react';
import ReactFlatpickr from './ReactFlatpickr';
import 'flatpickr/dist/flatpickr.css';

const CustomRenderExample: React.FC = () => {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <ReactFlatpickr
      value={date}
      onChange={(selectedDates) => {
        setDate(selectedDates[0]);
      }}
      render={(props, ref) => (
        <div className="custom-datepicker-container">
          <label htmlFor="custom-datepicker">Select Date:</label>
          <input
            id="custom-datepicker"
            ref={ref}
            className="custom-datepicker"
            placeholder={props.placeholder || "YYYY-MM-DD"}
            {...props}
          />
          <button type="button" onClick={() => setDate(null)}>Clear</button>
        </div>
      )}
    />
  );
};

With Children (Wrapped Mode)

import React, { useState } from 'react';
import ReactFlatpickr from './ReactFlatpickr';
import 'flatpickr/dist/flatpickr.css';

const WrappedExample: React.FC = () => {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <ReactFlatpickr
      value={date}
      options={{
        wrap: true,
        dateFormat: 'Y-m-d',
      }}
      onChange={(selectedDates) => {
        setDate(selectedDates[0]);
      }}
    >
      <input
        type="text"
        placeholder="Select date..."
        data-input
      />
      <button type="button" data-toggle>📅</button>
      <button type="button" data-clear>❌</button>
    </ReactFlatpickr>
  );
};

Props

Prop	Type	Description
options	flatpickr.Options.Options	Flatpickr configuration options
value	string | Date | number | (string | Date | number)[]	Current value(s) of the date picker
defaultValue	string	Default value for the input field
children	React.ReactNode	Children elements (used with wrap mode)
className	string	CSS class for the input element or wrapper
placeholder	string	Placeholder text for the input
id	string	ID attribute for the input element
onCreate	(instance: flatpickr.Instance) => void	Called when flatpickr instance is created
onDestroy	(instance: flatpickr.Instance) => void	Called before flatpickr instance is destroyed
onChange	flatpickr.Options.Options['onChange']	Called when the user selects a date
onOpen	flatpickr.Options.Options['onOpen']	Called when the calendar is opened
onClose	flatpickr.Options.Options['onClose']	Called when the calendar is closed
onMonthChange	flatpickr.Options.Options['onMonthChange']	Called when the month is changed
onYearChange	flatpickr.Options.Options['onYearChange']	Called when the year is changed
onReady	flatpickr.Options.Options['onReady']	Called when the calendar is ready
onValueUpdate	flatpickr.Options.Options['onValueUpdate']	Called when the value is updated
onDayCreate	flatpickr.Options.Options['onDayCreate']	Called when a day is created
render	(props, ref) => React.ReactNode	Custom render function for complete control over rendering

Event Handlers

All flatpickr event handlers are supported through both direct props and the options object. When provided as direct props, they take precedence over handlers defined in the options object.

<ReactFlatpickr
  onChange={(selectedDates, dateStr, instance) => {
    console.log('Selected dates:', selectedDates);
    console.log('Date string:', dateStr);
    console.log('Flatpickr instance:', instance);
  }}
  onOpen={(selectedDates, dateStr, instance) => {
    console.log('Calendar opened');
  }}
  onClose={(selectedDates, dateStr, instance) => {
    console.log('Calendar closed');
  }}
/>

Custom Rendering

The render prop provides complete control over the rendered output while maintaining the flatpickr functionality:

<ReactFlatpickr
  value={date}
  onChange={handleDateChange}
  render={(props, ref) => (
    <div className="date-picker-container">
      <div className="input-group">
        <span className="input-group-text">📅</span>
        <input ref={ref} type="text" className="form-control" placeholder="Select a date" {...props} />
      </div>
    </div>
  )}
/>

Advanced Configuration

Multiple Dates

import React, { useState } from 'react';
import ReactFlatpickr from './ReactFlatpickr';
import 'flatpickr/dist/flatpickr.css';

const MultipleDatesExample: React.FC = () => {
  const [dates, setDates] = useState<Date[]>([]);

  return (
    <ReactFlatpickr
      value={dates}
      options={{
        mode: 'multiple',
        dateFormat: 'Y-m-d',
        conjunction: ', '
      }}
      onChange={(selectedDates) => {
        setDates(selectedDates);
      }}
      placeholder="Select multiple dates..."
    />
  );
};

Time Picker

import React, { useState } from 'react';
import ReactFlatpickr from './ReactFlatpickr';
import 'flatpickr/dist/flatpickr.css';

const TimePickerExample: React.FC = () => {
  const [time, setTime] = useState<Date | null>(null);

  return (
    <ReactFlatpickr
      value={time}
      options={{
        enableTime: true,
        noCalendar: true,
        dateFormat: 'H:i',
        time_24hr: true
      }}
      onChange={(selectedDates) => {
        setTime(selectedDates[0]);
      }}
      placeholder="Select time..."
    />
  );
};

Working with Refs

import React, { useRef } from 'react';
import ReactFlatpickr from './ReactFlatpickr';
import 'flatpickr/dist/flatpickr.css';

const RefExample: React.FC = () => {
  const flatpickrInstance = useRef<flatpickr.Instance | null>(null);

  const handleCreate = (instance: flatpickr.Instance) => {
    flatpickrInstance.current = instance;
  };

  const openCalendar = () => {
    flatpickrInstance.current?.open();
  };

  const clearSelection = () => {
    flatpickrInstance.current?.clear();
  };

  return (
    <div>
      <ReactFlatpickr
        onCreate={handleCreate}
        placeholder="Select a date..."
      />
      <button onClick={openCalendar}>Open Calendar</button>
      <button onClick={clearSelection}>Clear</button>
    </div>
  );
};

License

MIT © MikeSha