Awesome Open Source
Awesome Open Source

react-daterange-picker

A react date range picker using material-ui components.

Latest npm version

Live Demo: https://flippingbitss.github.io/react-daterange-picker/

Usage

npm install @matharumanpreet00/react-daterange-picker --save
# or with yarn
yarn add @matharumanpreet00/react-daterange-picker

Screenshot

Basic Example

import React from "react";
import { DateRangePicker, DateRange } from "@matharumanpreet00/react-daterange-picker";

type Props = {}
type State = {
    open: boolean,
    dateRange: DateRange
}

class App extends React.Component<Props, State> {
	state = {
		open: true,
		dateRange: {}
	};
	
	render() {
		return (
			<DateRangePicker
				open={this.state.open}
				onChange={range => this.setState({ dateRange: range })}
			/>
		);
	}
}

export default App;

Basic example using hooks

import React from "react";
import { DateRangePicker, DateRange } from "@matharumanpreet00/react-daterange-picker";

type Props = {}

const App: React.FunctionComponent<Props> = props => {
	const [open, setOpen] = React.useState(false);
	const [dateRange, setDateRange] = React.useState<DateRange>({});

	return (
		<DateRangePicker
			open={open}
			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
initialDateRange DateRange {} initially selected date range
minDate `Date string` 10 years ago
maxDate `Date string` 10 years from now
onChange (DateRange) => void required - handler function for providing selected date range
definedRanges DefinedRange[] - custom defined ranges to show in the list

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (251,605
Reactjs (72,292
Material Ui (3,453
Hooks (2,819
Npm Package (2,709
React Hooks (2,609
React Components (2,358
Material (1,582
Date (972
Picker (586
Related Projects