dayPickerProps.month does not always update DayPicker

[Yustynn]

Apologies - I couldn't get a fiddle working for the DayPickerInput (couldn't get unpkg working).

Here's an example of it not working though. It's (more or less) a copy of navigation by year, merged with DayPickerInput.

To reproduce the error, don't select any day but try to change either the month or the year. You'll notice that the change doesn't reflect in the DayPicker, unless you've preselected a day. I'll make a PR shortly to resolve this, and the reason behind it will be very obvious then.

import React from 'react';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';

const propTypes = {
	fromMonth: React.PropTypes.object,
	toMonth: React.PropTypes.object,
};

const currentYear = new Date().getFullYear();

const defaultProps = {
  fromMonth: new Date(currentYear - 10, 0, 1, 0, 0),
  toMonth: new Date(currentYear + 10, 11, 31, 23, 59),
};

function YearMonthForm({ date, localeUtils, onChange, fromMonth, toMonth }) {
  const months = localeUtils.getMonths();

  const years = [];
  for (let i = fromMonth.getFullYear(); i <= toMonth.getFullYear(); i += 1) {
    years.push(i);
  }

  const handleChange = function handleChange(e) {
    const { year, month } = e.target.form;
    onChange(new Date(year.value, month.value));
  };

  return (
    <form className="DayPicker-Caption">
      <select name="month" onChange={handleChange} value={date.getMonth()}>
        {months.map((month, i) => <option key={i} value={i}>{month}</option>)}
      </select>
      <select name="year" onChange={handleChange} value={date.getFullYear()}>
        {years.map((year, i) => (
          <option key={i} value={year}>
            {year}
          </option>
        ))}
      </select>
    </form>
  );
}

class DateInput extends React.Component {
  state = {
    month: this.props.fromMonth,
  };

  handleYearMonthChange = month => {
    this.setState({ month });
  };

  render() {
    const { month } = this.state;
    const { fromMonth, toMonth, ...props } = this.props;

    const dayPickerProps = {
      captionElement: (<YearMonthForm fromMonth={fromMonth} toMonth={toMonth} onChange={this.handleYearMonthChange} />),
      fromMonth,
      toMonth,
      month
    }

    console.dir(dayPickerProps)

    return (
      <div className="YearNavigation">
        <DayPickerInput 
          dayPickerProps={dayPickerProps} 
          placeholder="MM/DD/YYYY"
        />
      </div>
    );
  }
}

DateInput.propTypes = propTypes;
DateInput.defaultProps = defaultProps;

export default DateInput;

[gpbl]

The fix has been published in v6.0.0 (changelog). Thanks @Yustynn for reporting it!

PS. Now you can even use the input component from unpkg: https://jsfiddle.net/gpbl/cggxvq6t/