Use `initialMonth` in <input/> demo

catamphetamine commented 7 years ago

Currently the input field overlay demo always opens on January even if a day from another month is selected http://react-day-picker.js.org/examples/?overlay

I guess initialMonth={this.state.selectedDay} could be employed here. At least it seems to work for me. (I'm in the process building a custom component on top of your picker)

(also setting zIndex: 1 in overlayStyle seems to help with positioning)

And also I enhanced input text clearing on it being invalid:


  handleInputBlur() {
    ...

    // Let the `onChange` handler fire after this `onBlur`
    // in case when a user clicked a day in the calendar
    // and the `value` is still the old one.
    setTimeout(() => {
      // If an entered date isn't valid then clear the <input/> field
      const { value } = this.props;
      if (!value) {
        this.setState({ textValue: '' });
      }
    }, 0);
  }

catamphetamine commented 7 years ago

In case you're interested, here's my final component: https://github.com/halt-hammerzeit/webapp/blob/0b7390268f2125318ac2c0984af959998e7991d5/frontend/code/components/date%20picker.js

A bit of changes to your example and now it's fully working. You could make it part of the library, I think, because everyone is looking for a collapsible date picker, not a static one.

Usage:

<DatePicker
    value={this.state.selectedDay}
    onChange={selectedDay => this.setState({ selectedDay })}
    format="DD/MM/YYYY"/>

.DayPicker-Day:active:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
  color: #FFF;
  background-color: #72B2FC;
}

I'm not using AirBnB's one because it has MOMENT.JS written all over it. I like simpler things. And they're forcing their users to supply a moment object. Who do they think we are.

gpbl commented 7 years ago

Thanks this would fit well for https://github.com/gpbl/react-day-picker/issues/213

gpbl / react-day-picker

Use `initialMonth` in <input/> demo #244