app.js

import React, {Component} from 'react';
import 'react-dates/initialize';
import {DateRangePicker, initialStartDate, isInclusivelyAfterDay} from 'react-dates';
import {START_DATE, END_DATE} from 'react-dates/constants';
import ReactDOM from 'react-dom';
import isSameDay from './utils/isSameDay';
import moment from "moment/moment";
import fetchPrices from './utils/fetchPrices';

let disabledDates = [];

for (const date of bookedDates) {
    disabledDates.push(moment(date));
}

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            date: null,
            focused: null,
            focusedInput: null,
            startDate: null,
            endDate: null,
            daySize: 50,
            showMonths: 1,
            firstDayOfWeek: 1,
            checkInText: 'Check in',
            checkOutText: 'Check out',
            disabledDates: disabledDates //cached
        };

        this.onDatesChange = this.onDatesChange.bind(this); //get same function every time
        this.onFocusChange = this.onFocusChange.bind(this);
    }

    onDatesChange({startDate, endDate}) {
        this.setState({startDate, endDate});
        document.querySelector('.price-table').innerHTML = '';

        if (startDate && endDate) {
            fetchPrices(startDate, endDate);
        }
    }

    onFocusChange(focusedInput) {
        this.setState({focusedInput});
    }

    static renderCalendarInfo() {
        return 'Minimum stay may vary'; 
    }

    render() {
        const {focusedInput, startDate, endDate} = this.state;
        let minimumNights = 4;
        let maximumNights = 21;
        let maximumEndDate = moment().add(maximumNights, 'days');
        let condition;

        if (startDate) {
            if(startDate.month() === 6 || startDate.month() === 7) { //minimum nights should be 7 during the summer
                minimumNights = 7;
            }

            maximumEndDate = startDate.clone().add(maximumNights, 'days');
        }

        if (focusedInput === END_DATE) { // disable if day is after the maximum date
            condition = (day) => isInclusivelyAfterDay(day, maximumEndDate);
        }

        if (focusedInput === START_DATE) {
            //enable when day is 14 days in the future
            condition = (day) => !isInclusivelyAfterDay(day, moment().add('14', 'days'));
        }

        return (
            <DateRangePicker
                firstDayOfWeek={this.state.firstDayOfWeek}
                startDatePlaceholderText={this.state.checkInText}
                endDatePlaceholderText={this.state.checkOutText}
                showClearDates={true}
                reopenPickerOnClearDates={true}
                showDefaultInputIcon={true}
                numberOfMonths={this.state.showMonths}
                daySize={this.state.daySize}
                isDayBlocked={day1 => this.state.disabledDates.some(day2 => isSameDay(day1, day2))}
                renderCalendarInfo={App.renderCalendarInfo}
                calendarInfoPosition="bottom"
                startDateId="MyDatePickerStart"
                endDateId="MyDatePickerStartEnd"
                onDatesChange={this.onDatesChange}
                onFocusChange={this.onFocusChange}
                focusedInput={focusedInput}
                startDate={startDate}
                endDate={endDate}
                minimumNights={minimumNights}
                isOutsideRange={condition}
            />
        );
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('root')
);