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
}

| Attributes | type | values | description | | ------------------- | ------------------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------ | | onChange | Function (startDate, endDate) => void | e.g, onChange(start,end)} | Provide onchange function to receive the values selected by the user as soon as user selects any value | | initialStartDate | string | "01-03-2003" | Allow the user to type in input field and when open calendar see the value preselected | | initialEndDate | string | "01-03-2003" | Allow the user to type in input field and when open calendar see the value preselected | | YearBackIcon | string or Svg | Image Url | Back Icon to change year | | MonthBackIcon | string or Svg | Image Url | Back Icon to change month | | hideDisabledDate | boolean | true|false | To hide the excess date of previous and next month | | dateKeyDimension | string | "26px" | "2rem" | To style the width of calendar dates | | Other Classes Names | string | "" | Custom class name to easily override styles |

License

MIT © NeerajSati