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

Resolves #24414
ionic-team · Dec 21, 2021 · 541c047 · 541c047
1 parent 4715b83
commit 541c047
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
@@ -802,14 +802,14 @@ export class Datetime implements ComponentInterface {
       startIO = new IntersectionObserver(ev => ioCallback('start', ev), {
         threshold: mode === 'ios' ? [0.7, 1] : 1,
         root: calendarBodyRef
-       });
+      });
       startIO.observe(startMonth);
 
       this.destroyCalendarIO = () => {
         endIO?.disconnect();
         startIO?.disconnect();
       }
-   });
+    });
   }
 
   connectedCallback() {
@@ -1201,12 +1201,12 @@ export class Datetime implements ComponentInterface {
                     year
                   });
 
-                  this.setActiveParts({
+                  this.setActiveParts(this.activePartsClone = {
                     ...this.activeParts,
                     month,
                     day,
                     year
-                  })
+                  });
                 }}
               >{day}</button>
             )
@@ -1249,7 +1249,7 @@ export class Datetime implements ComponentInterface {
     minutesItems: PickerColumnItem[],
     ampmItems: PickerColumnItem[],
     use24Hour: boolean
-   ) {
+  ) {
     const { color, activePartsClone, workingParts } = this;
 
     return (
@@ -1290,7 +1290,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 +1311,7 @@ export class Datetime implements ComponentInterface {
 
             ev.stopPropagation();
           }}
-        ></ion-picker-column-internal> }
+        ></ion-picker-column-internal>}
       </ion-picker-internal>
     )
   }
@@ -1321,7 +1321,7 @@ export class Datetime implements ComponentInterface {
     minutesItems: PickerColumnItem[],
     ampmItems: PickerColumnItem[],
     use24Hour: boolean
-   ) {
+  ) {
     return [
       <div class="time-header">
         {this.renderTimeLabel()}
@@ -1411,7 +1411,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <div class="datetime-time">
-          {timeOnlyPresentation ? this.renderTimePicker(hoursItems, minutesItems, ampmItems, use24Hour) : this.renderTimeOverlay(hoursItems, minutesItems, ampmItems, use24Hour)}
+        {timeOnlyPresentation ? this.renderTimePicker(hoursItems, minutesItems, ampmItems, use24Hour) : this.renderTimeOverlay(hoursItems, minutesItems, ampmItems, use24Hour)}
       </div>
     )
   }