Brave-browser: Please respect region time format on new tab

[felixakiragreen]

Test plan

See https://github.com/brave/brave-core/pull/3256

Description

New Tab dashboard shows time in AM/PM, even though system settings are set to 24h time.

No similar issues in brave-browser.
Similar issues in brave-laptop:

• https://github.com/brave/browser-laptop/issues/7781
• https://github.com/brave/browser-laptop/issues/5647
• https://github.com/brave/browser-laptop/issues/11117
  (All closed without solution)

Steps to Reproduce

1. Change system locale to some locale that defaults to 24 time, such as Brazilian Portuguese (Mac: System Preferences > Language & Region > Preferred languages > click the plus button)
2. Open Brave with New Tab

Actual result:

Expected result:

Time should match locale time (24-hour if locale defaults to it, such as pt-BR suggested in the test plan above). Switching back to locales that default to 12-hour (such as en-US) should update accordingly.

Reproduces how often:

Always

Brave version (chrome://version info)

Brave | 0.55.6 Chromium: 70.0.3538.16 (Official Build) dev (64-bit)
Revision | 16ed95b41bb05e565b11fb66ac33c660b721f778-refs/branch-heads/3538@{#306}
OS | Mac OS X
JavaScript | V8 7.0.276.9

Reproducible on current release:

Yes, reproducible also on browser-laptop.

Additional Information

After digging through the source code here:
https://github.com/brave/brave-core/blob/master/components/brave_new_tab_ui/components/app.tsx
I can see that brave-ui/old/clock is being used:
https://github.com/brave/brave-ui/blob/master/src/old/clock/index.tsx
Which renders AM/PM time directly.

[kartik-budhiraja]

I would like to work on this issue if it's available.

[srirambv]

@kartik-budhiraja that would be awesome. I've self assigned the issue so that no one else works on it and then submit a PR with the fix.

[alexandersjosten]

Is anyone still working on this? Otherwise I would like to give it a go.

[kartik-budhiraja]

I planned to work on it, but unfortunately, cannot any soon, so you are good to go from my side.

[alexandersjosten]

Alright, great. I'll have a look then.

[geekrumper]

I've took a look at this. Sorry I've never developed React and have no idea how you would put the solutions structurally together. Therefore no pull request.

It seems you're using Intl.React to solve internalization.
This code line shows me that a format is being provided but with an empty array instead of a locale or an array of locales. I do not know if this is being loaded dynamically afterwords or not.

Looking at the examples from Intl.React, a locale should be provided or else it will always fall back to default.

The counter part to this is how locales are being loaded for that package. The following documentation gives me a hint, but I think something in that regard has already been done in this project.

One other thing to note here is that system locale is preferred, because my browser is in english but my system locale is something else.

[alexandersjosten]

Yes, this is pretty much what I've discovered as well -- the issue seem to be in the brave-ui code.
I'll look around a bit to see if the locale can be loaded dynamically afterwards.

[mladenko]

I don't know if this is still the problem, but if you wont to change 12h to 24h format, you can change to your local language in settings then put it on top, Brave will change time format. I guess it has something to do with navigator.language option.

[alexandersjosten]

@mladenko Yes, but that would go against the original issue, where the user shouldn't have to change the browser language. At least for my case when trying it, I had to change the language from English to my mother tongue for the clock change to happen, perhaps I did something wrong?

On a side-note, I think I have a working solution here, so I will hopefully make a PR soon (depending on how the PR for brave-ui goes).

[mrfnasse]

I managed to solve it by using "English United Kingdom" as language. It is better than having the 12 hour clock format.

If it is impossible to make it work by reading the locale, why not just add one of those "switches" in the settings page, where you can choose 12 or 24 hour manually?

And if not even that is possible, why not make 24 hour clock standard? There are only a few countries in the world where microsoft standard is 12 hour.

[Clemenzah]

@mrfnasse

I changed my language to English United Kingdom but still I have 12h format clock on new page. What else did you change except this?

Thanks

[mrfnasse]

@Clemenzah

Make sure you put it on top, and that you click on those three dots to also use it for Brave user interface. I dont know if both these actions are necessary, but I did it and it works.

[jgontrum]

As stupid as it sounds - this missing feature is the only reason I'm not adapting the Brave browser. I checked it out a year ago and was annoyed by the time format, but seeing that a year later this fundamental feature is still not even prioritized is just infuriating.
It just gives me the feeling that the project is completely focused on an US audience and doesn't care at all for its international users.

[bsclifton]

@jgontrum this should be one we can take action on soon!

@imptrx is working diligently on the new tab page, specifically on some of the higher priority issues at first, but this is definitely a reasonable one to grab. I assigned a P4 priority and made sure it's captured on our work board
https://github.com/brave/brave-browser/projects/19

Thanks for being patient 😄 There are a LOT of things to fix- and we DO want to fix them. It's just a matter of having enough time

[samirmember]

Same issue, I want to have my hour synchronized with Windows time with 24hrs format.
This should be something that users can set with their preferences.

[marcelobalexandre]

Hi, folks!

The workaround suggested by @mrfnasse about setting a language that uses the 24h format to the top of the language settings didn't worked for me (I'm running the Brave 0.65.121 on the Elementary OS 5.0 Juno).

I looked at the code mentioned by @geekrumper (https://github.com/brave/brave-ui/blob/master/src/features/newTab/default/clock/index.tsx#L26) and if we change it to:

get dateTimeFormat (): any {
  return new Intl.DateTimeFormat(navigator.languages, { hour: '2-digit', minute: '2-digit' })
}

Then the time will be formatted based on the Brave's language settings.

I'm not sure if this is a good solution because in some cases the user could want to use English but with a 24h format. I feel that respecting the system time format would be a more elegant solution.

I was not able to find how we can do this, does anyone knows if it is possible to get this information on the brave-ui? Or maybe we can get this from the brave-core?

I got to this issue searching for the good first bug label, I would love to help to fix it if someone could point me in the right direction.

[corb06]

Hello!

Brand new Brave user here, but why does Brave browser just respect what settings we have in Windows clock? I have set 24 hours view in Windows, but Brave wants to show a 12-hour system instead..
Other option is to just put this option in settings, so that every user can select there own preference.

[felixakiragreen]

The Language English UK trick doesn't work for me. Please, at the very least just make it a toggle if you can't read the System's localization settings.

[cvoges12]

You could have an option for 12-hour or 24-hour based instead of trying to automatically detect the localization settings.

[karenkliu]

@rebron Is this currently being worked on?

[willstocks]

I just noticed this today - defo need a toggle as opposed to _only_ relying on system locale?

For instance, I use:

• English UK - system display language
• English US - system input language (don't ask me why)

Brave had defaulted display to just "English" with no localization, which was resulting in a 12hr clock (with no am/pm notation) on the New Tab Page, while my system is 24hr.

I have implemented the "English UK" language trick in Brave's settings and it has worked for me. I don't fully understand the purpose of the "Translate into this language" tickbox though as it's grayed out for everything and just applied to the top option... but now I have a 24 hours clock on my NTP so I'm a bit happier! 😁

[spoike]

Just here to chime in that adding the Swedish language doesn't change the clock to 24 hr format.

To be honest, I'd rather have a configuration option to remove the clock from the new tab page.

[bsclifton]

@spoike that option does exist in Nightly and will be working its way to the release channel 😄

Looks like this:

Also available in the bottom right (on Dev and Nightly I believe):

[cezaraugusto]

Thanks all for the multiple ideas here.

While it's possible to get the time format based on system locale, in my investigation, it's impossible, at least via web APIs, to detect the time format alone, which means that if your system is using a locale that defaults to 24-hour, then our NTP will display the 24-hour clock. i.e., if your system defaults to en-US, switching to the 24-hour system will take no effect. Same applies for the opposite, changing to pt-BR (Brazilian Portuguese) will always display a 24-hour clock.

We do have plans to allow users to customize the clock, but this is a matter for a different issue. As my comment here, I'm going to update this issue test plan so we can have a better approach to time than what we have right now, otherwise we would need to label this as wontfix and close the issue.

[DaPiGH]

LOOKING GOOD.
A small trap: "English", which seems to be the default, gives the same result as "English (United States)" you need (possibly) to add "English (United Kingdom)" as a language and select that to get 24h format.
Thanks guys.

[drasbeck]

Is this implemented in Version 0.68.140 Chromium: 77.0.3865.90 (Official Build) (64-bit)?

I am still looking at a mix of 24h and 12h here.

I'm using Denmark as region and English (US) as language on macOS 10.14.6 (18G95)

Thanks for looking into the clock. =)

[LaurenWags]

Verified passed with

Brave | 0.70.110 Chromium: 77.0.3865.90 (Official Build) beta (64-bit)
-- | --
Revision | 58c425ba843df2918d9d4b409331972646c393dd-refs/branch-heads/3865@{#830}
OS | macOS Version 10.13.6 (Build 17G5019)

• Verified test plan from https://github.com/brave/brave-core/pull/3256
  Default English-US:
  
  Change to Portuguese-Brazil and relaunch:
  

• Also encountered what was noted in https://github.com/brave/brave-browser/issues/1308#issuecomment-525482063 - changing US to 24hr clock had no effect on NTP, so unfortunately this is expected for nwo.

Verification passed on

Brave | 0.70.111 Chromium: 77.0.3865.90 (Official Build) beta (64-bit)
-- | --
Revision | 58c425ba843df2918d9d4b409331972646c393dd-refs/branch-heads/3865@{#830}
OS | Ubuntu 18.04 LTS

• Verified test plan from https://github.com/brave/brave-core/pull/3256
  
  

Verification passed on

Brave | 0.70.111 Chromium: 77.0.3865.90 (Official Build) beta (64-bit)
-- | --
Revision | 58c425ba843df2918d9d4b409331972646c393dd-refs/branch-heads/3865@{#830}
OS | Windows 10 OS Version 1803 (Build 17134.1006)

[c-kirkeby]

This is still an issue on Windows 10 Pro 1909 (18363.476) in Version 1.0.0 Chromium: 78.0.3904.97 (Official Build) (64-bit). At 15:18 the new tab page is still showing 3:18.

[survivor303]

Perhaps people dosnt want to change from US to UK. Like me, i want that every new bits are there on my builds, so im not want wait for uk translations. Thats why i and many others want to use US language on primary everywhere but still want to change date formats and such to match our own ones.

This isnt just a brave problem but wide ratio to other applications too. why? it is a problem by design and then by devs who design software, they dosnt even think about this :/

[luminoso]

same here, on linux. won't it be a lot easier to make it a option on the new tab definitions?

[bsclifton]

For folks experiencing this problem, check out https://github.com/brave/brave-browser/issues/7951 and give it a +1 😄