Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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/
- 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-07T12:12:07.355Z (12 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