A responsive and accessible date range picker component with bunch of options built with React 🔥

NPM JavaScript Style Guide

npm install --save react-range-calendar

OR

yarn add react-range-calendar

import React, { Component } from "react";
import Calendar from "react-range-calendar";
export default class App extends Component {
 state = {
 visible: true,
 dateRange: [new Date("11/10/2019"), new Date("11/18/2019")]
 };
 render() {
 const { visible, dateRange } = this.state;
 const steps = 7;
 const startWithDay = "Wed";
 return (
 <Calendar
 visible={visible}
 steps={steps}
 startWithDay={startWithDay}
 dateRange={dateRange}
 onDateClick={(minDate, maxDate) => {
 this.setState({ dateRange: [minDate, maxDate] });
 }}
 type="range"
 />
 );
 }
}

Asterisk (*) props are Required.

1. range

   On user date selection, it will find nearest provided day (startWithDay) and add provided steps from that day

   Example

   <Calendar
    visible={visible}
    steps={steps}
    startWithDay={startWithDay}
    dateRange={dateRange}
    onDateClick={(minDate, maxDate) => {
    this.setState({ dateRange: [minDate, maxDate] });
    }}
    type="range"
   />

   Demo

   Props

   Prop name	Description	Default Value	Example values
   steps*	Steps from start date	7	7
   startWithDay*	Starting day of nearest selected date	Wed	Wed

2. free-range

   Users can select date freely

   Example

   <Calendar
    visible={visible}
    dateRange={dateRange}
    onDateClick={(minDate, maxDate) => {
    this.setState({ dateRange: [minDate, maxDate] });
    }}
    type="free-range"
   />

   Demo

3. single

   For single date select

   Example

   <Calendar
    visible={visible}
    dateRange={dateRange}
    onDateClick={date => {
    this.setState({ dateRange: [date] });
    }}
    type="single"
   />

   Demo

Thanks goes to these wonderful people

Feel free to make Pull Request for your feature/fix.

MIT © Expertizo