Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
react-flatpickr
Advanced tools
react-flatpickr is a React wrapper for the flatpickr date picker library. It provides a highly customizable and lightweight date picker component for React applications.
Basic Date Picker
This code demonstrates a basic date picker with time selection enabled. The selected date is stored in the component's state.
import React from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/themes/material_green.css';
const BasicDatePicker = () => {
const [date, setDate] = React.useState(new Date());
return (
<Flatpickr data-enable-time
value={date}
onChange={date => setDate(date)}
/>
);
};
export default BasicDatePicker;
Range Date Picker
This code demonstrates a range date picker where users can select a start and end date. The selected range is stored in the component's state.
import React from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/themes/material_green.css';
const RangeDatePicker = () => {
const [date, setDate] = React.useState([new Date(), new Date()]);
return (
<Flatpickr
options={{ mode: 'range' }}
value={date}
onChange={date => setDate(date)}
/>
);
};
export default RangeDatePicker;
Custom Date Format
This code demonstrates a date picker with a custom date format. The date format is set to 'Y-m-d H:i' (Year-Month-Day Hour:Minute).
import React from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/themes/material_green.css';
const CustomDateFormat = () => {
const [date, setDate] = React.useState(new Date());
return (
<Flatpickr
options={{ dateFormat: 'Y-m-d H:i' }}
value={date}
onChange={date => setDate(date)}
/>
);
};
export default CustomDateFormat;
react-datepicker is a simple and reusable date picker component for React. It offers a wide range of customization options and supports date ranges, time selection, and localization. Compared to react-flatpickr, it is more focused on providing a straightforward API and ease of use.
react-dates is a date picker library developed by Airbnb. It provides a highly customizable and accessible date picker component with support for date ranges, single dates, and multiple dates. It is more feature-rich and offers better accessibility options compared to react-flatpickr.
react-day-picker is a flexible date picker component for React. It allows for extensive customization and supports features like date ranges, multiple date selection, and custom styling. It is more flexible and customizable compared to react-flatpickr, making it suitable for complex use cases.
Flatpickr for React.
This package can be install with yarn
or npm
npm
npm install --save react-flatpickr
yarn
yarn add react-flatpickr
// 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 });
}}
/>
);
}
}
string
| optional
This is the default value that will be passed to the inner input
string || array || object || number
| optional
Same as below
Object
| optional
Flatpickr options
: you can pass all Flatpickr parameters
here.Flatpickr
hooks can be passed within this option too.Example:
<Flatpickr options={{ minDate: "2017-01-01" }} />
node
| optional
This option is closely related with the wrap option from Flatpickr
, please refer to the former link for more information.
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.
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.
function
| optional
function
| optional
function
| optional
function
| optional
function
| optional
function
| optional
function
| optional
function
| optional
function
| optional
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} />
}
}
/>
)
}
Please import themes directly from the flatpickr
dependency.
In most cases, you should just be able to
import 'flatpickr/dist/themes/airbnb.css'
, but in some cases npm or yarn may installflatpickr
innode_modules/react-flatpickr/node_modules/flatpickr
. If that happens, removing yournode_modules
dir and reinstalling should put flatpickr in the rootnode_modules
dir, or you can import fromreact-flatpickr/node_modules/flatpickr
manually.
MIT
FAQs
flatpickr for React
The npm package react-flatpickr receives a total of 165,357 weekly downloads. As such, react-flatpickr popularity was classified as popular.
We found that react-flatpickr demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.