Material UI (v4) DateRange Picker

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

Preview

Screenshot

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.