Awesome
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
// 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 });
}}
/>
);
}
}
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 allFlatpickr 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 props
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 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.
License
MIT