facebook / facebook/hermes

`Intl.DateTimeFormat()` ignores 24-hour time setting on iOS devices

Open
#1,822 1 comment 0 reactions 0 assignees View on GitHub
community-support-needed need more info
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.