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.
react-flatpickr
Flatpickr for React.
Table of contents
Installation
This package can be install with yarn
or npm
npm
npm install --save react-flatpickr
yarn
yarn add react-flatpickr
Usage
import "flatpickr/dist/themes/material_green.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 });
}}
/>
);
}
}
Basic props
defaultValue
string
| optional
This is the default value that will be passed to the inner input
value
string || array || object || number
| optional
Same as below
options
Object
| optional
Flatpickr options
: you can pass all Flatpickr parameters
here.- All
Flatpickr
hooks can be passed within this option too.
Example:
<Flatpickr options={{ minDate: "2017-01-01" }} />
children
node
| optional
This option is closely related with the wrap option from Flatpickr
, please refer to the former link for more information.
className
string
| optional
Custom className that will be applied to the inner input
element. In case you need to modify the rendered input
styles this is the prop
you should use.
Event handlers
The following props
are provided in order to customize the Flatpickr's functions
default behaviour. Please refer to the Events & Hooks section from Flatpickr
library.
onChange
function
| optional
onOpen: function
function
| optional
onClose: function
function
| optional
onMonthChange: function
function
| optional
onYearChange: function
function
| optional
onReady: function
function
| optional
onValueUpdate: function
function
| optional
onDayCreate: function
function
| optional
onDestroy: function
function
| optional
Advanced
render prop
function
| optional
Use this prop
if you want to render
your custom component, this is a Render props pattern.
Example usage:
import React from 'react';
import Flatpickr from 'react-flatpickr';
const CustomInput = ({ value, defaultValue, inputRef, ...props }) => {
return <input {...props} defaultValue={defaultValue} ref={inputRef} />;
};
export default function App {
return (
<Flatpickr
render={
({defaultValue, value, ...props}, ref) => {
return <CustomInput defaultValue={defaultValue} inputRef={ref} />
}
}
/>
)
}
flatpickr instance
You can directly manipulate the flatpickr
instance using the flatpickr
property on the component.
Example:
import React, { useRef } from "react";
import Flatpickr from "react-flatpickr";
import "flatpickr/dist/flatpickr.css";
export default function App() {
const fp = useRef(null);
return (
<div>
<Flatpickr ref={fp} />
<button
type="button"
onClick={() => {
if (!fp?.current?.flatpickr) return;
fp.current.flatpickr.clear();
}}
>
Clear
</button>
</div>
);
}
Themes
Please import themes directly from the flatpickr
dependency.
Troubleshooting
Help, the Date Picker doesn't have any styling!
In most cases, you should just be able to import 'flatpickr/dist/themes/airbnb.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