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.

    Install

    npm i material-mui-date-range-picker

    DownloadsWeekly Downloads

    2

    Version

    5.0.1

    License

    MIT

    Unpacked Size

    88.3 kB

    Total Files

    41

    Last publish

    Collaborators

    • nikhilgoud