- add styles for active adjacent day;

- scroll animation when adjacentDay is selected;

Author: JoaoFerreira-FrontEnd

core/src/components/datetime/datetime.ios.scss

@@ -251,7 +251,8 @@
  * is selected should have ion-color for
  * text color and be bolder.
  */
-:host .calendar-day.calendar-day-active {
+:host .calendar-day.calendar-day-active,
+:host .calendar-day.calendar-day-adjacent-day.calendar-day-active  {
   color: current-color(base);
 
   font-weight: 600;

core/src/components/datetime/datetime.md.scss

@@ -117,7 +117,8 @@
  * is selected should have ion-color for
  * text color and be bolder.
  */
-:host .calendar-day.calendar-day-active {
+:host .calendar-day.calendar-day-active,
+:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{
   color: current-color(contrast);
 }
 

core/src/components/datetime/datetime.tsx

@@ -2380,11 +2380,6 @@ export class Datetime implements ComponentInterface {
                       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.setWorkingParts({
                       ...this.workingParts,
                       month: _month,
@@ -2393,6 +2388,12 @@ export class Datetime implements ComponentInterface {
                       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(