Awesome Open Source
Awesome Open Source

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,555,917) 
Date (983) 
Preact (799) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194