`Intl.DateTimeFormat()` ignores 24-hour time setting on iOS devices
- Dominant language
- JavaScript
- Stars
- 11.3k
- Forks
- 859
- Avg merge
- 1h 30m
- Merged PRs (30d)
- 3
Description
## Bug Description
The 24-hour time option from the Date & Time settings on iOS is ignored when
formatting dates using different Locales and Regions.
`Intl.DateTimeFormat()` formats the dates based solely on the locale and does not
take into account whether the user has enabled the 24-hour time on the device.
As an example, dates using `en-GB` locale always produce 24-hour times, and dates
using `en-AU` locale always produce AM/PM times. Options don't include `hourCycle`
or `hour12` properties.
- [ ] I have run `gradle clean` and confirmed this bug does not occur with JSC
- [x] The issue is reproducible with the latest version of React Native.
Hermes git revision (if applicable):
React Native version: 0.82.1 (but reproducible down to 0.79.5 at least)
OS: iOS 18.6.2, on an iPhone 12 mini
Platform: arm64e
## Steps To Reproduce
1. On the phone, navigate to Settings app, General, Date & Time.
2. Turn on the 24-hour time switch.
3. Open the app and observe the dates formatted for different locales.
4. Repeat steps 1-3, but this time turning off the 24-hour time switch.
Code example: [Github Repository](https://github.com/bh-sgarcia/IntlBug)
## The Expected Behavior
The dates presented in the demo app should all read "9:00" for the time component,
independently of the locale, as the user has forced the 24-hour format.
When the setting is turned off, the date using the `en-AU` locale should use a 12-hour
cycle ("9:00 am"), and the date using the `en-GB` should use a 24-hour cycle ("9:00").
Contributor guide
Research direction
Start with the linked IntlBug repository and reproduce the behavior on iOS using Hermes while toggling the device's 24-hour setting. Compare Intl.DateTimeFormat() output for the en-AU and en-GB locales; done means the device setting is respected while locale-specific behavior remains correct when the setting is off.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, javascript, react-native
- Domain
- internationalization, mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100