react-daterange-picker

A react date range picker using material-ui components.

Forked from jungsoft/materialui-daterange-picker, flippingbitss/react-daterange-picker to work with mui v5

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

Usage

npm install material-mui-date-range-picker --save
# or with yarn
yarn add material-mui-date-range-picker

Basic Example

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<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 './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<DateRange>({});
  const theme = useTheme();

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <div className='App'>
          <DateRangeEditor dateRange={dateRange} onChange={(range) => setDateRange(range)} />
        </div>
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

export default App;

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> = (props) => {
  const [dateRange, setDateRange] = React.useState<DateRange>({});
  const [openPicker, setOpenPicker] = React.useState<boolean>(true);

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

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <div className='App'>
          <DateRangePicker open={openPicker} toggle={togglePicker} initialDateRange={dateRange} onChange={(range) => setDateRange(range)} />
        </div>
      </ThemeProvider>
    </StyledEngineProvider>
  );
};

export default App;

Types

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

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

Props

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

DateRangeEditor Props

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