Skip to content

nikhilgoud/materialui-daterange-picker

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

86 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-daterange-picker

A react date range picker using material-ui components.

Latest npm version

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.

About

A react date range picker implementation using @material-ui.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 76.9%
  • JavaScript 11.6%
  • HTML 7.1%
  • CSS 4.4%