react-flatpickr

WebJar for react-flatpickr

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

react-flatpickr
Last Version

Last Version

3.5.1
Release Date

Release Date

Type

Type

jar
Description

Description

react-flatpickr
WebJar for react-flatpickr
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/coderhaoxin/react-flatpickr

Download react-flatpickr

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-flatpickr/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-flatpickr</artifactId>
    <version>3.5.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-flatpickr/
implementation 'org.webjars.npm:react-flatpickr:3.5.1'
// https://jarcasting.com/artifacts/org.webjars.npm/react-flatpickr/
implementation ("org.webjars.npm:react-flatpickr:3.5.1")
'org.webjars.npm:react-flatpickr:jar:3.5.1'
<dependency org="org.webjars.npm" name="react-flatpickr" rev="3.5.1">
  <artifact name="react-flatpickr" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-flatpickr', version='3.5.1')
)
libraryDependencies += "org.webjars.npm" % "react-flatpickr" % "3.5.1"
[org.webjars.npm/react-flatpickr "3.5.1"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.npm : flatpickr jar [3.0.7,4)
org.webjars.npm : prop-types jar [15.5.10,16)

Project Modules

There are no modules declared in this project.

NPM version License Dependency status

react-flatpickr

Flatpickr for React.

Table of contents

Installation

This package can be install with yarn or npm

npm

npm install --save react-flatpickr

yarn

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

string | optional

This is the default value that will be passed to the inner input

value

string || array || object || number | optional

Same as below

options

Object | optional

  • Flatpickr options: you can pass all Flatpickr parameters here.
  • All Flatpickr hooks can be passed within this option too.

Example:

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

children

node | optional

This option is closely related with the wrap option from Flatpickr, please refer to the former link for more information.

className

string | optional

Custom className that will be applied to the inner input element. In case you need to modify the rendered input styles this is the prop you should use.

Event handlers

The following props are provided in order to customize the Flatpickr's functions default behaviour. Please refer to the Events & Hooks section from Flatpickr library.

onChange

function | optional

onOpen: function

function | optional

onClose: function

function | optional

onMonthChange: function

function | optional

onYearChange: function

function | optional

onReady: function

function | optional

onValueUpdate: function

function | optional

onDayCreate: function

function | optional

onDestroy: function

function | optional

Advanced props

render

function | optional

Use this prop if you want to render your custom component, this is a Render props pattern.

Example usage:

  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} />
          }
        }
      />
    )
  }

Themes

Please import themes directly from the flatpickr dependency.

Troubleshooting

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

In most cases, you should just be able to import 'flatpickr/dist/themes/airbnb.css', but in some cases npm or yarn may install flatpickr in node_modules/react-flatpickr/node_modules/flatpickr. If that happens, removing your node_modules dir and reinstalling should put flatpickr in the root node_modules dir, or you can import from react-flatpickr/node_modules/flatpickr manually.

License

MIT

org.webjars.npm

coderhaoxin

@haoxins

Versions

Version
3.5.1