From f1d50c0f645b3adf51426c24a1da0bbd1223f1d5 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 6 Sep 2024 12:28:33 -0400
Subject: [PATCH] fix(datetime): display today's date and time when value is an
 empty string (#29839)

Issue number: resolves #29669

---------

## What is the current behavior?

Setting `value` to an empty string on `<ion-datetime>` renders a May
2021 calendar:

```html
<ion-datetime value=""></ion-datetime>
```

## What is the new behavior?

Show the month and time for today's date when value is an empty string.
This matches how a native `input` with `type="datetime-local"` works.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

This can be tested by removing my fix in `datetime.tsx` and running the
e2e test for Datetime:

```bash
npm run test.e2e src/components/datetime/test/basic/datetime.e2e.ts
```

The `should display today's date and time when value is an empty string`
test should fail.

Alternatively, you can add a datetime with `value=""` and see the
calendar before & after my fix.

---------

Co-authored-by: Tanner Reits <47483144+tanner-reits@users.noreply.github.com>
---
 core/src/components/datetime/datetime.tsx     |  3 +-
 .../datetime/test/basic/datetime.e2e.ts       | 32 +++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 5be7040e7e0..9154c24e60b 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1234,7 +1234,8 @@ export class Datetime implements ComponentInterface {
   }
 
   private processValue = (value?: string | string[] | null) => {
-    const hasValue = value !== null && value !== undefined && (!Array.isArray(value) || value.length > 0);
+    const hasValue =
+      value !== null && value !== undefined && value !== '' && (!Array.isArray(value) || value.length > 0);
     const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
 
     const { minParts, maxParts, workingParts, el } = this;
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index eb025b41bc2..f96cc64bea9 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -121,6 +121,38 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await expect(datetime).toHaveJSProperty('value', '2022-10-01T16:22:00');
     });
+
+    test("should display today's date and time when value is an empty string", async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime locale="en-US" presentation="date-time" value=""></ion-datetime>
+
+        <script>
+          const mockToday = '2024-07-24T16:22';
+          Date = class extends Date {
+            constructor(...args) {
+              if (args.length === 0) {
+                super(mockToday)
+              } else {
+                super(...args);
+              }
+            }
+          }
+        </script>
+      `,
+        config
+      );
+
+      await page.locator('.datetime-ready').waitFor();
+
+      // July 24, 2024
+      const todayButton = page.locator('.calendar-day[data-day="24"][data-month="7"][data-year="2024"]');
+      await expect(todayButton).toHaveClass(/calendar-day-today/);
+
+      // 4:22 PM
+      const timeBody = page.locator('ion-datetime .time-body');
+      await expect(timeBody).toHaveText('4:22 PM');
+    });
   });
 });