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 type 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.