Skip to content

molnarmark/preact-flatpickr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

12 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“… 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: you can pass all flatpickr parameters to props.options
  • All flatpickr hooks can be passed as a JSX prop, or to props.options
<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

  • MIT

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

About

πŸ“… Preact wrapper for the Flatpickr library.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published