javascriptreactjsdatepickerreact-dates

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

I'm trying to add airbnb-react-date. After selecting start date and end date when I am re-opening the date picker the calendar shows current month instead of the selected start date/end date's month.

For example: If I set start date = 2017-05-05 and end date = 2017-05-09 then it shows the selected date, but if I click again the calendar picker opens and it only shows current month i.e February calendar, that's why I have to click the next month, next month to see the previous selected dates i.e May;

How I implemented: From https://github.com/airbnb/react-dates#getting-started

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

I have installed required node packages i.e babel, webpack. Every time I run command webpack on the project directory to build the bundle.js and then run index.html to see the output.

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

What I Have:enter image description here

What I Need:

enter image description here

Solution

  • as stated in react-dates storybook you can do this with initialVisibleMonth={endDate} on the render function.

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