dz-daterangepicker-material-v2

V2 of Dz Daterangepicker Material.

Forked Project and introduced new Props.

Install

npm i --s dz-daterangepicker-materialv2

Demo

Minimal demo page is included in sample directory.

To run:

cd example/ && npm i && npm start

Note: This is the old demo version. Some new features are not here

Online demo is also available!

Day, Year, Month view selection

Usage

import React from 'react'
import DateRangePicker from "dz-daterangepicker-materialv2";

import "dz-daterangepicker-materialv2/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

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
disableFuture	disable future dates	false	Boolean
shortenWeekDays	if set to true will use short weekday e.g. "Mon"	false	Boolean
calendarMonthFormat	will change the month formatting	"MMMM"	"M","Mo","MM","MMM","MMMM"
showOnlyDaysInMonths	will display only days applicable for the current month	false	Boolean
minYear	will display the min year in the calendar. maxYear should be present	''	number
maxYear	will display the max year in the calendar. minYear should be present	''	number
setFocusOnEndDateMonth	if set to true will shift calendar focus on the ending month	false	Boolean
onChangeDetected	function to check all recent changes to the calendar	null	(date: { startDate?: Date, endDate?: Date }) => void

Donation 🍺 🍺 🍺

License

MIT © Dzheyhan Ahmedov