From 9216744205c1ecc0c3dd51490a25be102f27a91a Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 11 Nov 2022 13:53:45 -0500
Subject: [PATCH] fix(datetime): clear button clears the selected date (#26264)

Resolves #26258
---
 core/src/components/datetime/datetime.tsx     |  7 +++++
 .../datetime/test/basic/datetime.e2e.ts       | 28 +++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 3245cdc0c7..c5289278fd 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1220,6 +1220,13 @@ export class Datetime implements ComponentInterface {
           ampm,
         };
       }
+    } else {
+      /**
+       * Reset the active parts if the value is not set.
+       * This will clear the selected calendar day when
+       * performing a clear action or using the reset() method.
+       */
+      this.activeParts = [];
     }
   };
 
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index 5548980f67..6925a04b69 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -327,3 +327,31 @@ test.describe('datetime: RTL set on component', () => {
     await expect(nextPrevIcons.last()).toHaveClass(/flip-rtl/);
   });
 });
+
+test.describe('datetime: clear button', () => {
+  test('should clear the active calendar day', async ({ page, skip }, testInfo) => {
+    skip.rtl();
+    skip.mode('md');
+
+    testInfo.annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/26258',
+    });
+
+    await page.setContent(`
+      <ion-datetime value="2022-11-10" show-clear-button="true"></ion-datetime>
+    `);
+
+    await page.waitForSelector('.datetime-ready');
+
+    const selectedDay = page.locator('ion-datetime .calendar-day-active');
+
+    await expect(selectedDay).toHaveText('10');
+
+    await page.click('ion-datetime #clear-button');
+
+    await page.waitForChanges();
+
+    await expect(selectedDay).toHaveCount(0);
+  });
+});