Repository: ionic-team/ionic-framework
File: core/src/components/datetime/datetime.tsx (TypeScript)

Code before:
                    'calendar-day-constrained': isCalDayConstrained,
                    'calendar-day-today': isToday,
                    'calendar-day-adjacent-day': isAdjacentDay,
                  }}
                  part={dateParts}
                  aria-hidden={isCalendarPadding ? 'true' : null}
                  aria-selected={ariaSelected}
                  aria-label={ariaLabel}
                  onClick={() => {
                    if (isCalendarPadding) {
                      return;
                    }

                    this.setWorkingParts({
                      ...this.workingParts,
                      month: _month,
                      day,
                      year: _year,
                      isAdjacentDay,
                    });

                    if (isAdjacentDay) {
                      // The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
                      this.el.blur();
                      this.animateToDate(this.workingParts);
                    }

                    // multiple only needs date info, so we can wipe out other fields like time
                    if (multiple) {
                      this.setActiveParts(
                        {
                          month: _month,
                          day,
                          year: _year,
                          isAdjacentDay,
                        },
                        isActive
                      );
                    } else {
                      this.setActiveParts({
                        ...activePart,
                        month: _month,
                        day,
                        year: _year,
                        isAdjacentDay,
                      });
                    }
                  }}
                >
                  {text}
                </button>

Review comment (suggestion):
This isn't as smooth as when you press the arrow keys. There's a minor glitch after the animation ends. In the following video, it shows a smooth transition without readjustment when using the arrows. But when I select an adjacent day, the month does update smoothly but the dates jump around. That shouldn't be the case, it should be the same as when a user clicks on the arrows.


https://github.com/user-attachments/assets/82acd72e-475e-4398-957f-503dbde07187



Code after:
                    'calendar-day-constrained': isCalDayConstrained,
                    'calendar-day-today': isToday,
                    'calendar-day-adjacent-day': isAdjacentDay,
                  }}
                  part={dateParts}
                  aria-hidden={isCalendarPadding ? 'true' : null}
                  aria-selected={ariaSelected}
                  aria-label={ariaLabel}
                  onClick={() => {
                    if (isCalendarPadding) {
                      return;
                    }

                    if (isAdjacentDay) {
                      // The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
                      this.el.blur();
                      this.activeParts = { ...activePart, ...referenceParts };
                      this.animateToDate(referenceParts);
                      this.confirm();
                    } else {
                      this.setWorkingParts({
                        ...this.workingParts,
                        ...referenceParts,
                      });

                      // Multiple only needs date info so we can wipe out other fields like time.
                      if (multiple) {
                        this.setActiveParts(referenceParts, isActive);
                      } else {
                        this.setActiveParts({
                          ...activePart,
                          ...referenceParts,
                        });
                      }
                    }
                  }}
                >
                  {text}
                </button>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
  private renderCalendarBody() {
    return (
      <div class="calendar-body ion-focusable" ref={(el) => (this.calendarBodyRef = el)} tabindex="0">
        {generateMonths(this.workingParts, this.forceRenderDate).map(({ month, year }) => {
          return this.renderMonth(month, year);