material-mui-date-range-picker
TypeScript icon, indicating that this package has built-in type declarations

5.0.1 • Public • Published

react-daterange-picker

A react date range picker using material-ui components.

Latest npm version

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

Note: only supports mm/dd/yyyy fomat as of now.

Dependencies (4)

Dev Dependencies (25)

Package Sidebar

Install

npm i material-mui-date-range-picker

Weekly Downloads

437

Version

5.0.1

License

MIT

Unpacked Size

88.3 kB

Total Files

41

Last publish

Collaborators

  • nikhilgoud