react-calendar-range

Select Date ranges with react hassle free, user can just use the Component and pass a onChange function which returns the date range. This can be easily modified by providing the classname width and functionality as required

Visit here to see a Demo

Usage

import ImageUpload from 'react-calendar-range'

export default function NewComponent() {
  const onDateChange = (startDate, endDate) => {
    console.log(startDate, endDate)
  }

  return <Calendar dateKeyDimension='35px' hideDisabledDate={false} onChange={onDateChange} />
}

Props that can be passed:

type CalendarPropsType = {
  onChange: (startDate: Date | null, endDate: Date | null) => void
  initialStartDate?: string
  initialEndDate?: string
  YearBackIcon?: string
  MonthBackIcon?: string
  hideDisabledDate?: boolean
  dateKeyDimension?: string
  inRangeClassName?: string
  selectedClassName?: string
  weekDayClassName?: string
  dateClassName?: string
  yearPanelClassName?: string
  calendarPopupClassName?: string
}

License

MIT © NeerajSati