hypeserver / react-date-range

A React component for choosing dates and date ranges.
MIT License
2.59k stars 679 forks source link

Setting focusedRange to end date does not seems to make effect #506

Open rhogeranacleto opened 3 years ago

rhogeranacleto commented 3 years ago

Subject of the issue

When set the focusedRange={[0, 1]} does not show the end date of range.

[BUG] Bug Reproduce Steps

Create a component passing the focused range property setting the rangeElement equal 1 <DateRangePicker focusedRange={[0, 1]}/>.

My current component looks like this:

<DateRangePicker
  rangeColors={[colorDatePicker.range1]}
  data-lpignore="true"
  minDate={
    isOutsideRange(momentStoredStartDate) ? dateStoredStartDate : dateMinDate
  }
  maxDate={dateMaxDate}
  focusedRange={[0, focusedInput]}
  dragSelectionEnabled={false}
  onChange={handleChangeDateRangePicker}
  className={!showDatePresets ? "hide-presets" : ""}
  months={2}
  ranges={[
    {
      startDate: datePickerState[0].startDate,
      endDate: moment(datePickerState[0].endDate).subtract(1, "days").toDate(),
      key: datePickerState[0].key,
    },
  ]}
  direction="horizontal"
  showSelectionPreview
  showDateDisplay={false}
/>;

Where focusedInput is a state with the value 0 || 1 to control which date should be focused on.

[BUG] Expected behavior

Show on the calendar the end date from range.

The actual behavior is to ignore the second parameter to decide which date to show:

date end nao

Looking at the code I have found this line https://github.com/hypeserver/react-date-range/blob/90c59accb6fcc3a0f34a2c57e318359aeb33ba01/src/utils.js#L30 where the start date is always shown first not matter which parameter we send in the focusedRange.

When I change this line to take into account the informed parameter, the behavior is close to what was expected:

date end

Environment

Package Version: ^1.1.3 (but tested in the latest version and still the same) React version: ^16.12.0 Node version: v12.13.0 Browser: Any