dz-daterangepicker-material-2 v2.0.0

dz-daterangepicker-material

Dz Daterangepicker Material.

This 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";

function Example(){
    const [date, setDate] = React.useState({
      startDate: new Date(2020, 4, 1),
      endDate: new Date(2020, 4, 10)
    })

    const onChange = (start, end) => {
        setDate({
          startDate: start,
          endDate: end,
        })
    }

    return (
     <DateRangePicker
       startDate={date.startDate}
       endDate={date.endDate}
       onChange={onChange}
       startWeek={'monday'}
       onlyView={false}
       datePicker={false}
       textFieldProps={{}}
       popoverProps={{}}
     />
    )
}

Available props

Donation :beer: :beer: :beer:

License

MIT © Dzheyhan Ahmedov