Material UI DateRange Picker

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

Fork

We have forked from the upstream because we depend on Material UI 5 and the upstream has not yet upgraded. We are waiting for the upstream to merge PR#39 so we can switch back to using the maintained version.

Changes to build and publish are entirely for internal purposes. We are using our standard CI/CD process to create a private npm artifact @gallus/materialui-daterange-picker so that we can consume in our dependent projects as an NPM package.

Preview

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