New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

`dayPickerProps.month` does not always update `DayPicker` #380

Closed
Yustynn opened this Issue Jun 7, 2017 · 1 comment

Comments

2 participants
@Yustynn
Contributor

Yustynn commented Jun 7, 2017

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 gpbl added this to the v5.6.0 milestone Jun 10, 2017

@gpbl gpbl closed this in 4a9c433 Jun 10, 2017

@gpbl gpbl changed the title from [DayPickerInput] `dayPickerProps.month` does not always update `DayPicker` to `dayPickerProps.month` does not always update `DayPicker` Jun 10, 2017

@gpbl

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Jun 17, 2017

Owner

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/

Owner

gpbl commented Jun 17, 2017

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment