AirBnB React-dates not displayed selected range

Question

我試圖添加AirBnB React-dates。除了一件事之外，所有功能都可以工作（不打開已選日期的月份）。

當我分配開始日期和結束日期時，它會選擇範圍但不顯示選定的月份。它顯示當前的月份。

例如：如果我設置開始日期= 2017-05-05和結束日期= 2017-05-09那麼它顯示選擇，但在下一次日曆選取器打開它只顯示當前月份，所以我必須點擊下個月，下個月查看之前選擇的日期;

我的代碼：

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

當打開選取器，它顯示了二月月，而不是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> 
    ); 
    } 
}