[![NPM version][npm-img]][npm-url] [![License][license-img]][license-url] [![Dependency status][david-img]][david-url] # react-flatpickr [Flatpickr](https://github.com/chmln/flatpickr) for React. ## Table of contents - [Installation](#installation) - [Usage](#usage) - [Basic props](#basic-props) - [defaultValue](#defaultValue) - [value](#value) - [children](#children) - [className](#className) - [Event handlers](#event-handlers) - [Advanced props](#advanced-props) - [Troubleshooting](#troubleshooting) ## Installation This package can be install with `yarn` or `npm` `npm` ```bash npm install --save react-flatpickr ``` `yarn` ```bash yarn add react-flatpickr ``` ## Usage ```jsx // 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 ( { 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](https://flatpickr.js.org/options). - All `Flatpickr` [hooks][hooks] can be passed within this option too. _*Example*_: ```jsx ``` ### children > `node` | optional This option is closely related with the [wrap option](https://flatpickr.js.org/examples/#flatpickr-external-elements) 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](https://flatpickr.js.org/events/) 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](https://reactjs.org/docs/render-props.html). _Example usage_: ```jsx import React from 'react'; import Flatpickr from 'react-flatpickr'; const CustomInput = ({ value, defaultValue, inputRef, ...props }) => { return ; }; export default function App { return ( { return } } /> ) } ``` ### flatpickr instance You can directly manipulate the [`flatpickr` instance](https://flatpickr.js.org/instance-methods-properties-elements/) using the `flatpickr` property on the component. _Example_: ```js import React, { useRef } from "react"; import Flatpickr from "react-flatpickr"; import "flatpickr/dist/flatpickr.css"; export default function App() { const fp = useRef(null); return (

); } ``` ## 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 [npm-img]: https://img.shields.io/npm/v/react-flatpickr.svg?style=flat-square [npm-url]: https://npmjs.org/package/react-flatpickr [travis-img]: https://img.shields.io/travis/coderhaoxin/react-flatpickr.svg?style=flat-square [travis-url]: https://travis-ci.org/coderhaoxin/react-flatpickr [codecov-img]: https://img.shields.io/codecov/c/github/coderhaoxin/react-flatpickr.svg?style=flat-square [codecov-url]: https://codecov.io/github/coderhaoxin/react-flatpickr?branch=master [license-img]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square [license-url]: http://opensource.org/licenses/MIT [david-img]: https://img.shields.io/david/coderhaoxin/react-flatpickr.svg?style=flat-square [david-url]: https://david-dm.org/coderhaoxin/react-flatpickr [hooks]: https://chmln.github.io/flatpickr/events/#hooks

	Stars	Issues	Version	Updated	Created
react-date-range	2,591	226	2.0.1	5 months ago	9 years ago
react-datepicker	7,963	299	7.3.0	2 months ago	10 years ago
react-flatpickr	598	40	3.10.13	2 years ago	8 years ago

react-date-range vs react-datepicker vs react-flatpickr

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past