@trickl/mui-daterange-picker NPM

MUI DateRange Picker

A react date range picker implementation using @mui (v5).

Preview

Screenshot

Live Demo

Check out the project running here!

Usage

npm install mui-daterange-picker --save

# or with yarn
yarn add mui-daterange-picker

Basic example

import React from "react";
import { DateRangePicker, DateRange } from "mui-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
}

interface SelectComment {
    start: string,
    end: string,
}

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
`locale`	`Locale` (from date-dns)	optional	`undefined`	defines locale to use (from date-fns package)
`mask`	`string`	optional	dd MMMM yyyy	the date format shown in the header
`selectComment`	`SelectComment`	optional	`{start: 'Start Date', end: 'End Date'}`	initially comment shown in the header

Made possible by

react component react-components date-range date range picker material-design material typescript npm package

@babel/runtime

1.0.7

2 years ago