Package Exports

gp-react-daterange-picker
gp-react-daterange-picker/build/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gp-react-daterange-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gp-react-daterange-picker

A react date range picker using material-ui components.

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

Usage

npm install gp-react-daterange-picker --save
# or with yarn
yarn add gp-react-daterange-picker

Screenshot

Basic Example

import React from "react";
import { DateRangePicker, DateRange } from "gp-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 "gp-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
`maxDate`	`Date	string`		10 years from now
`onChange`	`(DateRange) => void`	required	-	handler function for providing selected date range
`definedRanges`	`DefinedRange[]`		-	custom defined ranges to show in the list
`handleApply`	`() => void`		-	handler for Apply action
`handleCancel`	`() => void`		-	handler for Cancel action