Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 5 days ago
JSON representation

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

Awesome Lists containing this project

README

        

# 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

```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