5

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

例如：如果我设置开始日期 = 2017-05-05和结束日期 = 2017-05-09然后它显示选定的日期，但如果我再次点击日历选择器打开它只显示当前月份，即二月日历，那就是为什么我必须点击下个月，下个月才能看到之前选择的日期，即May；

我是如何实现的： 来自 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以查看输出。

索引.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']
        }
      }
    ]
  }
};

我有的：在此处输入图像描述

我需要的：

在此处输入图像描述

4

1 回答 1

4

如 react-dates故事书中所述，您可以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')
);
于 2017-12-12T01:00:47.483 回答