React-dates: Open DateRangePicker on selected month

[mir3z]

I need to open DateRangePicker on date presented in input I've clicked. For instance, if I have 01/01/2016 in the first input and 01/01/2017 in the second input I want the widget to show 01/01/2016 when I click the first input and 01/01/2017 when I click the second input. I don't see any way to to that. Is it even possible?

[jzhang300]

@mir3z I've found a hacky workaround to this.

In the state, define a boolean flag:

getInitialState() {
    return {
      ...,
      startDate: moment(this.props.query.date.from),
      endDate: moment(this.props.query.date.to),
      refreshDatePicker: true,
    };
  },

onFocusChange event:

onFocusChange(focusedInput) {
    this.setState({ refreshDatePicker: false });
    setTimeout(() => {
      this.setState({ refreshDatePicker: true });
    }, 10);
  },

in rendered component:

  render() {
    ...
           {this.state.refreshDatePicker ? (
              <DateRangePicker
                ...
                onFocusChange={this.onFocusChange}
                keepOpenOnDateSelect
                ...
              />
            ) : (
              // static html copy of component we still want to render
              <div className="DateRangePicker">
                <div className="DateRangePickerInput">
                  <div className="DateInput">
                    <label className="DateInput__label" htmlFor="startDate">Start Date</label>
                    <input
                      type="text"
                      className="DateInput__input"
                      id="startDate"
                      name="startDate"
                      value={this.state.startDate.format('MM/DD/YYYY')}
                      placeholder="Start Date"
                      autoComplete="off"
                      readOnly
                    />
                    <div className="DateInput__display-text DateInput__display-text--has-input">{this.state.startDate.format('MM/DD/YYYY')}</div>
                  </div>
                  <div className="DateRangePickerInput__arrow">
                    <svg viewBox="0 0 1000 1000">
                      <path d="M694.4 242.4l249.1 249.1c11 11 11 21 0 32L694.4 772.7c-5 5-10 7-16 7s-11-2-16-7c-11-11-11-21 0-32l210.1-210.1H67.1c-13 0-23-10-23-23s10-23 23-23h805.4L662.4 274.5c-21-21.1 11-53.1 32-32.1z" />
                    </svg>
                  </div>
                  <div className="DateInput">
                    <label className="DateInput__label" htmlFor="endDate">End Date</label>
                    <input
                      type="text"
                      className="DateInput__input"
                      id="endDate"
                      name="endDate"
                      value={this.state.endDate.format('MM/DD/YYYY')}
                      placeholder="End Date"
                      autoComplete="off"
                      readOnly
                    />
                    <div className="DateInput__display-text DateInput__display-text--has-input">{this.state.endDate.format('MM/DD/YYYY')}</div>
                  </div>
                </div>
              </div>)
       ...
   }

Here's the result:

[majapw]

This is not currently possible without the hack that @jzhang300 described. initialVisibleMonth is only called once right now and so without unmounting and remounting the datepicker you won't be able to change the month.

One struggle I've been concerned with is the animation when transitioning more than 1 month while the datepicker is open and visible. If we can figure out a good solution for that then we can probably implement a solution to this problem.

[jzhang300]

@majapw yeah I noticed that the react-dates component is only loading 4 months at a time, which I figured was the main blocker.

One solution could just be to directly transition from startDate's month to endDate's month, so you don't have to worry about potentially transitioning through a huge amount of months.

Or if there a lot of months in between, there could be a panel in between the transition that says something like (Fast Forwarding 12 months) or (Rewinding 12 months).

Not sure if those ideas made any sense...

[sany2k8]

@jzhang300 can you tell me where I need to put this changes that you have made for keeping the selected dates month open ?

[nc1127]

another work around would be putting a key in your component
<DayPickerRangeController key={this.state.startDate? this.state.startDate.format('DDMM'):''} ...... />