How to obtain information about the time format (12/24) from Angular Locale?

Question

having a string representing the language (optionally with country info), how can I know if the time should be shown as 12H or 24H ?

for example

is12HFormat('en_EN') // returns true
is12HFormat('es_ES') // returns false

Note that I do not want to use a pipe to show a time in a specific format, just find out if one or the other should be used.

EDIT:

currently using:

 private guessIf12HTimeFormat(language: string): boolean {
    const date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
    const dateString = date.toLocaleTimeString(language);
    return (!!dateString.match(/am|pm/i) || !!date.toString().match(/am|pm/i));
  }

Billy · Answer 1 · 2017-10-13T11:33:11.207

2

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

Note the hour12 option.

hour12: Whether to use 12-hour time (as opposed to 24-hour time). Possible values are true and false; the default is locale dependent.

Depending on what you're trying to achieve I would also recommend checking out moment.js which has "robust support for internationalization".

Perhaps:

var format = new Intl.DateTimeFormat('es-ES');
var usedOptions = format.resolvedOptions();
var use24 = !usedOptions.hour12;

edited Oct 13 '17 at 11:33

answered Oct 13 '17 at 11:14

Billy

35
6

I haven't tested this but I'm wondering if by **not** specifying the hour12 option it works out the format based on the locale. – Billy Oct 13 '17 at 11:16
so the solution would be to generate a dummy time, specifying a locale, but not the hour12 option and then parse it to guess which one has Date.prototype used? - sounds rather involved.. but I guess it would work – marsop Oct 13 '17 at 11:18
https://stackoverflow.com/questions/27647918/detect-with-javascript-if-users-machine-is-using-12-hour-clock-am-pm-or-24-cl – Billy Oct 13 '17 at 11:20
I've started this test codepen but it's not returning the correct result yet: https://codepen.io/anon/pen/YrOGYp – Billy Oct 13 '17 at 11:57
It looks like I did, can you reapply your change so I can see what you did? – Billy Oct 13 '17 at 12:55
private guessIf12HTimeFormat(language: string): boolean { const date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0)); const dateString = date.toLocaleTimeString(language); return (!!dateString.match(/am|pm/i) || !!date.toString().match(/am|pm/i)); } – marsop Oct 13 '17 at 13:05
codepen with your latest code - https://codepen.io/anon/pen/wrEgqG - seems to work, not sure if it's correct for all cultures, e.g. Arabic. – Billy Oct 13 '17 at 13:13
i think there must be some way to access the hour12 value for a locale but cant work it out. – Billy Oct 13 '17 at 13:42
according to https://travel.stackexchange.com/questions/34950/which-large-countries-use-12-hour-time-format-am-pm, there should be true for "en" but also for "ar-sa" and "es-co". For the last two does not work, which makes me think that it ignores the country and returns the response based on language alone – marsop Oct 13 '17 at 13:46
alternatively you could try moment.js and check for HH:mm vs hh:mm for a locale. http://momentjs.com/docs/#/i18n/ ... probably not what you're after though.... – Billy Oct 13 '17 at 14:04
ive been looking for a better solution but havent found anything. could you store your own list to lookup the value? – Billy Oct 14 '17 at 10:04
https://i.stack.imgur.com/43dwH.jpg could you create a list of the countries (or culture codes) where the 12 hr format applies? I might be wrong, but dont think theres a reliable way to do it cross browser – Billy Oct 14 '17 at 10:21
1

I would like to avoid creating a list that I need to update manually in the (unlikely) case that a new country decides to suddenly start using 24H. Since it is not a critical issue, the solution proposed in the question does the trick for me. – marsop Oct 18 '17 at 13:43

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

You can achieve it using vanila JavaScript. Here is the example.

var date = new Date();

Here setting hour12: true comes as 12 hour format

date.toLocaleString('en-US', {hour12: true})

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 13 '17 at 11:04

Rajkeshwar Prasad

869
8
11

your example works by comparing the countryInfo with some predefined hardcoded variable. What I would like is a function that receives the language and returns true if 12H is the expected format and false if 24H. Like I said, no interest in using it to format a time string. – marsop Oct 13 '17 at 11:08

score 0 · Answer 3 · answered Oct 24 '19 at 21:22

For folks stumbling on this, You can somewhat introspect the options a format uses by default via DateTimeFormat.resolvedOptions, but you need to ensure that you specify an hour as part of the format otherwise it's likely to be left out at least in some environments

const options = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
}).resolvedOptions();

alert(options.hour12)

Use either the whatever the local you wish here.

How to obtain information about the time format (12/24) from Angular Locale?

3 Answers3