feat: Localize time picker hour/minute options in ion-datetime

[alberto-martinbelloso]

Prerequisites

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

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

After setting ion-datetime's locale to Arabic

<ion-datetime locale="ar"></ion-datetime>

The time picker is still rendered using the Latin numbers (1,2,3 ..etc). Also for presentation="time". AM/PM is correctly translated to Arabic but not the numbers.

Expected Behavior

All the numbers within the ion-datetime component should be displayed according to the locale.

Steps to Reproduce

Set the locale property with any Arabic locale that uses the Arabic-Indic numbering system.

<ion-datetime locale="ar"></ion-datetime>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.5 Ionic Framework : @ionic/angular 6.4.1 @angular-devkit/build-angular : 13.3.10 @angular-devkit/schematics : 11.1.2 @angular/cli : 13.3.10 @ionic/angular-toolkit : 3.0.1

Cordova:

Cordova CLI : not installed Cordova Platforms : not available Cordova Plugins : not available

Utility:

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

System:

ios-sim : 8.0.2 NodeJS : v16.15.1 npm : 8.11.0 OS : macOS Monterey Xcode : Xcode 13.2.1 Build version 13C100

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed. In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly. Thank you!

[sean-perkins]

Hello @alberto-martinbelloso thank you for reporting this.

ion-datetime uses Intl.DateTimeFormat to localize different portions of the date object, such as the day period (am/pm). We do not currently use this for formatting the hour/minute selection of time.

I'll tag this as a feature, as we may be able to create a formatted instance for each hour and minute and use that to construct the individual items.

e.g.:

new Intl.DateTimeFormat('ar-SA', {
    hour: 'numeric',
    minute: 'numeric',
    timeZone: 'UTC',
    hourCycle: 'h12'
}).format(new Date());
// '٤:٢٧ م'

Note: There are 5 Arabic locales that use Latin numerics: ar-DZ, ar-EH, ar-LY, ar-MA, and ar-TN. In my testing, ar also produced Latin numerics.

[alberto-martinbelloso]

@sean-perkins Thanks for your quick answer. Would be great to have this feature :)