fix(datetime): preferWheel can now show title (#26101)

resolves #26095

core/src/components/datetime/datetime.tsx

@@ -2102,12 +2102,8 @@ export class Datetime implements ComponentInterface {
       </ion-popover>,
     ];
   }
-  private renderCalendarViewHeader() {
-    const hasSlottedTitle = this.el.querySelector('[slot="title"]') !== null;
-    if (!hasSlottedTitle && !this.showDefaultTitle) {
-      return;
-    }
 
+  private getHeaderSelectedDateText() {
     const { activeParts, multiple, titleSelectedDatesFormatter } = this;
     const isArray = Array.isArray(activeParts);
 
@@ -2126,12 +2122,21 @@ export class Datetime implements ComponentInterface {
       headerText = getMonthAndDay(this.locale, this.getDefaultPart());
     }
 
+    return headerText;
+  }
+
+  private renderCalendarViewHeader(showExpandedHeader = true) {
+    const hasSlottedTitle = this.el.querySelector('[slot="title"]') !== null;
+    if (!hasSlottedTitle && !this.showDefaultTitle) {
+      return;
+    }
+
     return (
       <div class="datetime-header">
         <div class="datetime-title">
           <slot name="title">Select Date</slot>
         </div>
-        <div class="datetime-selected-date">{headerText}</div>
+        {showExpandedHeader && <div class="datetime-selected-date">{this.getHeaderSelectedDateText()}</div>}
       </div>
     );
   }
@@ -2178,7 +2183,7 @@ export class Datetime implements ComponentInterface {
      */
     const hasWheelVariant = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
     if (preferWheel && hasWheelVariant) {
-      return [this.renderWheelView(), this.renderFooter()];
+      return [this.renderCalendarViewHeader(false), this.renderWheelView(), this.renderFooter()];
     }
 
     switch (presentation) {

core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts

@@ -40,6 +40,18 @@ test.describe('datetime: prefer wheel', () => {
         `datetime-wheel-time-date-diff-${page.getSnapshotSettings()}.png`
       );
     });
+    test('should render a condense header when specified', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime size="cover" presentation="time-date" prefer-wheel="true" value="2019-05-30T16:30:00"><div slot="title">My Custom Title</div></ion-datetime>
+      `);
+      await page.waitForSelector('.datetime-ready');
+
+      const datetime = page.locator('ion-datetime');
+
+      expect(await datetime.screenshot()).toMatchSnapshot(
+        `datetime-wheel-header-diff-${page.getSnapshotSettings()}.png`
+      );
+    });
   });
   test.describe('datetime: date wheel', () => {
     test.beforeEach(({ skip }) => {