Wondering what’s next for npm?Check out our public roadmap! »

    @jamiedixon/materialui-daterange-picker
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.92 • Public • Published

    Material UI DateRange Picker

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

    Latest npm version

    Preview

    Screenshot

    Live Demo

    Check out the project running here!

    Usage

    npm install materialui-daterange-picker --save
    
    # or with yarn
    yarn add materialui-daterange-picker

    Basic example

    import React from "react";
    import { DateRangePicker, DateRange } from "materialui-daterange-picker";
    
    type Props = {}
    
    const App: React.FunctionComponent<Props> = props => {
      const [open, setOpen] = React.useState(false);
      const [dateRange, setDateRange] = React.useState<DateRange>({});
    
      const toggle = () => setOpen(!open);
    
      return (
        <DateRangePicker
          open={open}
          toggle={toggle}
          onChange={(range) => setDateRange(range)}
        />
      );
    }
    
    export default App;

    Types

    interface DateRange {
        startDate?: Date,
        endDate?: Date
    }
    
    interface DefinedRange {
        label: string,
        startDate: Date,
        endDate: Date
    }

    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

    Made possible by

    Install

    npm i @jamiedixon/materialui-daterange-picker

    DownloadsWeekly Downloads

    7

    Version

    1.1.92

    License

    MIT

    Unpacked Size

    1.1 MB

    Total Files

    34

    Last publish

    Collaborators

    • avatar