AirBnB React-dates not showing selected range

Question

I'm trying to add AirBnB React-dates. All of functionality working except one thing (Not opening the month of already selected dates).

When I'm assigning the start and end dates then it selects the range but not showing the selected month. It showing the current month instead.

For example: If I set start date = 2017-05-05 and end date =2017-05-09 then it shows the selection, but in next time calendar picker open it only shows current month, so I have to click the next month, next month to see the previous selected dates;

My code:

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

When I open the picker, it shows February instead of May.

Morgan G · Answer 1 · 2017-02-28T05:45:45.113

1

You need to add a selected state still like this:

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}
                //Here is the change:
                date={startDate}
                startDate={startDate}
                endDate={endDate}                                     
                startDateId="datepicker_start_home"
                endDateId="datepicker_end_home"                    
                startDatePlaceholderText="Check In"
                endDatePlaceholderText="Check Out"
            />
        </div>
    );
    }
}

edited Feb 28 '17 at 05:45

answered Feb 28 '17 at 05:11

Morgan G

3,089
4
18
26

Thanks for your answer. Still its showing February month instead of showing May month. :'( – Janie Feb 28 '17 at 05:32
Yeah I just realized that you are using react-dates hrmm. Woops! Give me one second I'll try and code-pen something – Morgan G Feb 28 '17 at 05:41
I fixed it. Try date={startDate} – Morgan G Feb 28 '17 at 05:45
@Mogan G, Still it is not working. could u please give me the code-pen link? I'm using airbnb react date-range-picker. – Janie Feb 28 '17 at 05:53
Ok so I went to their github and downloaded their storybook and am running it locally, and have no issues with your code at all, have you tried to do that? Are you getting any console errors? – Morgan G Feb 28 '17 at 06:12
@janie Try to not pass in {...this.props} as per https://github.com/airbnb/react-dates/issues/254 and see if that fixes anything. – Morgan G Feb 28 '17 at 06:17
date picker opened, but the months is not focused on the started date's month and console contains no error – Janie Feb 28 '17 at 06:21
Sorry at first I thought you were using date-picker. But I am really not sure. Do you want me to delete my answer, or leave it just in case someone else asks you to do exactly what I just made you do? Sorry I couldn't be more helpful! – Morgan G Feb 28 '17 at 06:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/136816/discussion-between-janie-and-morgan-g). – Janie Feb 28 '17 at 07:24

score 0 · Answer 2 · answered Feb 20 '20 at 10:29

0

Try this prop of DateRangePicker

initialVisibleMonth={() => startDate}

answered Feb 20 '20 at 10:29

mashahori

41
4

AirBnB React-dates not showing selected range

2 Answers2