javascript – Airbnb反应日期范围选择器仅显示当前月份日历未选择日期月份日历

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

例如:如果我设置开始日期= 2017-05-05和结束日期= 2017-05-09然后它显示所选日期,但如果我再次单击日历选择器打开,它只显示当前月份即二月日历,那是为什么我必须点击下个月,下个月查看之前选择的日期,即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']
        }
      }
    ]
  }
};

我有什么:enter image description here

我需要的:

enter image description here

最佳答案
如react-date storybook中所述,您可以在render函数上使用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')
);

转载注明原文:javascript – Airbnb反应日期范围选择器仅显示当前月份日历未选择日期月份日历 - 代码日志