Question

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

例如：如果我设置开始日期= 2017-05-05 并结束日期= 2017-05-09 ，则会显示所选日期，但如果我再次点击日历选择器打开，它只显示当前月份，即二月日历，这就是为什么我必须点击下个月，下个月查看之前选择的日期，即五月

我是如何实施的：来自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')
);

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

1 个答案: