MUI DateRange Picker

A React date range picker implementation using @mui (v7).

Preview

!Screenshot

Usage

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

or with yarn


yarn add date-range-picker-mui
`

Basic example

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

type Props = {}

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

const toggle = () => setOpen(!open);

return (
open={open}
toggle={toggle}
onChange={(range) => setDateRange(range)}
/>
);
}

export default App;
`

Types


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

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

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 |
| locale | Locale (from date-dns) | _optional_ | undefined` | defines locale to use (from date-fns package) |

Made possible by