auro-datepicker: Should be allowed to overwrite/control flow

[tyler-jackson-alaska]

Is your feature request related to a problem? Please describe.

Presently, Flight Search uses this component with range enabled. Additionally, we prepopulate the Departed section with today's date:

This leads to an issue where if the user clicks on Departed to overwrite the prepopulated date, they'll instead be filling out Return. The user will then have to click on the Datepicker again to choose Departed.

Describe the solution you'd like

It would be nice if the datepicker component, when using range, could at least event out which slice was clicked.

Describe alternatives you've considered

As per Jason Baker's recommendation:
Using two datepicker components, neither being range, and having them communicate to one another.
This would be doable but involve major refactors on our own wrapper component.

Second alternative would be to not prepopulate the Departed date.

Additional context

No response

Exit criteria

datepicker either natively supported contextual clicking or at least propagating the event of which slice was clicked.

[tyler-jackson-alaska]

Search team has decided to implement a short term solution of clearing out the Departure date upon initial navigation to the page, but would ultimately like to see an implementation of the range variant that supports contextual clicks on either Departure or Return.

Thanks!

[mlilli]

Here are our findings when exploring a solution to this issue, which is only when the datepicker is set to date range. All logic is handled in auro-datepicker.js.

We added a property called triggerInputIndex which is of type number or undefined which defaults to undefined, and gets set in the inputs' keyup and click handler in configureInput() to the index of the event target. This is used in handleCellClick to determine which was selected to open the datepicker (start or end date input field).

We then updated handleCellClick() to handle setting the selected calendar values:

  handleCellClick(time) {
    this.cellClickActive = true;

    const newDate = this.convertWcTimeToDate(time);

    // If the new value is not a valid date string, exit.
    if (!this.util.validDateStr(newDate)) {
      return;
    }

    const isNotRange = !this.range || this.inputList.length === 1;

    // If this is not a range or we do not yet have a value set, set the value and exit.
    if (isNotRange) {
      this.value = newDate;

      return;
    }

    // We are a date range
    const hasNoFromDate = !this.value || !this.util.validDateStr(this.value);

    // If there is no value set yet, set it and exit
    if (hasNoFromDate) {
      this.value = newDate;
      this.triggerInputIndex = undefined;

      return;
    }

    const hasNoToDate = !this.valueEnd || !this.util.validDateStr(this.valueEnd);
    const isTriggerFromDate = this.tiggerInputIndex === 0;
    const isTriggerToDate = this.tiggerInputIndex === 1;
    const isNewDateDifferentFromFromDate = newDate !== this.value;
    const newDateObj = new Date(newDate);
    const fromDateObj = new Date(this.value);
    const toDateObj = !hasNoToDate ? new Date(this.valueEnd) : undefined;
    const isNewDateOnOrAfterFromDate = newDateObj >= fromDateObj;
    const isNewDateBeforeFromDate = newDateObj < fromDateObj;
    const shouldSetToDate = isNewDateOnOrAfterFromDate && (isTriggerToDate || (!isTriggerFromDate && isNewDateOnOrAfterFromDate && !toDateObj));
    const shouldSetFromDate = !shouldSetToDate && (isNewDateBeforeFromDate || (!isTriggerToDate && isNewDateDifferentFromFromDate));

    if (shouldSetFromDate) {
      this.value = newDate;
      this.valueEnd = undefined;
      this.triggerInputIndex = undefined;
    } else if (shouldSetToDate) {
      this.valueEnd = newDate;
      this.triggerInputIndex = undefined;
    }
  }