Airbnb反应日期未显示选定的范围

Question

我正在尝试添加airbnb反应日期。除了一件事（未打开已经选择的日期的一个月）外，所有功能都起作用。

当我分配开始日期和结束日期时，它会选择范围，但未显示选定的月份。它显示了本月。

例如：如果我设置启动日期= 2017-05-05和结束日期= 2017-05-09，则显示选择，但是在下次日历时，Picker只能显示当月，所以我必须单击下个月，下个月查看先前的选定日期;

我的代码：

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>
    );
    }
}

当我打开选择器时，它显示2月而不是5月。

Answer 1

您需要添加所选状态仍然像这样：

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

尝试这种paterangepicker

的道具

initialVisibleMonth={() => startDate}