React-dates: After setting end date before start date make start date null and focus start date

[cheeZery]

After you set the end date before the start date, the controller always sets the selected date as the new start date and sets end date to null. Is there a way tot tell the DayPickerRange to set the selected date indeed as end date and set null to the start date and open its input?

If I'm not wrong then this is the corresponding code snippet:

      // src/components/DayPickerRangeController.jsx
      // DayPickerRangeController.onDayClick

      // focusedInput === END_DATE

      const firstAllowedEndDate = startDate && startDate.clone().add(minimumNights, 'days');

      if (!startDate) {
        // Start date not selected, focus it
        endDate = day;
        onFocusChange(START_DATE);
      } else if (isInclusivelyAfterDay(day, firstAllowedEndDate)) {
        // End date is after start date
        endDate = day;
        if (!keepOpenOnDateSelect) {
          onFocusChange(null);
          onClose({ startDate, endDate });
        }
      } else {
        // End date is before start date, make end date null
        startDate = day;
        endDate = null;
      }

So this might either be a feature request for an option to allow end dates before start dates or a question for a work around to achieve this ;-)

Thanks for your help!

[majapw]

@cheeZery Turns out this is a feature request! :) That behavior is by default... I think the assumption is that by click a date that was invalid in this particular way, the user probably wanted that as a start date.

What would we call this new feature? Should it be prop enabled? What are your thoughts?
_naming is the hardest part of the problem_

[ljharb]

What’s the actual use case? That might help the naming significantly.

[cheeZery]

Hey, sorry for the delay, and thanks for your quick responses!

As @majapw pointed out, users probably want to set a new start date, when they clicked a date before the current start date. But users might also actually knew that the end date input was focused, and now decided to select a new date range. They would pick the end date first (but actually setting the start date instead), and then would click the intended start date. After that they might be confused why the end date hasn't changed this whole time.
While writing this, I do realize that this might be an edge case, and that users might very well realize that they have to set the start date first, if they want to set a new date range before the currently selected one. I also realize that too many props can make the React component hard to document and maintain :ok_man:
But if you guys think this can easily be implemented, I would be very grateful. I wouldn't mind to try it myself!
As to what this prop could be named (because I think it should be a prop of the DateRangePicker, if you were to implement that feature), it might be something like allowEndDateSelectionBeforeStartDate. But this is a bit long.. allowEndDateBeforeStartDate might on the other hand be misleading. Or something along the line of disableAutoCorrectToStartDate.. :thinking:

https://martinfowler.com/bliki/TwoHardThings.html

Best regards,
Carsten

[thiemeljiri]

I'm voting for this, as this happened to me several times. Now, the client also noticed this independently and reports it as an issue. I know it's more complex than it may seem on the first sight, but it really is an issue. You cannot expect the user will understand the behaviour pattern as more technically skilled people will. Of course he will manage to make the selection in the end, but we don't want to cause any frustration and delays. "Don't make me think." I believe that there is a better solution for that allowing to always create a selection between two dates.

[jooner]

Not sure if anyone has been able to resolve this, but I've also been confused why the default behavior was such. After some playing around, I added the enableOutsideDays={true} and minimumNights={some negative number} props. This allows users to pick a start date that is after the (previous) end date input.

<DateRangePicker
            startDateId="startDate"
            endDateId="endDate"
            startDate={props.startDate}
            endDate={props.endDate}
            onDatesChange={({ startDate, endDate}) =>
              props.onChange({startDate, endDate})}
            autoFocusEndDate={false}
            focusedInput={props.focusedInput}
            onFocusChange={(focusedInput) =>
              props.focusChange(focusedInput)}
            isOutsideRange={() => false}
            enableOutsideDays={true}
            keepOpenOnDateSelect={true}
            minimumNights={-100000}
            hideKeyboardShortcutsPanel={true}
            numberOfMonths={4}
          />

Not a pretty/perfect fix, so if you have a better rec, please share.