molnarmark/preact-flatpickr

📅 Preact wrapper for the Flatpickr library.

📅 Preact Flatpickr

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. 😊

preact-flatpickr's Issues

Publish to npm?

The version on npm seems to be 9b24f8, is a new release planned?

Initial props are ignored

When using:

<Flatpickr
	config={{
		weekNumbers: true,
		mode: "range",
		minDate: new Date(),
		defaultDate: state.openRegStart
	}}
	theme="material_blue"
	onChange={() => console.log('You just changed the date.')}>
</Flatpickr>

in a somewhat convoluted render, the config is not used.
I tracked this down to this in the constructor:

this.state = {
	config: {},
	instance: null,
};

Where the config is just an empty object and rely on receiving them later.
My suggested fix is to change the config line to config: props.config && {...props.config} || {},
or just config: props.config || {},.

I have created a pull request with the former of the two

Module not found

I am experiencing this issue:
Module not found: Error: Can't resolve './node_modules/flatpickr/dist/themes' in 'C:\Users\ ...\MyProject\node_modules\preact-flatpickr'
from this usage:

<Flatpickr
    theme="dark"
    onChange={() => console.log('You just changed the date.')}>
</Flatpickr>

I solved it by changing this:
require(`./node_modules/flatpickr/dist/themes/${theme}.css`);
to
import (`flatpickr/dist/themes/${theme}.css`);

I have created a pull request for this change.
Please verify that this also works for you :)

Weird bug with weekNumbers: true

I get the following error in console when weekNumbers: true is in the config:
Cannot read property 'style' of undefined eval (flatpickr.js?d2bc:539)

This only happens after my latest pull request, so it has something to do with using weekNumbers in the initial config. I cannot figure out how these to things are connected.
The weeknumbers are still shown as they are supposed to, so i have no clue what is going wrong in this case.

I suggest reverting my latest pull request until one of us figures this out.