JarCasting
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 parametershere.- All
Flatpickrhooks 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
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} />
}
}
/>
)
}
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 installflatpickrinnode_modules/react-flatpickr/node_modules/flatpickr. If that happens, removing yournode_modulesdir and reinstalling should put flatpickr in the rootnode_modulesdir, or you can import fromreact-flatpickr/node_modules/flatpickrmanually.
License
MIT
