MUI DateRange Picker

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

Preview

Usage

npm install mui-v9-date-range-picker --save

# or with yarn
yarn add mui-v9-date-range-picker

Basic example

import React from 'react';
import { DateRangePicker } from 'mui-v9-date-range-picker';
import type { DateRange } from 'mui-v9-date-range-picker';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

type Props = {};

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

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

  return (
    <Stack sx={{ alignItems: "center" }}>
      <Button onClick={toggle} variant="contained" color="inherit" fullWidth={true}>
        Toggle the calendar
      </Button>
      <DateRangePicker open={open} toggle={toggle} onChange={(range) => setDateRange(range)} />
    </Stack>
  );
};

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 | |:----------------------|:--------------------------|:-----------|:------------------|:----------------------------------------------------------------------| | 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-fns) | optional | undefined | defines locale to use (from date-fns package) |

Made possible by