Material UI (v4) DateRange Picker

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

Preview

Usage

npm i @finnan444/material-ui-daterange-picker

# or with yarn
yarn add @finnan444/material-ui-daterange-picker

Basic example

See also example directory. You can run it using npm run start command.

import React from "react";
import { DateRangePicker, DateRange } from '@finnan444/material-ui-daterange-picker';

type Props = {}

const App: React.FC<Props> = props => {
  const [open, setOpen] = React.useState(false);
  const [dateRange, setDateRange] = React.useState<DateRange>({});

  const toggle = () => setOpen(!open);

  return (
    <DateRangePicker
      open={open}
      onToggle={toggle}
      onChange={(range) => setDateRange(range)}
      showOutsideDays
      fixedWeeks
    />
  );
}

export default App;

Types

export interface DateRange {
    startDate?: Date;
    endDate?: Date;
}

export type DefinedRange = {
    startDate: Date;
    endDate: Date;
    label: string;
};

Props

| Name | Type | Required | Default value | Description | |:----------------------|:------------------------|:-----------|:------------------|:------------------------------------------------------------------------------------------| | onChange | (DateRange) => void | required | - | Handler function for providing selected date range. | | onToggle | () => void | optional | - | Handler function to show / hide the DateRangePicker. | | initialDateRange | DateRange | optional | {} | Initially selected date range. | | minDate | Date | optional | 10 years ago | Min date allowed in range. | | maxDate | Date | 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 | optional | enGB | The locale for date calculation. | | popoverProps | Partial<PopoverProps> | optional | - | PopoverProps applied to main Popover component. | | startText | React.ReactNode | optional | Start | Text for start toolbar placeholder. | | endText | React.ReactNode | optional | End | Text for end toolbar placeholder. | | showOutsideDays | boolean | optional | false | Show the outside days. An outside day is a day falling in the next or the previous month. | | fixedWeeks | boolean | optional | false | Display six weeks per months, regardless the month’s number of weeks. | | weekStartsOn | Union | optional | [0,1,2,3,4,5,6] | The index of the first day of the week (0 - Sunday). |

Development

TSDX is used to publish this package.