0.6.0 • Published 1 year ago
@finnan444/material-ui-daterange-picker v0.6.0
Material UI (v4) DateRange Picker
A react date range picker implementation using @material-ui v4 and date-fns.
Preview
Usage
npm i @finnan444/material-ui-daterange-picker
# or with yarn
yarn add @finnan444/material-ui-daterange-picker
Basic example
See also example directory. You can run it using npm run start
command.
import React from "react";
import { DateRangePicker, DateRange } from '@finnan444/material-ui-daterange-picker';
type Props = {}
const App: React.FC<Props> = props => {
const [open, setOpen] = React.useState(false);
const [dateRange, setDateRange] = React.useState<DateRange>({});
const toggle = () => setOpen(!open);
return (
<DateRangePicker
open={open}
onToggle={toggle}
onChange={(range) => setDateRange(range)}
showOutsideDays
fixedWeeks
/>
);
}
export default App;
Types
export interface DateRange {
startDate?: Date;
endDate?: Date;
}
export type DefinedRange = {
startDate: Date;
endDate: Date;
label: string;
};
Props
Name | Type | Required | Default value | Description |
---|---|---|---|---|
onChange | (DateRange) => void | required | - | Handler function for providing selected date range. |
onToggle | () => void | optional | - | Handler function to show / hide the DateRangePicker. |
initialDateRange | DateRange | optional | {} | Initially selected date range. |
minDate | Date | optional | 10 years ago | Min date allowed in range. |
maxDate | Date | 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. |
locale | Locale | optional | enGB | The locale for date calculation. |
popoverProps | Partial<PopoverProps> | optional | - | PopoverProps applied to main Popover component. |
startText | React.ReactNode | optional | Start | Text for start toolbar placeholder. |
endText | React.ReactNode | optional | End | Text for end toolbar placeholder. |
showOutsideDays | boolean | optional | false | Show the outside days. An outside day is a day falling in the next or the previous month. |
fixedWeeks | boolean | optional | false | Display six weeks per months, regardless the month’s number of weeks. |
weekStartsOn | Union | optional | 0,1,2,3,4,5,6 | The index of the first day of the week (0 - Sunday). |
Development
TSDX is used to publish this package.
0.6.0
1 year ago
0.5.9
2 years ago
0.5.7
3 years ago
0.5.6
3 years ago
0.5.5
3 years ago
0.5.4
3 years ago
0.5.3
3 years ago
0.5.0
3 years ago
0.4.0
3 years ago
0.5.1
3 years ago
0.3.9
3 years ago
0.3.8
3 years ago
0.3.7
3 years ago
0.3.6
3 years ago
0.3.5
3 years ago
0.3.4
3 years ago
0.3.3
3 years ago
0.3.2
3 years ago
0.3.1
3 years ago
0.2.0
3 years ago
0.1.0
3 years ago