React-dates: DRP Change visible month with onDatesChange()

[prztrz]

Hello I am working on application in which user should be able to select very broad date range like from 01/01/2007 to 01/01/2017, it would be usefull for me to change the visible month focus in this way:

Let's say the default startDate is 01/01/2007 and the default endDate is 01/01/2017. When user clicks on the start date the visible month should be January 2007, as it is the focus of start date. But when he/she finally picks the start date and is prompted to pick the end date visible month should immediately switch to January 2017 to be focused on the currently picked end date (perfectly if it worked without closing the calendar).

I tried something like this:

class ParentComponent extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            startDate:  moment('01-01-2007'),
            endDate: moment("01-01-2017"),
            initialVisibleMonth: moment('01-01-2007'),
        }
    }

    onDatesChange(startDate, endDate) = () => {
        this.setState({
            startDate: startDate,
            endDate: endDate,
            initialVisibleMonth: this.state.startDate !== startDate ? endDate : startDate
        })
    }

    render () {
        return(
            <DateRangePicker
                startDate={this.state.startDate}
                endDate={this.state.startDate}
                onDatesChange = ({startDate, endDate}) => this.onDatesChange(startDate, endDate)
                initialVisibleMonth: () => {this.state.initialVisibleMonth}
            />
        )
    }
}

So basically I tried to change initialVisibleMonth prop value with using onDatesChange() method but it clearly does not work. Is it possible to deal with my issue in other way?

[dallonf]

I ran into a similar issue in my project - I would expect the selected month to change to show whatever date input is selected (i.e. if the start date is focused, show the month of the current start date, if the end date is focused, show the month of the end date).

[jakeleventhal]

+1 on this. There doesn't seem to be a good way to put the end date always on the right side of the DateRangePicker.

[Jiia]

I don't know if there's a better way but you could hack this to work by forcing the DateRangePicker to remount by changing its key. However it's a costly operation and its internal state will reset which can cause other unwanted behaviour.

constructor(props) {
  this.state = {
    key: 'random_string'
    initialVisibleMonth: whatever
  }
}
onDatesChange(startDate, endDate) = () => {
  this.setState({
    key: 'new_random_string'
    initialVisibleMonth: whatever
  })
}
render() {
  return (
    <DateRangePicker
      key={this.state.key} 
      initialVisibleMonth={this.state.initialVisibleMonth}
    />
  )
}