Detect with javascript if user's machine is using 12 hour clock (am/pm) or 24 clock (military time)

Question

Is it possible to detect if user's machine is using 12 hour clock (am/pm) or 24 hour clock (military time)?

One way would be to check users locales, but then it is just massive list of locale comparison and someone from U.S who wants 12 hour clock can send me just en locale, not US_en and I have no way of knowing her preferences. At the same time someone from U.S might be set her machine to use 12 hour time format and doesn't want 12 hour clock.

EDIT:

date.toLocaleTimeString();

Would work it theory, as user Mouser suggested below, but unfortunately it's bugged on WebKit browsers (tested on Chrome and new Opera on Windows) and for some reason always returns am/pm time.

Example: http://jsfiddle.net/sjuaL3p4/

So I guess I have to rephrase my question if anyone has an idea how to accomplish it on webkit browsers also.

Answer 1

You can utilize the Internationalization API with resolvedOptions to determine the hourCycle:

const locale = navigator.language
Intl.DateTimeFormat(locale,  { hour: 'numeric' }).resolvedOptions().hourCycle // ?
Intl.DateTimeFormat('en-US', { hour: 'numeric' }).resolvedOptions().hourCycle // h12
Intl.DateTimeFormat('en-GB', { hour: 'numeric' }).resolvedOptions().hourCycle // h23

Answer 2

This solution works in most browsers, but bugs in Chrome.

    var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
    var dateString = date.toLocaleTimeString();

    //apparently toLocaleTimeString() has a bug in Chrome. toString() however returns 12/24 hour formats. If one of two contains AM/PM execute 12 hour coding.
    if (dateString.match(/am|pm/i) || date.toString().match(/am|pm/i) )
    {
        //12 hour clock
        console.log("12 hour");
    }
    else
    {
        //24 hour clock
        console.log("24 hour");
    }

Workaround Chrome; A proof of concept

This is an ugly work-around for Chrome. It sniffs out the users country_code via reverse geolocation. That code is checked against an array with countries using the 12 hour system. This solution is ugly because you need user permission to get geolocation data and if the users locale is different it will give the wrong information, but will provide you with the country of the user. I strongly advise against using this example. It's purely for inspiration purposes. I made it up as a proof of concept.

	function getClockChrome() {

		navigator.geolocation.getCurrentPosition(function(pos) {
			var url = "http://nominatim.openstreetmap.org/reverse?format=json&lat="+pos.coords.latitude+"&lon="+pos.coords.longitude+"&addressdetails=1&accept-language=en_US&json_callback=chromeClockCallBack";
			var script = document.createElement('script');
			script.src = url;
			document.body.appendChild(script);
		},
		
		function()
		{
			//no access to location
		},
		

		{
		  enableHighAccuracy: true,
		  timeout: 5000,
		  maximumAge: 0
		}
		);

	}

	getClockChrome();

	var dateCountryCode = ['US', 'GB', 'PH', 'CA', 'AU', 'NZ', 'IN', 'EG', 'SA', 'CO', 'PK', 'MY'];
	function chromeClockCallBack(data)
	{
        //Request succeeded
		if (dateCountryCode.indexOf(data.address.country_code.toUpperCase()) > -1)
		{
			alert("12 hour clock");
		}
		else
		{
			alert("24 hour clock");
		}
	}