Materialui-react-daterange-picker NPM

Material-UI React DateRange Picker

React date range picker using MATERIAL-UI

Preview

Screenshot

Usage

npm i materialui-react-daterange-picker

Basic example

import { useState } from 'react';
import { DateRangePicker } from 'materialui-react-daterange-picker';

const App = (props) => {
    const [open, setOpen] = useState(false);
    const [dateRange, setDateRange] = useState({});

    const toggle = () => setOpen(!open);
    const change = (range) => setDateRange(range);

    return (
        <DateRangePicker
            open={open}
            toggle={toggle}
            onChange={change}
        />
    );
}

export default App;

Props

Name	Type	Required	Default value	Description
`onChange`	`(DateRange) => void`	required	-	handler function for providing selected date range
`toggle`	`() => void`	required	-	function to show / hide the DateRangePicker
`initialDateRange`	`DateRange`	optional	`{}`	initially selected date range
`minDate`	`Date` or `string`	optional	10 years ago	min date allowed in range
`maxDate`	`Date` or `string`	optional	10 years from now	max date allowed in range
`definedRanges`	`DefinedRange[]`	optional	-	custom defined ranges to show in the list
`closeOnClickOutside`	`boolean`	optional	`true`	defines if DateRangePicker will be closed when clicking outside of it
`wrapperClassName`	`object`	optional	`undefined`	defines additional wrapper style classes