gem-hunter

react-flatpickr

Table of contents

Installation

npm install --save react-flatpickr

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

value

options

<Flatpickr options={{ minDate: "2017-01-01" }} />

children

className

Event handlers

onChange

onOpen: function

onClose: function

onMonthChange: function

onYearChange: function

onReady: function

onValueUpdate: function

onDayCreate: function

onDestroy: function

Advanced props

render prop

  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

  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

Troubleshooting

Help, the Date Picker doesn't have any styling!

The Date Picker closes after a value is selected

License