p-datepicker component bug found

[VicTMPDeV]

Good morning everyone.

I think I have found a bug in the p-datepicker component:

I am working with an inline calendar with selectionMode="range" but applying different colors to the CSS classes .p-datepicker-day-selected and .p-datepicker-day-selected-range.

To reproduce the issue, you need to select a fairly wide range where the start and end day repeat numerically in intermediate months. Then, the following happens:

For example, if I select the date range from January 1st to March 28th, the bug is that the only days that should have the .p-datepicker-day-selected class applied are January 1st and March 28th, while the rest should have the .p-datepicker-day-selected-range class. However, this is not the case.

What actually happens (and I am almost certain it is a bug because it also occurs in the PrimeNG documentation example for datepicker range, but it is not noticeable unless you inspect it with devtools since the same color is applied) is that the days February 1st, March 1st, January 28th, and February 28th also get the .p-datepicker-day-selected class instead of .p-datepicker-day-selected-range, which should be the correct class.

Is this happening to anyone else? I assume it is, because it is not just an issue with my environment, but it also occurs on PrimeNG's official website.

[VicTMPDeV]

something similar occured on previous versions, and I fixed it with this function (if helps to fix it):

private applyRangeVisibility(): void {
    const firstDayValue = this.calendar()?.value[this.INDEX_FIRST_ITEM] ?? false
    const lastDayValue = this.calendar()?.value[this.INDEX_LAST_ITEM] ?? false
    if (firstDayValue && lastDayValue) {
      const isFirstDayVisible = this.calendar()?.months?.some(
        date => date?.month === firstDayValue?.getMonth()
            && date?.year === firstDayValue?.getFullYear(),
      )

      const isLastDayVisible = this.calendar()?.months?.some(
        date => date?.month === lastDayValue?.getMonth()
            && date?.year === lastDayValue?.getFullYear(),
      )

      if (!isFirstDayVisible) {
        const firstHighlightElement = this.calendar()
          ?.el.nativeElement.getElementsByClassName(this.FIRST_DAY_SELECTED_CLASS)
        this.renderer.removeClass(firstHighlightElement[this.INDEX_FIRST_ITEM], this.FIRST_DAY_SELECTED_CLASS)
      }

      if (!isLastDayVisible) {
        const lastHighlightElement = this.calendar()
          ?.el.nativeElement.getElementsByClassName(this.LAST_DAY_SELECTED_CLASS)
        this.renderer.removeClass(lastHighlightElement[this.INDEX_FIRST_ITEM], this.LAST_DAY_SELECTED_CLASS)
      }
    }
  }

[fangwyz]

Some issue

[VicTMPDeV]

I haven't found any issue about this. Since create issues includes required stackblitz example I prefer to comment here.

[VicTMPDeV]

I have create this issue

primefaces/primeng#17613