bug: ion-datetime displays 0:00 pm on phone chromium browsers

[JoeBoxr]

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
• Nightly

Current Behavior

When selecting the time on the datetime popup and setting 12:00 pm, the resulting value in datetime component is 0:00 pm. This only occurs on phone devices (Android version 12 for this test) running chromium browser (chrome, edge etc.). It works as expected with Firefox on mobile.

Expected Behavior

It's expected that 12:00 pm selected in the time popup results in a 12:00 pm value in datetime component.

Steps to Reproduce

Use the following code in a mobile (Android 12) web app.

<ion-datetime-button datetime="openTime"></ion-datetime-button> <ion-modal [keepContentsMounted]="true"> <ng-template> <ion-datetime hourCycle="h12" id="openTime" presentation="time" showDefaultButtons="true" doneText="Ok"></ion-datetime> </ng-template> </ion-modal>

Code Reproduction URL

https://angular-ivy-ptcjwe.stackblitz.io

Ionic Info

Ionic:

Ionic CLI : 5.4.4 (C:\Users\Admin\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 6.2.4
@angular-devkit/build-angular : 13.3.3
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.3.3
@ionic/angular-toolkit : 6.1.0

Utility:

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

System:

NodeJS : v14.17.0 (C:\Program Files\nodejs\node.exe)
npm : 6.14.13
OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the report. What version of Chrome are you testing this on? I am testing this on Chrome 104 on Android 13 and am unable to reproduce this issue. The datetime button renders "12:00 PM" as expected.

[JoeBoxr]

Hello.

It's on Android 12 running Chrome 104 and Chrome dev 106

[liamdebeasi]

Do you have any additional information that could help me reproduce the issue? Also what device are you testing this on?

I see the text being rendered as "12:00 PM" on a Pixel 4a:

[JoeBoxr]

Shows up fine on a tablet running Android 11 and a phone running Android 6. Seems to be isolated to just Android 12

[JoeBoxr]

The Android 12 device I'm using is running OnePlus OxygenOS which may be the underlining problem to this issue

[liamdebeasi]

Thanks for the additional information. What is the locale being used on your device? You can find this by logging navigator.language when inspecting the app using Chrome developer tools.

[JoeBoxr]

Hello.

For some reason it's showing up as en-GB on this device when it should be en-US. This is obviously an OS issue and thank you for your time looking into this.

[liamdebeasi]

Thanks! Setting the locale to en-GB is what triggered the issue for me. I can confirm that this is a bug.

Ionic uses Intl.DateTimeFormat to handle most of the date and time localization. One of the options we use here is hour12 which lets us control whether to show the time in a 12 hour or 24 hour format.

It looks like there is a bug in Chromium-based browsers (Chrome, Edge, Brave, etc) where "12:00 pm" is incorrectly rendered as "0:00 pm" even when setting hour12: true: https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2. Using the hourCycle option instead seems to resolve the issue. We should probably use this anyways since it will make supporting #23750 easier.

[liamdebeasi]

Here is a dev build if you would like to test the proposed fix:

npm install @ionic/[email protected]

You may need to install this to a local application as StackBlitz sometimes has trouble installing dev builds.

[liamdebeasi]

Thanks for the issue. This has been resolved via #25869, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to continue testing the dev build.

[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.