@finnan444/material-ui-daterange-picker

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

Usage no npm install needed!

<script type="module">
  import finnan444MaterialUiDaterangePicker from 'https://cdn.skypack.dev/@finnan444/material-ui-daterange-picker';
</script>

README

Material UI DateRange Picker

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

Latest npm version

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.