Skip to content

Commit f1d50c0

Browse files
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 <[email protected]>
1 parent ac3959a commit f1d50c0

File tree

2 files changed

+34
-1
lines changed

2 files changed

+34
-1
lines changed

core/src/components/datetime/datetime.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1234,7 +1234,8 @@ export class Datetime implements ComponentInterface {
12341234
}
12351235

12361236
private processValue = (value?: string | string[] | null) => {
1237-
const hasValue = value !== null && value !== undefined && (!Array.isArray(value) || value.length > 0);
1237+
const hasValue =
1238+
value !== null && value !== undefined && value !== '' && (!Array.isArray(value) || value.length > 0);
12381239
const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
12391240

12401241
const { minParts, maxParts, workingParts, el } = this;

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,38 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
121121

122122
await expect(datetime).toHaveJSProperty('value', '2022-10-01T16:22:00');
123123
});
124+
125+
test("should display today's date and time when value is an empty string", async ({ page }) => {
126+
await page.setContent(
127+
`
128+
<ion-datetime locale="en-US" presentation="date-time" value=""></ion-datetime>
129+
130+
<script>
131+
const mockToday = '2024-07-24T16:22';
132+
Date = class extends Date {
133+
constructor(...args) {
134+
if (args.length === 0) {
135+
super(mockToday)
136+
} else {
137+
super(...args);
138+
}
139+
}
140+
}
141+
</script>
142+
`,
143+
config
144+
);
145+
146+
await page.locator('.datetime-ready').waitFor();
147+
148+
// July 24, 2024
149+
const todayButton = page.locator('.calendar-day[data-day="24"][data-month="7"][data-year="2024"]');
150+
await expect(todayButton).toHaveClass(/calendar-day-today/);
151+
152+
// 4:22 PM
153+
const timeBody = page.locator('ion-datetime .time-body');
154+
await expect(timeBody).toHaveText('4:22 PM');
155+
});
124156
});
125157
});
126158

0 commit comments

Comments
 (0)