jelhan
How to control AM/PM or 24 hour time format?
Hello everyone. We’re having some inconsistencies with time format on our Croodle instance; even on two of my computers, both running macOS, both running Firefox, both with same language and time and date settings … on one of my computers times are displayed with AM/PM and on the other in 24 hour format.
Could anyone please help out with this issue and tell me how to control the time format? I guess it’s something client-side.
I’d like to work on this issue and submit a PR. Could you please assign it to me and add the hacktoberfest label?
@Aariyan007 Great to hear. I would recommend trying to reproduce the issue as a first step. I wouldn't be sure how to reproduce it.
12 hour and 24 hour time format can be controlled through the locale. It is the main difference between the options "english" (12 hour format) and "english (GB)" (24 hour format).
The locale is derived by default based on the client settings - unless the user has selected a locale before. If the user has selected a locale before, that one may be persisted in the local storage and restored when the user opens Croodle again.
Croodle cannot alter the time format used by the time input per my knowledge. The form element <input type="time"> uses the devices locale. Last time I looked into the topic there weren't any option to alter the locale used for those native input elements.
Could you please [...] add the hacktoberfest label?
Are you sure that's needed? The repository already has the hacktoberfest topic.
Thanks for confirming! I’ll get started on this issue. Also, I might have a few doubts while working on it would it be okay if I ask you here if I get stuck? Thank You
I can see you're using native elements in...... client/components/create-option-datetime.hbs(but please correct me if I'm looking at the wrong file)
From what I understand, the inconsistency stems from these native inputs using device locale settings that can't be overridden programmatically. The browser decides whether to show 12h/24h format based on the user's locale, which explains why two seemingly identical setups might differ. I see a few potential approaches to fix this:
Replace native time inputs with a custom time picker component This would give full control over formatting.
I think we could:
Add a user preference for 12h/24h format in settings (stored in localStorage alongside the locale preference) Use a library like ember-power-timepicker or maybe build a custom Ember component Ensure consistent display across all devices regardless of locale
From what I understand, the inconsistency stems from these native inputs using device locale settings that can't be overridden programmatically. The browser decides whether to show 12h/24h format based on the user's locale, which explains why two seemingly identical setups might differ.
Yes. That was also the outcome of my last investigation on the topic.
Replace native time inputs with a custom time picker component
This comes with trade-offs:
- User experience as users are trained on native inputs provided by the browser / operation system but not on custom time pickers
- Maintenance costs due to additional dependency
- Increased bundle size
- Potential impact on accessibility (depending on the chosen library)
I'm not sure if it is worth those trade-offs. I would love understanding better in which cases the browser's 12/24h format and the user's selected format does not match. Is this the case if using TOR Browser which may not follow device settings to reduce fingerprinting risk?
I'm not sure if it is worth those trade-offs. I would love understanding better in which cases the browser's 12/24h format and the user's selected format does not match. Is this the case if using TOR Browser which may not follow device settings to reduce fingerprinting risk?
What if we just added a small informational note near the time inputs saying "Time format follows your browser settings" with a link to help docs? This sets proper expectations without any code changes or dependencies.