Flatpickr for React.
This package can be install with yarn
or npm
npm
npm install --save react-flatpickr
yarn
yarn add react-flatpickr
// Keep in mind that these are the styles from flatpickr package
// See troubleshooting section in case you have problems importing the styles
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 });
}}
/>
);
}
}
string
| optional
This is the default value that will be passed to the inner input
string || array || object || number
| optional
Same as below
Object
| optional
Flatpickr options
: you can pass all Flatpickr parameters
here.Flatpickr
hooks can be passed within this option too.Example:
<Flatpickr options={{ minDate: "2017-01-01" }} />
node
| optional
This option is closely related with the wrap option from Flatpickr
, please refer to the former link for more information.
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.
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.
function
| optional
function
| optional
function
| optional
function
| optional
function
| optional
function
| optional
function
| optional
function
| optional
function
| optional
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} />
}
}
/>
)
}
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>
);
}
Please import themes directly from the flatpickr
dependency.
In most cases, you should just be able to
import 'flatpickr/dist/themes/airbnb.css'
, but in some cases npm or yarn may installflatpickr
innode_modules/react-flatpickr/node_modules/flatpickr
. If that happens, removing yournode_modules
dir and reinstalling should put flatpickr in the rootnode_modules
dir, or you can import fromreact-flatpickr/node_modules/flatpickr
manually.
MIT