Home

Awesome

📅 Preact Flatpickr

Open Source Love Open Source Love PRs Welcome

Flatpickr component for Preact ported from react-flatpickr.

Getting Started

Install the package by running: npm install --save preact-flatpickr or yarn add preact-flatpickr

Example

import 'flatpickr/dist/themes/material_green.css'

import { Component, h } from 'preact'
import Flatpickr from 'preact-flatpickr'

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  render(props, state) {
    return (
      <Flatpickr
        value={state.date}
        onChange={date => { this.setState({date}) }} />
    )
  }
}
<Flatpickr options={{minDate: '2017-01-01'}} />

Themes

You can import the style for flatpickr manually, like so: import 'flatpickr/dist/themes/theme.css' or you can use the theme attribute:

<Flatpickr
        theme="material_green"
        value={date}
        onChange={date => { this.setState({date}) }} />

Learn more about the themes here.

API

Every Flatpickr configuration option is available. You can check out every option here.

License

I'm new to Preact, so don't bite my head off. 😊