react-flatpickr

What is react-flatpickr?

react-flatpickr is a React wrapper for the flatpickr date picker library. It provides a highly customizable and lightweight date picker component for React applications.

What are react-flatpickr's main functionalities?

Basic Date Picker

This code demonstrates a basic date picker with time selection enabled. The selected date is stored in the component's state.

import React from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/themes/material_green.css';

const BasicDatePicker = () => {
  const [date, setDate] = React.useState(new Date());
  return (
    <Flatpickr data-enable-time
      value={date}
      onChange={date => setDate(date)}
    />
  );
};

export default BasicDatePicker;

Range Date Picker

This code demonstrates a range date picker where users can select a start and end date. The selected range is stored in the component's state.

import React from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/themes/material_green.css';

const RangeDatePicker = () => {
  const [date, setDate] = React.useState([new Date(), new Date()]);
  return (
    <Flatpickr
      options={{ mode: 'range' }}
      value={date}
      onChange={date => setDate(date)}
    />
  );
};

export default RangeDatePicker;

Custom Date Format

This code demonstrates a date picker with a custom date format. The date format is set to 'Y-m-d H:i' (Year-Month-Day Hour:Minute).

import React from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/themes/material_green.css';

const CustomDateFormat = () => {
  const [date, setDate] = React.useState(new Date());
  return (
    <Flatpickr
      options={{ dateFormat: 'Y-m-d H:i' }}
      value={date}
      onChange={date => setDate(date)}
    />
  );
};

export default CustomDateFormat;

Other packages similar to react-flatpickr

react-datepicker

react-datepicker is a simple and reusable date picker component for React. It offers a wide range of customization options and supports date ranges, time selection, and localization. Compared to react-flatpickr, it is more focused on providing a straightforward API and ease of use.

react-dates

react-dates is a date picker library developed by Airbnb. It provides a highly customizable and accessible date picker component with support for date ranges, single dates, and multiple dates. It is more feature-rich and offers better accessibility options compared to react-flatpickr.

react-day-picker

react-day-picker is a flexible date picker component for React. It allows for extensive customization and supports features like date ranges, multiple date selection, and custom styling. It is more flexible and customizable compared to react-flatpickr, making it suitable for complex use cases.

README

react-flatpickr

Flatpickr for React.

Usage

import 'flatpickr/dist/themes/material_green.min.css'

import Flatpickr from 'react-flatpickr'
import { Component } from 'react'

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  render() {
    const { date } = this.state;
    return (
      <Flatpickr data-enable-time
        value={date}
        onChange={date => { this.setState({date}) }} />
    )
  }
}

• flatpickr options: you can pass all flatpickr parameters to props.options
• All flatpickr hooks can be passed as a react prop, or to props.options

<Flatpickr options={{minDate: '2017-01-01'}} />

Themes

Please import themes directly from the flatpickr dependency. In most cases, you should just be able to import 'flatpickr/dist/themes/theme.css', but in some cases npm or yarn may install flatpickr in node_modules/react-flatpickr/node_modules/flatpickr. If that happens, removing your node_modules dir and reinstalling should put flatpickr in the root node_modules dir, or you can import from react-flatpickr/node_modules/flatpickr manually.

License

MIT