dz-daterangepicker-material
Material.
Dz DaterangepickerThis React date range picker component creates a dropdown menu from which a user can select a range of dates.It leverages moment.js to handle date manipulation and parsing. I created it while building my personal projects where i used Material UI and needed a way to select date ranges.
Install
npm install --save dz-daterangepicker-material
Demo
Minimal demo page is included in sample directory.
Online demo is also available!
Day, Year, Month view selection
Usage
import React from 'react'import DateRangePicker from "dz-daterangepicker-material"; import "dz-daterangepicker-material/dist/index.css"; { const date setDate = React const onChange = start end return <DateRangePicker = = = = = = = = /> }
Available props
prop | description | default | type |
---|---|---|---|
onChange | Triggered when a date or range is selected. returns value | ({start, end}) => this.setState({start, end}) | |
startDate | initial start Date | null | Moment or Date |
endDate | initial end Date | null | Moment or Date |
startWeek | The first day of the week | "monday" | "saturday" |
onlyView | view mode | false | Bool |
datePicker | false | Bool | |
textFieldProps | https://material-ui.com/api/text-field | {} | Obj |
popoverProps | https://material-ui.com/api/popover | {} | Obj |
minDate | min date allowed in range | null | Moment or Date |
maxDate | max date allowed in range | null | Moment or Date |
TODO | TODO | TODO | TODO |
Donation 🍺 🍺 🍺
License
MIT © Dzheyhan Ahmedov