AirBnB React-dates 未显示所选范围

Question

I'm trying to add AirBnB React-dates . All of functionality working except one thing (Not opening the month of already selected dates).

When I'm assigning the start and end dates then it selects the range but not showing the selected month. It showing the current month instead.

For example: If I set start date = 2017-05-05 and end date =2017-05-09 then it shows the selection, but in next time calender picker open it only shows current month, so I have to click the next month, next month to see the previous selected dates;

My codes:

import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';

import { DateRangePicker } from 'react-dates';


var SelectedStartDate = moment('2017-05-05');
var SelectedEndDate = moment('2017-05-09');


class HomePageDatePicker extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        focusedInput: null,
        startDate: SelectedStartDate,
        endDate:SelectedEndDate
    };
    this.onDatesChange = this.onDatesChange.bind(this);
    this.onFocusChange = this.onFocusChange.bind(this);
}

onDatesChange({ startDate, endDate }) {

    this.setState({ startDate, endDate });
}

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

render() {
    const { focusedInput, startDate, endDate } = this.state;
    return (
        <div>
            <DateRangePicker
                {...this.props}
                onDatesChange={this.onDatesChange}
                onFocusChange={this.onFocusChange}
                focusedInput={focusedInput}
                startDate={startDate}
                endDate={endDate}                                     
                startDateId="datepicker_start_home"
                endDateId="datepicker_end_home"                    
                startDatePlaceholderText="Check In"
                endDatePlaceholderText="Check Out"
            />
        </div>
    );
    }
}

When open the picker,it showing the February month instead of may month.

Answer 1

You need to add a selected state still like this:

import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';

import { DateRangePicker } from 'react-dates';


var SelectedStartDate = moment('2017-05-05');
var SelectedEndDate = moment('2017-05-09');


class HomePageDatePicker extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        focusedInput: null,
        startDate: SelectedStartDate,
        endDate:SelectedEndDate
    };
    this.onDatesChange = this.onDatesChange.bind(this);
    this.onFocusChange = this.onFocusChange.bind(this);
}

onDatesChange({ startDate, endDate }) {

    this.setState({ startDate, endDate });
}

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

render() {
    const { focusedInput, startDate, endDate } = this.state;
    return (
        <div>
            <DateRangePicker
                {...this.props}
                onDatesChange={this.onDatesChange}
                onFocusChange={this.onFocusChange}
                focusedInput={focusedInput}
                //Here is the change:
                date={startDate}
                startDate={startDate}
                endDate={endDate}                                     
                startDateId="datepicker_start_home"
                endDateId="datepicker_end_home"                    
                startDatePlaceholderText="Check In"
                endDatePlaceholderText="Check Out"
            />
        </div>
    );
    }
}

Answer 2

试试这个 DateRangePicker 道具

initialVisibleMonth={() => startDate}