Nurturing Pluto's Martians

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

    1.0.11 • Public • Published

    MUI DateRange Picker

    A react date range picker implementation using @mui (v5).

    Latest npm version

    Preview

    Screenshot

    Live Demo

    Check out the project running here!

    Usage

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

    Basic example

    import React from "react";
    import { DateRangePicker, DateRange } from "mui-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
    locale Locale (from date-dns) optional undefined defines locale to use (from date-fns package)

    Made possible by

    Install

    npm i @artemkarimov/mui-date-range-picker

    DownloadsWeekly Downloads

    2

    Version

    1.0.11

    License

    MIT

    Unpacked Size

    181 kB

    Total Files

    34

    Last publish

    Collaborators

    • artemkarimov