Material-mui-date-range-picker NPM

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

Screenshot

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