Mobile Date Range Calendar Example:

```jsx
const isAfter = require('date-fns').isAfter;

const oneYear = new Date();
oneYear.setMonth(oneYear.getMonth() + 12);
const addTwoDays = new Date();
addTwoDays.setDate(addTwoDays.getDate() + 2);

class MobileDateRangePickerExample extends React.Component{
constructor(props){
    super(props)
    this.state = {
         mobileRangeStartDate : new Date(),
         mobileRangeEndDate : addTwoDays
    }
}
     handleChangeMobileRangeCalendar  ({ mobileRangeStartDate, mobileRangeEndDate })  {

        if (mobileRangeStartDate !== undefined) {
            mobileRangeStartDate = mobileRangeStartDate || this.state.mobileRangeStartDate;
            mobileRangeEndDate = mobileRangeEndDate || this.state.mobileRangeEndDate;

            /* to check whether start date is selected before end date */
            if (isAfter(mobileRangeStartDate, mobileRangeEndDate)) {
                this.setState({ mobileRangeStartDate, mobileRangeEndDate: null });
            }
            /* to increase end date by 2 days by default. */
            if (mobileRangeEndDate !== null) {
                if (((mobileRangeEndDate.getDate() - mobileRangeStartDate.getDate()) === 1 || (mobileRangeEndDate.getDate() - mobileRangeStartDate.getDate()) === 0) && mobileRangeStartDate.getMonth() === mobileRangeEndDate.getMonth()) {
                    this.setState({ mobileRangeEndDate: (mobileRangeEndDate.setDate(mobileRangeStartDate.getDate() + 2), this.state.mobileRangeEndDate.setMonth(mobileRangeEndDate.getMonth()), this.state.mobileRangeStartDate.setFullYear(mobileRangeEndDate.getFullYear())) });
                    mobileRangeEndDate = this.state.mobileRangeEndDate;
                    this.setState({ mobileRangeStartDate, mobileRangeEndDate });
                }
                else
                    if (mobileRangeStartDate.getDate() - mobileRangeEndDate.getDate() >= 27 && (mobileRangeStartDate.getMonth() + 1) === mobileRangeEndDate.getMonth()) {
                        this.setState({ mobileRangeEndDate: (mobileRangeEndDate.setDate(mobileRangeEndDate.getDate() + 1), mobileRangeEndDate.setMonth(mobileRangeEndDate.getMonth()), mobileRangeEndDate.setFullYear(mobileRangeEndDate.getFullYear())) });
                        mobileRangeEndDate = this.state.mobileRangeEndDate;
                        this.setState({ mobileRangeStartDate, mobileRangeEndDate });

                    } else {
                        if (mobileRangeEndDate > mobileRangeStartDate) {
                            this.setState({ mobileRangeStartDate, mobileRangeEndDate });
                        }
                    }
            }
        }
        else {
            if (this.state.mobileRangeStartDate !== null) {
                if ((this.state.mobileRangeStartDate.getDate() + 2) <= mobileRangeEndDate.getDate()) {
                    mobileRangeStartDate = this.state.mobileRangeStartDate;
                    this.setState({ mobileRangeStartDate, mobileRangeEndDate });
                }
                else {
                    mobileRangeStartDate = this.state.mobileRangeStartDate;
                    this.setState({ mobileRangeStartDate, mobileRangeEndDate });
                }
            }
            var currentDate = new Date();
            if (this.state.mobileRangeStartDate.getFullYear() >= mobileRangeEndDate.getFullYear()) {
                if (this.state.mobileRangeStartDate.getMonth() >= mobileRangeEndDate.getMonth()) {
                    if (this.state.mobileRangeStartDate.getDate() > mobileRangeEndDate.getDate()) {
                        if ((mobileRangeEndDate.getMonth() !== currentDate.getMonth())) {
                            this.setState({ mobileRangeStartDate: (this.state.mobileRangeStartDate.setDate(mobileRangeEndDate.getDate() - 2), this.state.mobileRangeStartDate.setMonth(mobileRangeEndDate.getDate() <= 2 ? mobileRangeEndDate.getMonth() - 1 : mobileRangeEndDate.getMonth()), this.state.mobileRangeStartDate.setFullYear(mobileRangeEndDate.getFullYear())) });
                            mobileRangeStartDate = this.state.mobileRangeStartDate;
                            this.setState({ mobileRangeStartDate, mobileRangeEndDate });
                        } else if (((mobileRangeEndDate.getDate() - 1) !== currentDate.getDate() === false)) {
                            this.setState({ mobileRangeStartDate: (this.state.mobileRangeStartDate.setDate(mobileRangeEndDate.getDate() - 1), this.state.mobileRangeStartDate.setMonth(mobileRangeEndDate.getMonth()), this.state.mobileRangeStartDate.setFullYear(mobileRangeEndDate.getFullYear())) });
                            mobileRangeStartDate = this.state.mobileRangeStartDate;
                            this.setState({ mobileRangeStartDate, mobileRangeEndDate });
                        }
                        else {
                            mobileRangeStartDate = new Date();
                            this.setState({ mobileRangeStartDate, mobileRangeEndDate });
                        }
                    }
                }
            }
            else {
                this.setState({ mobileRangeStartDate, mobileRangeEndDate: null });
            }

            /* if user selects end date before start date then startdate = enddate - 2 */
            if (this.state.mobileRangeStartDate.getFullYear() >= mobileRangeEndDate.getFullYear()) {
                if (this.state.mobileRangeStartDate.getMonth() >= mobileRangeEndDate.getMonth()) {
                    if ((this.state.mobileRangeStartDate.getDate() > mobileRangeEndDate.getDate()) && (mobileRangeEndDate.getDate() !== currentDate.getDate())) {
                        if (mobileRangeEndDate.getDate() >= (currentDate.getDate() + 2)) { // not allow to select previous dates than current date.
                            this.setState({ mobileRangeStartDate: (this.state.mobileRangeStartDate.setDate(mobileRangeEndDate.getDate() - 2), this.state.mobileRangeStartDate.setMonth(mobileRangeEndDate.getMonth()), this.state.mobileRangeStartDate.setFullYear(mobileRangeEndDate.getFullYear())) });
                            mobileRangeStartDate = this.state.mobileRangeStartDate;
                            this.setState({ mobileRangeStartDate, mobileRangeEndDate });
                        }
                        else {
                            this.setState({ mobileRangeStartDate, mobileRangeEndDate: null });
                        }
                    }
                }
            }
            else {
                this.setState({ mobileRangeStartDate, mobileRangeEndDate });
            }
        }

    };

    handleChangeStartMobileRange  (mobileRangeStartDate) { this.handleChangeMobileRangeCalendar({ mobileRangeStartDate })};

    handleChangeEndMobileRange  (mobileRangeEndDate) { this.handleChangeMobileRangeCalendar({ mobileRangeEndDate })};


render(){
    return(
<MobileDateRangeCalendar
                        dateFormatMobileRange='dd  MMM  yyyy'
                        mobileRangeStartDateSelected={this.state.mobileRangeStartDate}
                        mobileRangeEndDateSelected={this.state.mobileRangeEndDate}
                        mobileRangeStartDate={this.state.mobileRangeStartDate}
                        mobileRangeEndDate={this.state.mobileRangeEndDate}
                        handleChangeStartMobileRange={this.handleChangeStartMobileRange.bind(this)}
                        handleChangeEndMobileRange={this.handleChangeEndMobileRange.bind(this)}
                        mobileRangeMinDate={new Date()}
                        mobileRangeMaxDate={oneYear}
                        dateFormatCalendar=' '
                        lengthOfWeekDay={1}
                        startDateLabel='CHECK-IN'
                        endDateLabel='CHECK-OUT'
                    />
    );
}
};<MobileDateRangePickerExample />
```