1

我正在尝试添加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>
    );
    }
}

当我打开选择器时，它显示的是二月而不是五月。

4

2 回答 2

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>
    );
    }
}
于 2017-02-28T05:11:49.110 回答
0

试试这个 DateRangePicker 的道具

initialVisibleMonth={() => startDate}
于 2020-02-20T10:29:45.133 回答