fix(datetime): update active day styling when day is selected (#24454)

Resolves #24414, #24451

core/src/components/datetime/datetime.tsx

@@ -273,6 +273,11 @@ export class Datetime implements ComponentInterface {
     this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues);
   }
 
+  @Watch('activeParts')
+  protected activePartsChanged() {
+    this.activePartsClone = this.activeParts;
+  }
+
   /**
    * The locale to use for `ion-datetime`. This
    * impacts month and day name formatting.
@@ -944,7 +949,7 @@ export class Datetime implements ComponentInterface {
       ampm: hour >= 12 ? 'pm' : 'am'
     }
 
-    this.activePartsClone = this.activeParts = {
+    this.activeParts = {
       month,
       day,
       year,
@@ -1206,7 +1211,7 @@ export class Datetime implements ComponentInterface {
                     month,
                     day,
                     year
-                  })
+                  });
                 }}
               >{day}</button>
             )
@@ -1290,7 +1295,7 @@ export class Datetime implements ComponentInterface {
             ev.stopPropagation();
           }}
         ></ion-picker-column-internal>
-        { !use24Hour && <ion-picker-column-internal
+        {!use24Hour && <ion-picker-column-internal
           color={color}
           value={activePartsClone.ampm}
           items={ampmItems}
@@ -1311,7 +1316,7 @@ export class Datetime implements ComponentInterface {
 
             ev.stopPropagation();
           }}
-        ></ion-picker-column-internal> }
+        ></ion-picker-column-internal>}
       </ion-picker-internal>
     )
   }

core/src/components/datetime/test/basic/e2e.ts

@@ -79,3 +79,25 @@ describe('Footer', () => {
 });
 
 
+describe('datetime: selecting a day', () => {
+
+  it('should update the active day', async () => {
+    const page = await newE2EPage({
+      html: `
+        <ion-datetime show-default-buttons="true" value="2021-12-25T12:40:00.000Z"></ion-datetime>
+      `
+    });
+
+    const activeDay = await page.find('ion-datetime >>> .calendar-day-active');
+
+    expect(activeDay.innerText).toEqual('25');
+
+    const dayBtn = await page.find('ion-datetime >>> .calendar-day[data-day="13"][data-month="12"]');
+    dayBtn.click();
+    await page.waitForChanges();
+
+    const newActiveDay = await page.find('ion-datetime >>> .calendar-day-active');
+
+    expect(newActiveDay.innerText).toEqual('13');
+  });
+});