react-daterange-picker

A react date range picker using material-ui components.

$3

Live Demo: https://nikhilgoud.github.io/material-mui-date-range-picker/

Usage

``bash
npm install material-mui-date-range-picker --save


or with yarn


yarn add material-mui-date-range-picker
`

!Screenshot

Basic Example

`tsx
import React from 'react';
import { DateRangePicker, DateRange } from 'material-mui-date-range-picker';

type Props = {};
type State = {
open: boolean;
dateRange: DateRange;
};

class App extends React.Component {
state = {
open: true,
dateRange: {},
};

render() {
return this.setState({ dateRange: range })} />;
}
}

export default App;
`

Basic example using hooks

`tsx
import React from 'react';
import './App.css';
import { DateRange, DateRangeEditor } from 'material-mui-date-range-picker';
import { ThemeProvider, StyledEngineProvider, useTheme } from '@mui/material/styles';

function App() {
const [dateRange, setDateRange] = React.useState({});
const theme = useTheme();

return (




);
}

export default App;
`

`tsx
import React from 'react';
import { DateRangePicker, DateRange } from 'material-mui-date-range-picker';
import { ThemeProvider, StyledEngineProvider, useTheme } from '@mui/material/styles';
type Props = {};

const App: React.FunctionComponent = (props) => {
const [dateRange, setDateRange] = React.useState({});
const [openPicker, setOpenPicker] = React.useState(true);

const theme = useTheme();
const togglePicker = () => setOpenPicker(!openPicker);

return (




);
};

export default App;
`

Types

`ts
interface DateRange {
startDate?: Date;
endDate?: Date;
}

interface DefinedRange {
label: string;
startDate: Date;
endDate: Date;
}
`

Props

$3

| 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 |

$3

| Name | Type | Required | Default value | Description |
| :------------------- | :-------------------- | :--------- | :---------------- | :---------------------------------------------------- |
| dateRange | DateRange | _required_ | {} | selected date range |
| onChange | (DateRange) => void | _required_ | - | handler function for providing selected date range |
| mask | string | _optional_ | __/__/____ | input mask for DateInputs |
| dateInputDelimeter | string | _optional_ | / | input delimeter/seperatot for DateInputs (mm/dd/yyyy) |
| 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 |

_Note:_ only supports mm/dd/yyyy` fomat as of now.