Airbnb React 日期范围选择器仅显示当前月历未选择日期月历

Question

我正在尝试添加 airbnb-react-date。在我重新打开日期选择器时选择开始日期和结束日期后，日历显示当前月份而不是所选开始 date/end 日期的月份。

例如：如果我设置开始日期 = 2017-05-05 和结束日期 = 2017-05-09 那么它显示所选日期，但如果我再次单击日历选择器打开，它只显示当前月份，即 February 日历，这就是为什么我必须单击下个月，下个月才能看到上一个选定的日期，即 5 月 ;

我是如何实现的： 来自 https://github.com/airbnb/react-dates#getting-started

已安装npm install --save react-dates moment@>=#.## react@>=#.## react-dom@>=#.## react-addons-shallow-compare@>=#.##

我已经安装了所需的节点包，即 babel、webpack。每次我运行命令 webpack 在项目目录上构建 bundle.js 然后运行 index.html 来查看输出。

index.html

<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="_datepicker.css"/>
</head>
<body><div id="form" style="height: 400px">
   <h4>Initial date picker</h4>

   <div style="margin-left: 4px" id="mydatepicker"></div>
</div><script async type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

entry.js

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

ReactDOM.render(
    <HomePageDatePicker
        />, document.getElementById('mydatepicker')
);

webpack.config.js

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      { 
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'stage-0', 'react'],
          plugins: ['transform-runtime']
        }
      }
    ]
  }
};

我有什么：

我需要什么：

Answer 1

如 react-dates storybook 中所述，您可以在渲染函数上使用 initialVisibleMonth={endDate} 执行此操作。

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"
              initialVisibleMonth={endDate}
              />
        </div>
    );
  }
}

ReactDOM.render(
    <HomePageDatePicker
        />, document.getElementById('mydatepicker')
);

Answer 2

你可以用 numberOfMonths="1" 来做到这一点。

     <DateRangePicker
                    startDatePlaceholderText="Check In"
                    endDatePlaceholderText="Check Out"
                    initialVisibleMonth={endDate}
                    displayFormat="DD-MM-YYYY"
                    numberOfMonths="1"
                    startDate={this.state.startDate} // momentPropTypes.momentObj or null,
                    startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
                    endDate={this.state.endDate} // momentPropTypes.momentObj or null,
                    endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
                    onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired,
                    focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
                    onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
                    initialVisibleMonth={this.state.endDate}
                    
                />

Airbnb React 日期范围选择器仅显示当前月历未选择日期月历

Airbnb react date range picker only showing current month calendar not selected dates month calender

javascript

datepicker

reactjs

react-dates