A react date range picker implementation using @material-ui. and based to repository https://github.com/jungsoft/materialui-daterange-picker
npm install materialui-daterange-picker-ptA react date range picker implementation using @material-ui and updated to lang pt.
``bash
npm install materialui-daterange-picker-pt --save
Basic example
`tsx
import React from "react";
import { DateRangePicker, DateRange } from "materialui-daterange-picker-pt";type Props = {}
const App: React.FunctionComponent = props => {
const [open, setOpen] = React.useState(false);
const [dateRange, setDateRange] = React.useState({});
const toggle = () => setOpen(!open);
return (
open={open}
toggle={toggle}
onChange={(range) => 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
:--- | :--- | :--- | :--- | :---
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