bug: initial value in ion-datetime with "time" presentation not shown

[sburnicki]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

ion-datetime with presentation="time" and an initial value shows the wrong value ("12:00 AM") until you interact with the component (click in the video).
https://user-images.githubusercontent.com/5701519/156773032-af44b34f-cf27-48e3-8bc5-86c513303cd5.mp4

Expected Behavior

The datetime component with presentation="time" should initially show the time passed via "value" attribute.

Steps to Reproduce

• add a datetime component <ion-datetime presentation="time" [value]="'16:23'"></ion-datetime>
• go to the page with the component
• the component shows "12:00 AM" instead of "4:23 PM"

Code Reproduction URL

https://github.com/sburnicki/ionic-bug-datetime-time-initial-value

Ionic Info

Ionic:

   Ionic CLI                     : 6.18.1 
   Ionic Framework               : @ionic/angular 6.0.10
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.4.2
   @capacitor/android : not installed
   @capacitor/core    : 3.4.2
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.5.0

System:

   NodeJS : v16.13.1 
   npm    : 8.1.2
   OS     : Linux 5.11

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I can reproduce this behavior. This behavior changed in aacb58a according to git bisect. cc @sean-perkins

I verified this in src/components/datetime/test/minmax test file.

---

We do have screenshot tests for this file that should have caught this: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime/test/minmax/e2e.ts. The screenshots are not full size, so this particular reproduction in the minmax test was probably out of viewport.

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

6.0.11-dev.11646403908.14a66af

This dev build applies to any of our packages (Angular, React, Vue, Core).

[sburnicki]

Thanks for the insanely fast response and fix.
I can confirm that the issues is resolved in 6.0.11-dev.11646403908.14a66af

[liamdebeasi]

Glad to hear the issue is resolved. Feel free to continue using that build for development until this fix ships.

[liamdebeasi]

Thanks for the issue. This has been resolved via #24879, and a fix will be available in an upcoming release of Ionic Framework.

[liamdebeasi]

A fix has been released as part of Ionic 6.0.11.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.