test(datetime): fix flaky tests (#30598)

This attempts to fix the flaky/failing tests here:

`should not have visual regressions with a custom styled calendar`
<img width="1658" height="916" alt="CleanShot 2025-08-04 at 13 46 12@2x"
src="https://github.com/user-attachments/assets/b5d54ee8-b315-4db0-b09b-65d9cd2fa7ca"
/>

`should switch the calendar header when moving to a month with a
different number of days`
<img width="2104" height="1752" alt="CleanShot 2025-08-04 at 13 45
33@2x"
src="https://github.com/user-attachments/assets/8a0cdb0b-6e9d-4b5c-a2df-f9174431492b"
/>

---------

Co-authored-by: Brandy Smith <[email protected]>

Author: brandyscarney

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

@@ -30,6 +30,8 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test('should allow styling calendar days in grid style datetimes', async ({ page }) => {
       const datetime = page.locator('#custom-calendar-days');
 
+      await page.locator('.datetime-ready').last().waitFor();
+
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`));
     });
   });

core/src/components/datetime/test/custom/index.html

@@ -164,7 +164,7 @@ <h2>Grid Style</h2>
       const customDatetime = document.querySelector('#custom-calendar-days');
 
       // Mock the current day to always have the same screenshots
-      const mockToday = '2023-06-10T16:22';
+      const mockToday = '2023-06-10T16:22:00.000Z';
       Date = class extends Date {
         constructor(...args) {
           if (args.length === 0) {

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

@@ -17,6 +17,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test('should switch the calendar header when moving to a month with a different number of days', async ({
       page,
     }) => {
+      await page.locator('.datetime-ready').waitFor();
+
       const monthYearToggle = page.locator('ion-datetime .calendar-month-year');
       const monthColumnItems = page.locator('ion-datetime .month-column ion-picker-column-option');
 
@@ -25,6 +27,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       await monthYearToggle.click();
       await page.waitForChanges();
 
+      // Wait for the picker to be fully rendered
+      await page.locator('ion-picker').waitFor({ state: 'visible' });
+
       // February
       await monthColumnItems.nth(1).click();
       await page.waitForChanges();