https://github.com/flippingbitss/react-daterange-picker

A react date range picker to using @material-ui. Live Demo: https://flippingbitss.github.io/react-daterange-picker/
https://github.com/flippingbitss/react-daterange-picker

date date-fns date-range-picker daterange daterange-picker hooks material material-ui npm-package picker react react-component react-hooks typescript

Last synced: 4 days ago
JSON representation

A react date range picker to using @material-ui. Live Demo: https://flippingbitss.github.io/react-daterange-picker/

• Host: GitHub
• URL: https://github.com/flippingbitss/react-daterange-picker
• Owner: flippingbitss
• License: mit
• Created: 2019-03-23T16:38:13.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-30T17:44:49.000Z (over 1 year ago)
• Last Synced: 2025-01-14T13:12:10.064Z (11 days ago)
• Topics: date, date-fns, date-range-picker, daterange, daterange-picker, hooks, material, material-ui, npm-package, picker, react, react-component, react-hooks, typescript
• Language: TypeScript
• Homepage:
• Size: 1.69 MB
• Stars: 111
• Watchers: 2
• Forks: 220
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• stars - flippingbitss/react-daterange-picker - ui. Live Demo: https://flippingbitss.github.io/react-daterange-picker/ (HarmonyOS / Windows Manager)

README

        
# react-daterange-picker 

A react date range picker using material-ui components.



    



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

## Usage

```bash

npm install @matharumanpreet00/react-daterange-picker --save

# or with yarn

yarn add @matharumanpreet00/react-daterange-picker

```

![Screenshot](/screenshot_1.png?raw=true "Screenshot")

## Basic Example

```tsx

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 {

	state = {

		open: true,

		dateRange: {}

	};

	

	render() {

		return (

			 this.setState({ dateRange: range })}

			/>

		);

	}

}

export default App;

```

## Basic example using hooks

```tsx

import React from "react";

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

type Props = {}

const App: React.FunctionComponent = props => {

	const [open, setOpen] = React.useState(false);

	const [dateRange, setDateRange] = React.useState({});

	return (

		 setDateRange(range)}

		/>

	);

}

export default App;

```

## Types 

```ts

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 | min date allowed in range

`maxDate` | `Date | string` | | 10 years from now | max date allowed in range

`onChange` | `(DateRange) => void` | _required_ | - | handler function for providing selected date range

`definedRanges` | `DefinedRange[]` | | - | custom defined ranges to show in the list