Miss any of our Open RFC calls?Watch the recordings here! »

@ouvrages/react-daterange-picker

1.0.7 • Public • Published

react-daterange-picker

A react date range picker using material-ui components.

Latest npm version

Live Demo: https://flippingbitss.github.io/react-daterange-picker/

Usage

npm install @matharumanpreet00/react-daterange-picker --save
# or with yarn 
yarn add @matharumanpreet00/react-daterange-picker

Screenshot

Basic Example

import React from "react";
import { DateRangePicker, DateRange } from "@matharumanpreet00/react-daterange-picker";
 
type Props = {}
type State = {
    open: boolean,
    dateRange: DateRange
}
 
class App extends React.Component<Props, State> {
    state = {
        open: true,
        dateRange: {}
    };
    
    render() {
        return (
            <DateRangePicker
                open={this.state.open}
                onChange={range => this.setState({ dateRange: range })}
            />
        );
    }
}
 
export default App;

Basic example using hooks

import React from "react";
import { DateRangePicker, DateRange } from "@matharumanpreet00/react-daterange-picker";
 
type Props = {}
 
const App: React.FunctionComponent<Props> = props => {
    const [open, setOpen] = React.useState(false);
    const [dateRange, setDateRange] = React.useState<DateRange>({});
 
    return (
        <DateRangePicker
            open={open}
            onChange={range => setDateRange(range)}
        />
    );
}
 
export default App;

Types

interface DateRange {
    startDate?: Date,
    endDate?: Date
}
 
interface DefinedRange {
    label: string,
    startDate: Date,
    endDate: Date
}

Props

Name Type Required Default value Description
initialDateRange DateRange {} initially selected date range
minDate Date | string 10 years ago min date allowed in range
maxDate Date | string 10 years from now max date allowed in range
onChange (DateRange) => void required - handler function for providing selected date range
definedRanges DefinedRange[] - custom defined ranges to show in the list
locale string "en" i18n

Install

npm i @ouvrages/react-daterange-picker

DownloadsWeekly Downloads

29

Version

1.0.7

License

MIT

Unpacked Size

225 kB

Total Files

45

Last publish

Collaborators

  • avatar